高维护性的CSS

1、如何高效地组织CSS代码。

     所有的CSS都可以分为两大类：通用类和业务类。将它们的代码放置于不同的目录中。

    （1） 通用类文件夹下应该有default.css、common.css、ie-style.css样式文件等。

               default.css文件中是重置元素的默认样式，目的是让元素在各个浏览器中有统一的外观。

               common.css文件中放置共通模块的样式和一些基础样式。共通模块包括页面对话框、提示框等共通组件的样式以及页面头部、底部、侧边栏等共通UI模块的样式；基础样式包括全局的页面布局设置、字体设置、背景和前景色等，也包括一些公有的class。

               一个公有class是用来设置文字不可见的，代码如下：

           .text-hide{
                font:0/0 a;
                color: transparent;
                text-shadow: none;
                background-color: transparent;
                border:0;
            }

                ie-style.css文件中放置兼容旧版IE浏览器的样式。在页面中使用IE浏览器独有的条件注释方法引用此样式文件。示例代码如下：

            <!--[IF lt IE 8]>
            <link rel="stylesheet" href="ie-style.css" />
            <![endif]-->

     （2）具体业务模块：不同模块的样式文件放置于不同的文件夹中。分割模块的粒度并没有一个标准，原则上尽量保证每个模块对应的样式文件行数不超过200行。

      文件中按照一定的规则来组织个样式声明：

             样式声明的顺序应该按照模块中元素的层级关系来处理，比如，应该从父元素开始定义。如果是同一级的元素，则按照元素在页面的位置从上到下、从左到右地定义对应的样式。在多个元素共用相同的声明时，则先声明共通样式，然后声明个体样式。

      使用Less和Sass来编写CSS样式：

            Less和Sass是动态的样式语言，将CSS赋予了动态语言的特性，如变量、继承、函数等，并且可利用CSS样式的预编译技术产生最终的CSS样式。

            Less：lesscss.org 

            Sass：http://sass-lang.com

2、使用CSS Reset：统一浏览器显示效果。

    重置元素默认样式的方式称为CSS Reset技术。

           第一个重置样式文件——undohtml.css,它有6条样式规则，代码如下：

            :link, :visited {
                text-decoration: none;
            }
            ul, ol {
                list-style: none;
            }
            h1,h2,h3,h4,h5,h6,
            pre,
            form,
            body,
            html,
            p,
            blockquote,
            fieldset,
            input {
                margin: 0;
                padding: 0;
            }
            a img, :link img, :visited img {
                border: none;
            }
            address {
                font-style: normal;
            }

            另一个样式重置方案。这个方案简单，但是增加了后续开发的复杂度，并不能有效地提高整体开发的效率。代码如下：

            * {
                margin: 0;
                padding:0;
            }

           目前使用较广泛的重置方案有Eric Meter开发的Reset CSS：http://meyerweb.com/eric/tools/css/reset 和雅虎公司前端技术团队开发的YUI Reset CSS：http://yuilibrary.com/yui/docs/cssreset

3、给CSS样式定义排序。

    如果CSS属性按照一定的规则排序，那么在开发过程中可以防止属性的重复定义，代码的检查者也能很清晰地查看CSS样式定义，更关键的是在后续维护过程中能快速定位特定的样式属性。

     （1）按类型分组排序

            这种排序最复杂，却也是最合理的方式。Andy Ford推荐过一种按照类型分组排序的方式，他把CSS属性分为7大类：显示与浮动（Diaply&Flow）、定位（Positioning）、尺寸（Dimensions）、边框相关属性（Margin、Padding、Borders、Outline）、字体样式（Typographic Styles）、背景（Backgrounds）、其他样式（Opacity、Cursors、Generated、Content）。Andy Ford给出了一个例子：http://fordinteractive.com/2009/02/order-of-the-day-css-properties。

     （2）按字母序排序

            规则是按照属性的首字母从a到z排序，忽略浏览器前缀（如-webkit-、-moz-、-o-及-ms-）。

     （3）按定义长度排序

           排列的方式可以从长到短，也可以从短到长（使用较少）。

       一款免费的CSS排序工具：CSScomb：http://csscomb.com。CSScomb提供了在线工具及主流代码编辑器的插件。

4、合理利用CSS的权重：提高代码的重用性。

    CSS权重指的是选择符的优先级，优先级高的CSS样式会覆盖优先级低的样式，优先级越高说明权重越高。

     CSS权重是通过如下规则计算的：

         1）标签中使用style=""属性设置的样式的权重（=a，相当与1000）。

         2）计算选择符中的ID选择器的数量（=b，相当与100）。

         3）计算选择符中的类选择器、属性选择器和伪类选择器的数量（=c，相当与10）。

         4）计算选择符中的标签类型选择器和伪对象选择器的数量（=d，相当与1）。

         5）忽略全局选择器（*相当与0）。

         6）!important 的权重是最高的。

     基础选择器具有这样的优先级：ID> 类|伪类|属性选择 > 标签类型|伪对象 > 通配符。

