CSS书写标准及最佳实践

CSS用来定义网站的用户界面，并实现页面展现与内容的分离。CSS在几乎所有的网站都会用到，下面让我们花些精力来确保你的CSS书写的是否标准、合理。这些提示对CSS初学者同样会有很大的帮助。

1. 样式表索引样式表头部索引定义可以帮助你和其它人弄清楚该样式表文件的相关信息，它一般是一段格式化的CSS注释文本。
   
   • 给出该css文件作者的相关信息
   • 定义站点的布局（几栏，静态布局/动态布局）
   • 记录文件版本号（利于多作者协作及将来更新）
   

   样式表索引

2. 命名锚点命名锚点是用来规划整个CSS文件结构的（就好像书签一样），从而使整个CSS文件获得良好的组织。
   

   命名锚点一般也是书写在样式表头部的索引注释中。CSS本身没有内部的锚点系统，所以我一般采用下面的小技巧来完成。在头部索引拷贝你想找到的锚点，并在整个文档中查找，从而获取该CSS节。（描述的可能不清晰，看下面图应该就明白了）

   

   命名锚点定义及查找

3. 避免多余Class定义很多人（尤其是新手）在书写CSS中会定义不必要的Class来样式化一些元素。
   

   其实CSS的一个优雅之处在于它的上下文选择符（即子选择器和相邻同胞选择器），如下：

   

   避免多余Class定义

4. 合适的命名为class定义一个准确清晰的类名十分关键，它有助于你更好更快的理解CSS定义，不至于混淆。
   
   

   合适的命名

5. 缩写在CSS中经常会利用缩写把多个相同类型的属性定义指定为一个。
   

   CSS缩写会使CSS文档更加干净、简洁。下面是几个例子：

   

   CSS缩写

6. CSS图像拼合(即CSS Sprites技术)CSS Sprites技术：将用到的所有背景图片合并为一张图片，使用css背景属性，来控制图片的显示位置和方式。
   

   CSS Sprites技术的应用可以大大减少HTTP请求的次数，减轻服务器压力，同时缩短了悬停加载图片所需要的时间延迟，使效果更流畅，不会停顿。

   苹果官方网站的菜单设计是CSS Sprites技术应用非常好的案例：

   

   CSS Sprites

7. 特殊性即使在不太复杂的样式表中，也可能有两个或更多规则寻找同一元素，CSS通过选择符特殊性来决定规则的次序。
   

   简而言之，每个CSS选择符都会分配一个权重。将规则的每个选择器的值加在一起，就可以计算出规则的特殊性。CSS特殊性的使用在大型CSS文件中会很有帮助。

   CSS特殊性在CSS中是比较大的一块内容，很难用几句话描述清楚，下面是几个示例：

   

   CSS 特殊性

8. CSS Reset(CSS重置，偶个人叫它CSS初始化)CSS Reset用于确保网站在不同浏览器中能够获得相同的展示效果。不同的浏览器有一套自己的初始默认设置，最终导致不同的UI展现。CSS重置就是用来解决这个问题，使你能在不同浏览器展现一致的基础上构建站点。
   

   我们可能不会要求你一定去使用某个CSS框架，但是希望能书写CSS Reset。我们可以在网上找到不少书写好的CSS Reset样例。

   

   CSS Reset

9. CSS Hacks可以说再完美的CSS也无法在所有浏览器中获得一致的展现，这是因为不同的浏览器给予你的CSS不同的解释。如果想要网站在不同的浏览器显示一致，你不得不使用CSS Hacks。
   
   

   CSS Hacks

   不过使用CSS Hack往往会导致CSS验证出现错误，一个替代的解决方案是为不同的浏览器书写不同的CSS，然后在html中使用条件语句引用它们。

10. CSS验证当你书写完一个CSS文件，对它进行验证是十分必要的。它可以确保书写的CSS没有错误，并且在所有浏览器中正确的展示。
    

    W3C网站验证是用来验证CSS的常用工具。