CSS编写规范的相关建议

ttx9n

这篇文章主要介绍了CSS编写规范的相关建议,编码倾向有助于后期debug等工作的进行,需要的朋友可以参考下

避免过度约束

作为一般规则，不添加不必要的约束。

CSS Code复制内容到剪贴板

1. // 糟糕   
2. ul#someid {..}   
3. .menu#otherid{..}   
4.   
5. // 好的   
6. #someid {..}   
7. #otherid {..}  

后代选择符最烂

不仅性能低下而且代码很脆弱，html代码和css代码严重耦合，html代码结构发生变化时，CSS也得修改，这是多么糟糕，特别是在大公司里，写html和css的往往不是同一个人。

CSS Code复制内容到剪贴板

1. // 烂透了   
2. html div tr td {..}  

尽可能使用复合语法

CSS Code复制内容到剪贴板

1. // 糟糕   
2. .someclass {   
3. padding-top: 20px;   
4. padding-bottom: 20px;   
5. padding-left: 10px;   
6. padding-right: 10px;   
7. background: #000;   
8. background-image: url(../imgs/carrot.png);   
9. background-position: bottombottom;   
10. background-repeat: repeat-x;   
11. }   
12.   
13. // 好的   
14. .someclass {   
15. padding: 20px 10px 20px 10px;   
16. background: #000 url(../imgs/carrot.png) repeat-x bottombottom;   
17. }  

避免不必要的重复

CSS Code复制内容到剪贴板

1. // 糟糕   
2. .someclass {   
3. color: red;   
4. background: blue;   
5. font-size: 15px;   
6. }   
7.   
8. .otherclass {   
9. color: red;   
10. background: blue;   
11. font-size: 15px;   
12. }   
13.   
14. // 好的   
15. .someclass, .otherclass {   
16. color: red;   
17. background: blue;   
18. font-size: 15px;   
19. }  

组织好的代码格式

代码的易读性和易维护性成正比。下面是我遵循的格式化方法。

CSS Code复制内容到剪贴板

1. // 糟糕   
2. .someclass-a, .someclass-b, .someclass-c, .someclass-d {   
3. ...   
4. }   
5.   
6. // 好的   
7. .someclass-a,   
8. .someclass-b,   
9. .someclass-c,   
10. .someclass-d {   
11. ...   
12. }   
13.   
14. // 好的做法   
15. .someclass {   
16.     background-image:   
17.         linear-gradient(#000, #ccc),   
18.         linear-gradient(#ccc, #ddd);   
19.     box-shadow:   
20.         2px 2px 2px #000,   
21.         1px 4px 1px 1px #ddd inset;   
22. }  

qzdhcgs

很不错的样子

70r45_zs

有什么好的服务器

kestlhoxn

加快速度很快就撒谎

kwa3hgmjp

源码源码源码源码源码源码源码源码源码源码源码源码源码

3t0ukmu

这个源码不错啊

ppwxcg

啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦

6q8s6p21

收下来看看怎么样

gyalp

抽根烟，下来看看再说

360784533

好人好人好人好人