CSS规范主要包括以下内容:
- CSS Reset用YUI的CSS Reset。
- CSS采用CSSReset+common.css+app.css的形式。
- app.css采用分工制,一个前端工程师负责一个栏目,如果多人维护,需要添加注释。
- 为方便组件模块化和提高弹性,正常情况下,为避免外边界冲突,组件不设置外边界,外边界用组合CSS的方式实现,如下代码所示。
html:
<p>12345</P>
<ul class="textList marginTop10"
<li>XXXXXXXXXX</li>
</ul>
<p>abcd</p>
<ul class="textList marginTop20"
<li>XXXXXXXXXX</li>
</ul>
CSS:
.textList {xxxxxxx}
.marginTop10 {margin-top:10px;}
.marginTop20 {margin-top:20px;}
- 为避免组件的上下外边距重合问题和IE的haslayout引发的Bug,各模块除特殊需求,一律采用marginTop设置上下外边距,如下代码所示。
<p>xxxxxxxxxxxxx</p>
<p class="marginTop10">xxxxxxxxx</p>
- 优先对已存在的common.css中的类进行组合,减少自定义类的数量。
- CSS用一行的写法,避免行数太多,不利查找,如下代码所示。
.menu {margin:0;float:left;font-weight:bold;}
- 正式发布前应进行压缩,压缩后文件的命名应添加“_min"后缀。