|
CSS用来定义网站的用户界面，并实现页面展现与内容的分离。CSS在几乎所有的网站都会用到，下面让我们花些精力来确保你的CSS书写的是否标准、合理。这些提示对CSS初学者同样会有很大的帮助。
- 样式表索引
样式表头部索引定义可以帮助你和其它人弄清楚该样式表文件的相关信息，它一般是一段格式化的CSS注释文本。
- 给出该css文件作者的相关信息
- 定义站点的布局（几栏，静态布局/动态布局）
- 记录文件版本号（利于多作者协作及将来更新）
样式表索引
- 命名锚点
命名锚点是用来规划整个CSS文件结构的（就好像书签一样），从而使整个CSS文件获得良好的组织。
命名锚点一般也是书写在样式表头部的索引注释中。CSS本身没有内部的锚点系统，所以我一般采用下面的小技巧来完成。在头部索引拷贝你想找到的锚点，并在整个文档中查找，从而获取该CSS节。（描述的可能不清晰，看下面图应该就明白了）
命名锚点定义及查找
- 避免多余Class定义
很多人（尤其是新手）在书写CSS中会定义不必要的Class来样式化一些元素。
其实CSS的一个优雅之处在于它的上下文选择符（即子选择器和相邻同胞选择器），如下：
避免多余Class定义
- 合适的命名
为class定义一个准确清晰的类名十分关键，它有助于你更好更快的理解CSS定义，不至于混淆。
合适的命名
- 缩写
在CSS中经常会利用缩写把多个相同类型的属性定义指定为一个。
CSS缩写会使CSS文档更加干净、简洁。下面是几个例子：
CSS缩写
- CSS图像拼合(即CSS Sprites技术)
CSS Sprites技术：将用到的所有背景图片合并为一张图片，使用css背景属性，来控制图片的显示位置和方式。
CSS Sprites技术的应用可以大大减少HTTP请求的次数，减轻服务器压力，同时缩短了悬停加载图片所需要的时间延迟，使效果更流畅，不会停顿。
苹果官方网站的菜单设计是CSS Sprites技术应用非常好的案例：
CSS Sprites
- 特殊性
即使在不太复杂的样式表中，也可能有两个或更多规则寻找同一元素，CSS通过选择符特殊性来决定规则的次序。
简而言之，每个CSS选择符都会分配一个权重。将规则的每个选择器的值加在一起，就可以计算出规则的特殊性。CSS特殊性的使用在大型CSS文件 |
