阅读(4459)
赞(0)
Amaze UI HTML/CSS 规范
2016-10-27 14:02:25 更新
1.基本规范
2.HTML/CSS 编写注意事项
2.1基本原则- 以 am 为命名空间
- 关注分离，将 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>
- 充分考虑结构的语义化。
- 避免不必要的 CSS 选择符嵌套。Class 已经模块化命名，从类名上已经可以清晰的分辨元素的从属，一般情况下也不会造成类名冲突，没有必要再进行选择器嵌套，保持 css 结构清晰，提高渲染效率。特殊情况可以嵌套（如提高权重、主题之间代码隔离），但应避免过多层级。
/* 推荐写法 */
.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 {}
- 与 JS 交互时，在模块 HTML 结构的最外一层添加状态，而非给模块每个子元素单独添加元素。给最外层添加状态类以后，整个模块的样式都能控制，减少操作，提高性能。
<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>
- 语义化，望文见义
- 模块状态： {命名空间}-{模块名}-{状态描述}
- 子模块： {命名空间}-{模块名}-{子模块名}
- 模块嵌套：
<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">
- 统一命名风格（使用相同名词命名不同组件的子元素）：如 am-tab-hd, am-modal-hd，便于理解。
2.4.1 不要添加浏览器厂商前缀
Amaze UI 2.x 开始使用 Autoprefixer 自动添加浏览器厂商前缀，编写 CSS 时不要添加浏览器前缀，直接使用标准的 CSS 编写（也不要使用 mixins.less 里的前缀 mixin）。
特别说明：
Amaze UI 2.x 开始使用 Autoprefixer 自动添加浏览器厂商前缀，编写 CSS 时不要添加浏览器前缀，直接使用标准的 CSS 编写（也不要使用 mixins.less 里的前缀 mixin）。
特别说明：
- 一些浏览器的私有属性可以添加浏览器前缀： -moz-appearance, -webkit-appearance 等
2.4.2 需要特别注意的 Class
Amaze UI 中有两个表示状态的 class：
- .am-active - 激活
- .am-disabled - 禁用