[原]我的样式写法总结
Ghost 发表于 [2008-12-30 22:07]
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 例子 */
主要有以下几点：
- 选择符以《 样式命名规则 》中的方式命名。
- 选择符以类型分，同类放一起，类的定义顺序以HTML中实际的顺序为参考，以方便查找为主。
- 删除不必要的空白（空格或tab）。
- 属性以《 样式书写顺序 》中的顺序书写，一个属性定义为一行，最后一个定义保留分号。
- 注释以《 注释书写规范 》中的规范书写。
简单解释下：
- 命名的重要相信大家都清楚了，好的名称应该是可以“自解释”的。
- 我习惯用文本编辑器写样式，分类可以方便查找和分享。
- 有些留白并不是必须，像属性前面的空白、分号后的空白等等，如“ width : 100px; ”，一个定义多了4～5个字节，最主要的是很多时候我们并不一定会使用压缩工具。
- 以一定的顺序写有利于查找，当然你可以用首字母排序，只是我考虑了那几乎可被忽略的性能问题。一个属性定义为一行，也是为了方便查找、使用工具对比。虽然最后一个定义的分号可以去掉，不过很容易在维护时导致很多不必要的麻烦。
- 统一的注释可以减少误会、节省沟通成本，也可以方便查找。
希望对还没形成自己样式书写风格的同学有所帮助，如果有更好的想法，欢迎一起讨论。
文章地址：http://www.cssforest.org/blog/index.php?id=124
《[原]我的样式写法总结》采用的授权是创作共用的 “署名-非商业性使用-相同方式共享 3.0 通用许可”.
文章被分类到：CSS
阿肆 在 577 日 之前 说：
先来抢个鬼哥的沙发，现在有实验报告和课程设计需要赶，明天来学习
Robin 在 577 日 之前 说：
非常感谢鬼能将这些宝贵的经验分享出来。我们的样式书写格式是：样式定义加tab缩进（我想直接写代码，可是不会用textile语法呀，而且哪个帮助貌似坏了），这样可以和选择器在视觉上更好的区分。其实总是要在代码的可读性和性能之间做权衡。我总是希望能够有一个发布版本（压缩过的），开发版本（未压缩，高可读性）。但是在实际工作中还是困难不少。毕竟产品的发布和前端代码开发不是一个部门在执行。况且遇到修改频繁的项目那就疯了。
新版的DW cs4支持的样式导航，看似一个很方便的功能，其实又是一个给开发者惯坏毛病的东西，很多东西都是双刃剑，就看你怎么去用了。
weilaixu 在 577 日 之前 说：
我想看语义化相关文章，鬼～～～～
sod 在 577 日 之前 说：
瞎扯的經驗。。
蚂蚁线 在 577 日 之前 说：
写样式我还是喜欢一个样式所有属性都放在一行，在加上点简单的注释，基本上自己以后修改起来，不用在拉来拉去找都找不到了！
Ghost 在 577 日 之前 说：
@Robin 不好意思，已经更新了帮助的链接。我以前也是样式定义加tab缩进，后来把这个tab去掉，只是视觉上一时习惯不了，现在看起来也不会觉得有什么不方便的，保留最后面一个“}”单独占一行，也是为了区分两个定义。
Ghost 在 577 日 之前 说：
@sod 没错，经验是有环境的，没有类似的环境，经验就是瞎扯。
@蚂蚁线 我说了“不太赞同规范死样式的写法”，你喜欢怎么写就怎么写。希望你有机会能参与一些团队合作的项目。
unicac 在 577 日 之前 说：
以前我也是喜欢鬼这样的写法，后面因为换了个编辑器，就很少按TAB键了！都是横着写！就像鬼说的视觉上不习惯，不过久而久之也就没什么了！哈哈！
linxz 在 577 日 之前 说：
一个人的经验不是任何人任何环境下都合适的。
上面有朋友说这个是瞎扯的经验，虽然我否认，但我也不会肯定你的说法。我们更应该的是从别人的经验中吸取经验结合自己的实际情况来操作。
经验说白了，别人能说，但你不一定会用；你会用但不一定你所处的环境合适你用。
留名，走人！
爱左看右 在 577 日 之前 说：
看看精华,左耳听听上面的侃侃,右耳把一些过滤掉 – -
Acheng 在 577 日 之前 说：
留名，总之自己写着怎么顺手就OK~··
以前就直接换行写~·现在老喜欢tab~··GOD！
DeadFire 在 577 日 之前 说：
象这种的，为什么要写成四个呢
.class-e1,.class-e2,.class-e3,.class-e4{
width:60px;
height:60px;
}
如果需要控制不同的为啥不用拼合class的方式呢，class=“a1 e2“这种的，是这种方式有那些不方便的原因么?
NetPuter 在 576 日 之前 说：
个人比较喜欢 #container{width:960px;}
这样的格式.
zen 在 571 日 之前 说：
顺手就好了
YUAN 在 547 日 之前 说：
说得有道理
特别是编写的顺序
Sam 在 499 日 之前 说：
想问一下 我是css的初学者，目前市面上的css书很多很繁杂，请问那一本比较好呢？
Ghost 在 499 日 之前 说：
@Sam 我不怎么看书，所以不是很清楚。不过我相信每本书都有作者的一些想法、思维，只要用心去看，多少都可以学到点东西。
cysh 在 381 日 之前 说：
问个语义化的问题
比如： #header{}
#hader .loginbar{}
#hader .loginbar .input-ps{}
细化到“用户名”,“账号“，“登陆“等等….
这些小块的控制如何语义化。感觉越划分到越细节，很难语义啊，有时候感觉没词了。
怎么解决这种问题？
Ghost 在 378 日 之前 说：
@cysh 模块化在一定程度上也可以减少命名的数量，让一些名称可以重复的使用。比如不同模块的标题可以使用同一个类名，然后通过模块名去定义不同的样式。
cysh 在 378 日 之前 说：
谢谢Ghost的回答。
可能我的问题解释不够详细，
接着上面的范例：
如： #header{}
#header .loginbar{}
#header .loginbar .input-ps{}
下一部分应该为几个输入注释和输入框做样式定义：
.name{}/*——-账号文字框——-*/
.nameInput{}/*——-账号输入文字框——-*/
.password{}/*——-密码文字框——-*/
.passwordInput{}/*——-账号输入文字框——-*/
.codeVerification{}/*——-验证码文字框——-*/
.codeVerificationInput{}/*——-验证码输入文字框——-*/
.loginBtn{}/*——-登陆按钮框——-*/
.regsiter{}/*——-注册 文字框——-*/
我把我的定义习惯写了一下，感觉太死板，这样写下去一定没词！！但是又不知道真才能跟为灵活，希望Ghost帮我指正，这个范例你是怎么命的可以写一遍吗？耽误你时间啦~~谢谢！
Ghost 在 377 日 之前 说：
@ cysh 感觉你的问题是想把每个可定义的部分都要写一个独立的名称，虽然可以很方便的定义样式，可是不能发挥出CSS的灵活性。也许这两篇文章结合看下能解决你的问题：《 样式命名规则 》、《 从宜家的家具设计讲模块化 》
cyhs 在 372 日 之前 说：
看了下收益了，！谢谢。
leeo 在 261 日 之前 说：
3.删除不必要的空白（空格或tab）。
我个人还是比较喜欢在属性名前缩进4字符，在属性值前留1空格。
仇辉 在 58 日 之前 说：
当一个网站需要多个样式表的时候如果把同一类型放一起（也就是说它们肯定在一个样式表里）这样的话可能会导致我的一个页面只需要这个样式表中的一个样式，那么我引用了这个样式表，会不会导致浏览器读取过多不必要的样式呢？