瞬间从IT屌丝变大神——CSS规范

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"后缀。
以专业的态度和平凡的心态做非凡的事情。
原文地址:https://www.cnblogs.com/xingui/p/3485491.html