Amaze UI HTML/CSS 规范


基本规范

HTML/CSS 编写注意事项

基本原则

模块化编写实践

如:

<div class="am-box">
   <h2 class="am-box-hd">About the Site</h2>
   <p class="am-box-bd">This is my blog where I talk about only the bestest things in the whole wide world.</p>
</div>

上面的代码中,模块的名为 box,模块最外层使用 {命名空间}-{模块名} 的方式命名 Class。模块子元素以在此基础上进行命名。如果不继承父级的类名,很容易造成命名冲突。

虽然在 Class 的命名上已经做到的了关注分离,编写样式不再依赖具体的元素名称,但仍应该考虑语义化,根据元素设计的目的来使用元素。是段落的,你就用 <p>;是标题的,就用 <h1>~<h6>;是引用的,就用 <blockquote>, 而不是简单粗暴的用 <div><span>。语义化的目的,一方面是抽去 CSS 以后,页面还是一个结构良好、可读的页面;另一方面,这也是 SEO 的最基本要求。

/* 推荐写法 */
.am-box {
    border: 1px solid #333;
}

.am-box-hd {
    margin: 0;
    padding: 5px 10px;
    border-bottom: 1px solid #333;
    background-color: #CCC;
}

.am-box-bd {
    margin: 10px;
}

/* 不推荐写法 */
.am-box .am-box-hd {}
.am-box .am-box-bd {}

比如,可以这样写:

<div class="am-box am-box-active">
   <h3 class="am-box-title"></h3>
   <p class="am-box-content"></p>
</div>

但不要这样写(效率更低):

<div class="am-box">
   <h3 class="am-box-title am-box-title-active"></h3>
   <p class="am-box-content am-box-content-active"></p>
</div>

命名注意事项

am-tabam-nav,不要使用 redleft 等表象的词命名。

常用状态有:hover, current, selected, disabled, focus, blur, checked, success, error 等

常用模块名有:bd(body),cnt(content),hd(header),text(txt),img(images/pic),title,item,cell 等, 词义表达组件要实现的功能。

<ul class="am-nav">
    <li class="am-nav-item">
        <a href="#">nav Triggle Link</a>
        <ul class="am-subnav">
            <li class="am-subnav-item">
                <a href="#">subNav Triggle Link</a>
                    <ul class="am-list">

CSS 编写注意事项

不要添加浏览器厂商前缀

Amaze UI 2.x 开始使用 Autoprefixer 自动添加浏览器厂商前缀,编写 CSS 时不要添加浏览器前缀,直接使用标准的 CSS 编写(也不要使用 mixins.less 里的前缀 mixin)。

特别说明

更多使用问题参见 Autoprefixer FAQ

需要特别注意的 Class

Amaze UI 中有两个表示状态的 class:

不要单独使用、直接在里面编写样式!!!

/* 可以嵌套用 */
.am-nav .am-active {
  ...
}

/* 可以堆叠用 */
.am-btn.am-active {
  ...
}

/* 绝不要单独用!!! */
.am-active {
  color: red;
}

参考链接