编写高质量的CSS

分层组织CSS

咱们应用CSS的能力应该分红两部分：一部分是CSS的API，重点是如何用CSS控制页面内元素的样式；另外一部分是CSS框架，重点是如何对CSS进行组织。

推荐一种组织CSS的方法：
base.css + common.css + page.css

base层：reset功能+通用类
common层：组件级别的CSS类
page层：页面级别CSS样式

模块化CSS——在页面中引入面向对象编程思想

如何划分模块？

• 模块化可让代码高度重用，显著提升开发效率。

• 咱们拿到设计稿的时候，首先能够从视觉上进行划分，样式和功能相对独立且稳定的一部分就能够视为模块。
  这里介绍两个拆分模块技巧：

  • 模块与模块之间尽可能不要包含相同的部分，若是有相同的部分，应将他们提取出来，拆分红一个独立的模块。

  • 模块应在保证尽量少的原则下，作到尽可能简单，以提升重用性。

CSS命名空间

这里推荐一种在class前加入前缀的方式构建相似于命名空间的概念. 举个例子：

<div class="box">
    <div class="box-hd"></div>
    <div class="box-bd"></div>
    <div class="box-ft"></div>
</div>

还需注意一点：css class的命名推荐使用英语，不要使用汉语拼音。

挂多个class仍是新建class? -- 多用组合，少用继承

举个例子，有两个列表，列表条目1字体14px红色,列表条目2字体16px绿色：
方案一:

<ul class="number-list1 f14 red">
    <li>1111</li>
    <li><2222/li>
    <li>3333</li>
</ul>  
<ul class="number-list2 f16 green">
    <li>1111</li>
    <li><2222/li>
    <li>3333</li>
</ul>

而后分别为number-list1与number-list2设置样式

方案二 :

<ul class="number-list1 f14 red">
    <li>1111</li>
    <li><2222/li>
    <li>3333</li>
</ul>  
<ul class="number-list2 f16 green">
    <li>1111</li>
    <li><2222/li>
    <li>3333</li>
</ul>

而后，将样式分解为颗粒度小的class内，利用类组合达到效果。这就是多用组合少用继承的思想。

如何处理上下margin

模块化写类的样式时，经常须要写margin样式。这个时候不建议给某个div同时设置margin-top, margin-bottom值。由于可能会带来上下margin重合的问题。

• 若是不肯定模块的上下margin特别稳定，最好不要将它写进模块的类里，而是使用类的组合，单独为上下margin挂上用于肯定边距的之类。

• 模块作好不要混用margin-top和margin-bottom，统一使用margin-top或margin-bottom。

低权重原则

复习一下CSS权重问题：
CSS的选择符是有权重的：id选择器的权重是100、class选择器的权重是十、标签选择器的权重是1；

• 当不一样选择符的样式设置有冲突时，会采用权重高的选择符设置的样式。

• 若是CSS选择符权重相同，那么样式会遵循就近原则，哪一个选择符最后定义，就采用哪一个。（就近原则指的是定义样式的前后，不是挂class名的前后）

咱们在设置样式时，适当使用子选择器，能够增长CSS的权重。例如：span .font{} 的样式会覆盖.font{}的样式。但CSS选择符的权重越高，样式越不容易覆盖。为了保证样式容易被覆盖，提升可维护性，CSS选择符需保证权重尽量低。

CSS sprite

什么是CSS sprite?

将网站的多张背景图合并到一张大图上，这即是CSS sprite.

CSS sprite 优势？

CSS sprite出发点已经不只是“解决滑过状态时背景图片出现空白”的问题了，经过将多张图片合并成一张大图，会大大减小网页的HTTP请求数，减少服务器压力。这对于流量比较大的网站颇有价值。

哪些场合不适合使用CSS sprite?

• CSS sprite只能合并用于背景的图片，对于<img src=“”> 设置的图片，是不能合并到css sprite大图中的。若是合并这些图片会影响页面的可读性。

• 对于横向和纵向都平铺的图片也不能使用CSS sprite.

这里扩展一个问题: 咱们在写页面时，对于图片，是使用img标签好呢？仍是使用background-img属性好呢？

如下对两者进行一个对比总结：

1. 本质区别：img标签是html标签，background-img是CSS的一个样式；

2. 加载方面：img标签是html结构的一部分，img 会在加载结构时进行加载，而background-img会在结构和内容加载完成后才开始加载；

3. SEO方面：搜索引擎会关注img标签的alt属性；这时若是使用了background-img则页面可读性比较差；另外，有些网站须要在禁用css状况下运行，此时比较重要的图片例如logo，就须要使用img标签而不是background-img.

4. 在多数场景下，两者都能完成工做。好比hover切换图片，能够改变img的src属性，也能够改变background-img的url; 好比改变图片的位置，能够改变img元素的位置，也能够改变background-img的postion;

CSS sprite有哪些缺点？

CSS sprite将多张图片合并为一张图片，经过控制background-position进行定位，这对于图片的位置精确程度要求很是高。定位完成后，大图中的每一个小图的坐标值不可轻易改动，这在必定程度上下降了可维护性。

所以，如何排列图片可以尽可能紧凑，同时保证不会影响扩展性，是CSS sprite技术最困难也是最具挑战性的地方。

以上，从分层组织CSS，模块化CSS，使用时注意低权重原则，以及巧用CSS雪碧图阐述了提升CSS代码质量的四个方面。更多方法还需在实践中积累。

References

[1].编写高质量代码-Web前端开发修炼之道 -- 曹刘阳.