我的css样式写法总结

CSS入门很简单，规则不多，写法也比较灵活，因此也带来了很多有创意的写法。跟IE一样，很好的容错性，像《 边框样式写法总结 》所说的border的写法。不过在带来方便的同时，也让开发者丢掉了程序员应有的“严谨”。可能觉得这跟样式的关系不大，没有像脚本那么严重，这是认识上的问题，抛开样式跟脚本所作用的对象不同，样式的写法在一定程度上就是一种编程，只不过少了那些被认为是程序特点的条件判断、定义变量等等。

我一直不太赞同规范死样式的写法，我的观点是使用自己熟悉的方式效率是最高的，简单的说就是让合作者尽可能的以自己熟悉的方式写代码，这种模式是我一直在探索的，不过在实际项目中，实现起来有一定的难度，因为存在合作和维护的问题。说回样式写法的问题，这里只是因为前段时间组里在讨论，所以借此机会把自己的一些写法总结一下。

/*=S 例子 */.class-a2,.class-a4,.class-b1,.class-b2,.class-c1,class-c3{width:100px;height:100px;margin-left:2em;padding:10px;}.class-e1,.class-e2,.class-e3,.class-e4{width:60px;height:60px;}/*=E 例子 */

主要有以下几点：

1. 选择符以《 样式命名规则 》中的方式命名。

2. 选择符以类型分，同类放一起，类的定义顺序以HTML中实际的顺序为参考，以方便查找为主。

3. 删除不必要的空白（空格或tab）。

4. 属性以《 样式书写顺序 》中的顺序书写，一个属性定义为一行，最后一个定义保留分号。

5. 注释以《 注释书写规范 》中的规范书写。

简单解释下：

1. 命名的重要相信大家都清楚了，好的名称应该是可以“自解释”的。

2. 我习惯用文本编辑器写样式，分类可以方便查找和分享。

3. 有些留白并不是必须，像属性前面的空白、分号后的空白等等，如“ width : 100px; ”，一个定义多了4～5个字节，最主要的是很多时候我们并不一定会使用压缩工具。

4. 以一定的顺序写有利于查找，当然你可以用首字母排序，只是我考虑了那几乎可被忽略的性能问题。一个属性定义为一行，也是为了方便查找、使用工具对比。虽然最后一个定义的分号可以去掉，不过很容易在维护时导致很多不必要的麻烦。

5. 统一的注释可以减少误会、节省沟通成本，也可以方便查找。

希望对还没形成自己样式书写风格的同学有所帮助，如果有更好的想法，欢迎一起讨论。