您现在的位置是：网站首页> 编程资料编程资料

CSS代码书写规范究极指南编写灵活、稳定、高质量的HTML和css代码规范指南全面总结CSS代码的编写规范及优化建议css代码缩写 div+css布局代码简写规范19楼论坛的前端CSS代码规范介绍让样式表CSS代码更加专业规范闭合浮动元素让CSS代码更规范-CSS教程-网页制作-网页教学网分享20条编写 CSS 代码的建议

2021-09-05 1701人已围观

简介 这里为大家送上一份CSS代码书写规范究极指南,包括代码注释和命名规范以及空格缩进等一应俱全,都来自大家平时的约定俗成,绝对值得学习借鉴,需要的朋友可以参考下

1.格式化代码
1.1文件
[建议]：CSS文件使用无BOM的UTF-8编码
1.2缩进
[强制]：使用 4 个空格做为一个缩进层级，不允许使用 2 个空格 或 tab 字符。

CSS Code复制内容到剪贴板
  1. .selector {   
  2.     margin: 0;   
  3.     padding: 0;   
  4. }  

1.3空格
[强制]：选择器 与 { 之间必须包含空格。

CSS Code复制内容到剪贴板
  1. .selector {   
  2. }  

[强制]：选择器 与 { 之间必须包含空格。

CSS Code复制内容到剪贴板
  1. margin: 0;  

[强制]：列表性属性书在单行时，,后必须跟一个空格

CSS Code复制内容到剪贴板
  1. font-family: Aria, sans-serif;  

1.4行长度
[强制]： 每行不得超过 120 个字符，除非单行不可分割。
[建议]： 对于超长的样式，在样式值的 空格 处或 , 后换行，建议按逻辑分组。

CSS Code复制内容到剪贴板
  1. /* 不同属性值按逻辑分组 */  
  2. background:   
  3.     transparent url(aVeryVeryVeryLongUrlIsPlacedHere)   
  4.     no-repeat 0 0;   
  5. /* 可重复多次的属性，每次重复一行 */  
  6. background-image:   
  7.     url(aVeryVeryVeryLongUrlIsPlacedHere)   
  8.     url(anotherVeryVeryVeryLongUrlIsPlacedHere);   
  9. /* 类似函数的属性值可以根据函数调用的缩进进行 */  
  10. background-image: -webkit-gradient(   
  11.     linear,   
  12.     left bottombottom,   
  13.     left top,   
  14.     color-stop(0.04, rgb(88,94,124)),   
  15.     color-stop(0.52, rgb(115,123,162))   
  16. );  

1.5选择器
[强制]：当一个 rule 包含多个 selector 时，每个选择器声明必须独占一行。

CSS Code复制内容到剪贴板
  1. /* good */  
  2. .post,   
  3. .page,   
  4. .comment {   
  5.     line-height: 1.5;   
  6. }   
  7. /* bad */  
  8. .post, .page, .comment {   
  9.     line-height: 1.5;   
  10. }  

[强制]： >、+、~ 选择器的两边各保留一个空格。
示例：

CSS Code复制内容到剪贴板
  1. /* good */  
  2. main > nav {   
  3.     padding: 10px;   
  4. }   
  5. label + input {   
  6.     margin-left: 5px;   
  7. }   
  8. input:checked ~ button {   
  9.     background-color: #69C;   
  10. }   
  11. /* bad */  
  12. main>nav {   
  13.     padding: 10px;   
  14. }   
  15. label+input {   
  16.     margin-left: 5px;   
  17. }   
  18. input:checked~button {   
  19.     background-color: #69C;   
  20. }  

[强制] 属性选择器中的值必须用双引号包围。

CSS Code复制内容到剪贴板
  1. css   
  2. /* good */  
  3. article[character="juliet"] {   
  4.     voice-family: "Vivien Leigh", victoria, female   
  5. }   
  6. /* bad */  
  7. article[character='juliet'] {   
  8.     voice-family: "Vivien Leigh", victoria, female   
  9. }  

2.选择器与属性缩写
2.1选择器
[强制] 如无必要，不得为 id、class 选择器添加类型选择器进行限定。
解释：在性能和维护性上，都有一定的影响。
示例：
css

CSS Code复制内容到剪贴板
  1. /* good */  
  2. #error,   
  3. .danger-message {   
  4.     font-color: #c00;   
  5. }   
  6. /* bad */  
  7. dialog#error,   
  8. p.danger-message {   
  9.     font-color: #c00;   
  10. }  

[建议] 选择器的嵌套层级应不大于 3 级，位置靠后的限定条件应尽可能精确。
示例：

CSS Code复制内容到剪贴板
  1. /* good */  
  2. #username input {}   
  3. .comment .avatar {}   
  4. /* bad */  
  5. .page .header .login #username input {}   
  6. .comment div * {}  

2.2 属性缩写
[建议] 在可以使用缩写的情况下，尽量使用属性缩写。
示例：

CSS Code复制内容到剪贴板
  1. /* good */  
  2. .post {   
  3.     font: 12px/1.5 arial, sans-serif;   
  4. }   
  5. /* bad */  
  6. .post {   
  7.     font-family: arial, sans-serif;   
  8.     font-size: 12px;   
  9.     line-height: 1.5;   
  10. }  

[建议] 使用 border / margin / padding 等缩写时，应注意隐含值对实际数值的影响，确实需要设置多个方向的值时才使用缩写。
解释：border / margin / padding 等缩写会同时设置多个属性的值，容易覆盖不需要覆盖的设定。如某些方向需要继承其他声明的值，则应该分开设置。
示例：

CSS Code复制内容到剪贴板
  1. /* centering  horizontally and highlight featured ones */  
  2. article {   
  3.     margin: 5px;   
  4.     border: 1px solid #999;   
  5. }   
  6. /* good */  
  7. .page {   
  8.     margin-right: auto;   
  9.     margin-left: auto;   
  10. }   
  11. .featured {   
  12.     border-color: #69c;   
  13. }   
  14. /* bad */  
  15. .page {   
  16.     margin: 5px auto; /* introducing redundancy */  
  17. }   
  18. .featured {   
  19.     border: 1px solid #69c; /* introducing redundancy */  
  20. }  

2.3 每个规则集之间保留一个空行

相关内容

点击排行

本栏推荐

猜你喜欢

-六神源码网