前端代码标准最佳实践：CSS

上一篇《前端代码标准最佳实践：javascript》发表后，大家讨论还是很热烈，从侧面体现了前端工程师对写标准的前端代码的重视程度很高。这些最佳标准实践并不是那个权威组织发布的，而是由大量的前端工程师们在实践过程中的经验总结，目的在于提高代码的可读性，可维护性和性能。那么接着上一篇，我们再来谈谈CSS代码的一些标准实践。

1，命名

和其他语言规范一样，css的命名也讲究命名要有意义，命名要尽可能短但是要足够表达含义；命名的词用连字符连接。

不规范的命名：

.btn.disabled,.btn[disabled] {  cursor: default;  background-color: #e6e6e6;  background-image: none;  opacity: 0.65;  filter: alpha(opacity=65);  -webkit-box-shadow: none;     -moz-box-shadow: none;          box-shadow: none;}.btn-large {  padding: 9px 14px;  font-size: 15px;  line-height: normal;  -webkit-border-radius: 5px;     -moz-border-radius: 5px;          border-radius: 5px;}.btn-large [class^="icon-"] {  margin-top: 1px;}.btn-small {  padding: 5px 9px;  font-size: 11px;  line-height: 16px;}.btn-small [class^="icon-"] {  margin-top: -1px;}.btn-mini {  padding: 2px 6px;  font-size: 11px;  line-height: 14px;}

另外再推荐一下bootstrap框架，在github中排名第一的前端框架，出自于twitter。

10，雪碧图(css sprite)

这项技术是将多张背景图合并为一张，然后通过设置不同的background-position属性来展示不同的背景。现在越来越多的网站采用这项技术，例如：亚马逊，苹果，Google, YouTube等，我们目前的项目MSB也部分使用了这些技术。其优点是减少http请求背景图的次数,降低服务器的压力，页面的背景图能同时出现，避免出现空白背景。缺点是不好维护，另外有试验的结果显示会稍微影响渲染的速度，因为要计算position，但是其优点大于缺点，尤其是网站的背景图多的时候。现在也有多个工具可以帮助我们自动合并背景图和生成相应的background-position。

http://spritegen.website-performance.org/

http://csssprites.com/

http://drupal.org/project/sprites

另外，如果你使用的是asp.net来开发网站，可以使用微软开源的一款工具，可以在运行时生成对应的css srite。

具体参考这里：GENERATE CSS SPRITES IN ASP.NET

以上就是我认为比较重要CSS标准实践，都是从整体来关注css的标准实践，其实css中细节的的一些最佳实践还有很多，需要具体问题需要具体讨论，目前各个工程师写的css代码多种多样，也比较混乱，也与css代码容易上手并且相同的效果实现方法有多种多样有关。不管语言的灵活性如何，养成一个良好的写代码习惯非常重要，这些需要在实践中不断总结和提高，希望这篇文章能给刚开始学习css的同行们提供一些帮助，在技术的提高过程中少走一些弯路。