a{color: yellow;}     /*特殊性值：0,0,0,1*/
 div a{color: green;}      /*特殊性值：0,0,0,2*/
.demo a{color: black;}     /*特殊性值：0,0,1,1*/
 .demo input[type="text"]{color: blue;}      /*特殊性值：0,0,2,1*/
 .demo *[type="text"]{color: grey;}       /*特殊性值：0,0,2,0*/
 #demo a{color: orange;}      /*特殊性值：0,1,0,1*/
 div#demo a{color: red;}      /*特殊性值：0,1,0,2*/

     如果两个选择符的权重相同，则可按照“就近原则”来判断，最后定义的选择符会被采用。

     定义选择符的原则是尽量使选择符的权重低：

      1）CSS样式中尽量不要使用ID选择器。

       2）减少子选择器的层级

            减少选择器的层级的过程就是降低选择符整体权重的过程。同时，子选择器的层级越少，对HTML结构的依赖就越低。

       3）使用组合的CSS类选择器

            使用CSS选择器组合的方式，开发者可以不用考虑CSS样式覆盖的问题，避开了计算选择符权重的过程，同时提高了代码的重用性，还减少了类的数量。

            组合的概念是把一个复杂的父类中可变的部分和稳定部分分割开来，把稳定部分作为主体类，至于可变部分，则按照逻辑分为几个简单的类，类与类之间没有继承关系。

           一个简单的例子：例子中，不变的是文字的字体尺寸，可变的是文字的颜色。

      <!-- 这是HTML代码 -->
      <div id="test" class="test">
          这是一段
          <span class="common">重要的文字</span>
          ，请
          <span class="important">不要删除。</span>
      </div>

            /* 这是CSS样式 */
            .test {
                font-size: 40px;
            }
            .common {
                color: #ccc;
            }
            .important {
                color: #f00;
            }

 

5、CSS代码的兼容性：如何兼容IE浏览器。

     为了兼容旧版浏览器而添加的额外代码，被称为hack代码。

     以下是一些兼容IE浏览器的实践方法：

       1）熟悉IE浏览器中常见的样式兼容问题

            有兼容问题的IE浏览器主页集中在IE8及以下版本中。IE浏览器下的兼容问题一般分为两类，一类是浏览器本身的bug，另一类是和标准不兼容，或者不支持标准。

        2）分离样式兼容代码

             一般样式hack方法包括选择器的hack和样式属性的hack。

             最佳的做法是集中管理兼容代码。在IE浏览器中可以使用添加注释，让不同浏览器加载不同的样式文件以达到兼容代码和正常代码分离的目的。

      <link rel="stylesheet" media="screen" href="style.css" />
      <!--[if IE 8]>
          <link rel="stylesheet" media="screen" href="ie8.css" />
      <![endif]-->
      <!--[if IE 7]>
          <link rel="stylesheet" media="screen" href="ie7.css" />
      <![endif]-->

            为了提高兼容样式的优先级，可以在根元素（<html>或者<body>元素）上针对不同的浏览器添加不同的样式类，示例代码如下：

      <!--[if IE 7]><html class="ie7"><![endif]-->
      <!--[if IE 8]<html class="ie8"><![endif]-->

6、em、px还是%

      W3C官方文档主要把尺寸单位分为相对长度单位和绝对长度单位两种。相对单位长度分为字体相对单位和视窗相对单位，字体相对单位包括：em、ex、ch、rem，视窗相对单位包括：vw、vh、vmin及vmax。绝对长度单位定义的长度是固定的，使用的是物理度量单位，包括：cm、mm、in、px、pt及pc。

     1）px：是Pixel的缩写，表示像素。

     2）em：em是一个相对单位。等同于元素上计算的字体大小值，比如2em表示的大小等同于所应用于元素上字体大小的两倍。

     3）百分比：%是相对于父元素尺寸来计算的。

     最佳实践：

     1）尽量设置相对尺寸：如果期望尺寸随着字体的改变而改变，则应该使用em，如果期望尺寸尺寸随着父元素尺寸的改变而改变，则应该使用百分比。例如：设置行高一般使用em，而设置高度或者宽度则一般使用百分比。

      2）只有在可预知元素尺寸的情况下才使用绝对尺寸

      3）使用em设置字体大小：在使用em设置字体大小时应该避免设置超过两层的字体相对尺寸。CSS3中引入了rem单位，rem是相对于根元素的字体大小来计算的。