CSS撰写标准的有关提议

日期:2020-09-21 类型:科技新闻 

关键词:html网页制作,php网页制作,网页设计稿,网页编辑工具,学生网页设计模板

防止过多管束

做为1般标准,不加上无须要的管束。

CSS Code拷贝內容到剪贴板
  1. // 不尽人意   
  2. ul#someid {..}   
  3. .menu#otherid{..}   
  4.   
  5. // 好的   
  6. #someid {..}   
  7. #otherid {..}  

子孙后代挑选符最烂

不但特性不高并且编码很敏感,html编码和css编码比较严重藕合,html编码构造产生转变时,CSS也得改动,这是多么的不尽人意,非常是在大企业里,写html和css的常常并不是同1本人。

CSS Code拷贝內容到剪贴板
  1. // 烂透了   
  2. html div tr td {..}  

尽量应用复合型英语的语法

CSS Code拷贝內容到剪贴板
  1. // 不尽人意   
  2. .someclass {   
  3. padding-top20px;   
  4. padding-bottom20px;   
  5. padding-left10px;   
  6. padding-right10px;   
  7. background#000;   
  8. background-imageurl(../imgs/carrot.png);   
  9. background-positionbottombottom;   
  10. background-repeatrepeat-x;   
  11. }   
  12.   
  13. // 好的   
  14. .someclass {   
  15. padding20px 10px 20px 10px;   
  16. background#000 url(../imgs/carrot.png) repeat-x bottombottom;   
  17. }  

防止无须要的反复

CSS Code拷贝內容到剪贴板
  1. // 不尽人意   
  2. .someclass {   
  3. colorred;   
  4. backgroundblue;   
  5. font-size15px;   
  6. }   
  7.   
  8. .otherclass {   
  9. colorred;   
  10. backgroundblue;   
  11. font-size15px;   
  12. }   
  13.   
  14. // 好的   
  15. .someclass, .otherclass {   
  16. colorred;   
  17. backgroundblue;   
  18. font-size15px;   
  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. }  
上一篇:CSS3运用text 返回下一篇:没有了