编写可维护的CSS

篤往輒盡 ·

在HTML中使用语义化标签，避免多类症（添加过多的类）、多div症。 应该在没有现有元素能够实现区域分割时才使用div。例如：在使用导航列表时，无需div包裹。

<code class="html">
  <ul class="nav">
    <li><a href="#">首页</a></li>
    <li><a href="#">关于</a></li>
    <li><a href="#">联系我们</a></li>
  </ul>

为样式找到应用目标

2.1 常用选择器

  • 类型选择器：根据HTML元素标签选择
  • 后代选择器：在两个选择器之间插入空格表示
  • 通用选择器：匹配所有元素 *
  • ID选择器：# + id表示
  • Class选择器：. + class表示
  • 伪类选择器：根据其他条件对元素应用样式，:link``:visited``:hover``:focus``:active> IE6只支持锚点的:hover和:active选择器，IE7不支持:active和:focus
#nav li{
  /*应用你希望子元素具有的样式*/
}

#nav li *{
  /*覆盖子元素后代的样式*/
}

2.3 高级选择器

  • 子选择器 选择元素的直接后代 #nav>li> **hack:**IE7在HTML父子元素间有注释时出现BUG

IE6不支持子选择器，但可使用通用选择器模拟：

  • 相邻选择器 同一父元素下的相邻元素 h2 + p(与h2相邻的p元素)
  • 属性选择器 属性选择器可用于选择包含某属性的元素或某属性等于目标值的元素，当属性有多个值的使用空格隔开
a[alt]{
/*选择有alt属性的锚点*/
}
input[typy="botton"]{
/*选择type属性是botton的input*/
}
input[typy="botton radio"]{
/*选择type属性是botton和radio的input*/
}

2.3.3 选择器权重的计算

CSS的优先级是以下次序排列的：

  • !important
  • 行内样式
  • ID选择器
  • 类选择器
  • 伪类选择器

选择器权重计算公式 a = 行内样式权重值 = 1000 b = ID选择器权重值 = 100 c = 类、伪类选择器和属性选择器 = 10 d = 类型选择器、伪元素选择器 = 1 权重值 = a + bn + cn + d*n n为选择器个数

当在制作大型网站时，HTML元素会从很多地方获取样式，为避免过度混乱，请保持一般性样式非常一般，特殊样式尽可能特殊。 用类去标明页面类型，用ID标明特定页面。

2.3.4 继承

直接应用于元素的任何样式会覆盖继承而来的样式。

2.4 组织可维护样式表

2.4.1 引入外部样式文件

通过外部文件的方式引入样式表示较好的方式，它能分离DOM和样式，增强可维护性。 引入过多样式表文件会显著增加HTTP请求数量，降低加载页面速度，因此应该合理规划样式文件结构。

2.4.2 设计代码结构

为便于维护，应将样式表划分为几大块。把最一般的规则放在最前面（例如body），然后是其他全局样式（例如链接、标题等）。然后开始处理更特殊的样式和辅助样式，然后处理布局、导航等结构元素。最后是特定页面的组件的样式（例如dialog等）、覆盖和例外情况。

/* @group general style
------------------------------------*/


/* @group helper style
------------------------------------*/


/* @group page structure
------------------------------------*/


/* @group page components
------------------------------------*/


/* @group overrides
------------------------------------*/

2.4.2 注释与自我提示

合理的注释能够让后期维护变得更容易理解。当然注释会使文件显著增大，所以应该创建两个版本，一个是有合理注释的开发版，一个是经过GZIP或其他压缩工具压缩过的稳定版。 在复杂的项目中可通过注释来为自己创建一个自我提示的查询表，在开发完成时将其删除即可。