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

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

2023-10-23 215人已围观

简介 这篇文章主要介绍了全面总结CSS代码的编写规范及优化建议,从最基本的代码块格式到模块化再到性能优化,整理得相当详细,十分推荐!需要的朋友可以参考下

结构、样式、行为分离
尽量确保文档和模板只包含 HTML 结构，样式都放到样式表里，行为都放到脚本里。

缩进
统一两个空格缩进（总之缩进统一即可），不要使用 Tab 或者 Tab、空格混搭。

文件编码
使用不带 BOM 的 UTF-8 编码。

在 HTML 中指定编码；
无需使用@charset 指定样式表的编码，它默认为 UTF-8；
一律使用小写字母

CSS Code复制内容到剪贴板
  1.   
  2. src="google.png" alt="Google">   
  3.   
  4.   
  5. "/">Home   
  6. /* Recommended */  
  7. color: #e5e5e5;   
  8.   
  9. /* Not recommended */  
  10. color: #E5E5E5;  

省略外链资源 URL 协议部分
省略外链资源（图片及其它媒体资源）URL 中的 http / https 协议，使 URL 成为相对地址，避免 Mixed Content 问题，减小文件字节数。

其它协议（ftp 等）的 URL 不省略。

CSS Code复制内容到剪贴板
  1.   
  2. src="//www.google.com/js/gweb/analytics/autotrack.js">   
  3.   
  4.   
  5. src="http://www.google.com/js/gweb/analytics/autotrack.js">   
  6. /* Recommended */  
  7. .example {   
  8.   background: url(//www.google.com/images/example);   
  9. }   
  10.   
  11. /* Not recommended */  
  12. .example {   
  13.   background: url(http://www.google.com/images/example);   
  14. }  

CSS 注释

组件块和子组件块以及声明块之间使用一空行分隔，子组件块之间三空行分隔；

CSS Code复制内容到剪贴板
  1. /* ==========================================================================  
  2.    组件块  
  3.  ============================================================================ */  
  4.   
  5. /* 子组件块  
  6.  ============================================================================ */  
  7. .selector {   
  8.   padding: 15px;   
  9.   margin-bottom: 15px;   
  10. }   
  11.   
  12. /* 子组件块  
  13.  ============================================================================ */  
  14. .selector-secondary {   
  15.   display: block; /* 注释*/  
  16. }   
  17.   
  18. .selector-three {   
  19.   display: span;   
  20. }  


代码组织
以组件为单位组织代码段；
制定一致的注释规范；
组件块和子组件块以及声明块之间使用一空行分隔，子组件块之间三空行分隔；
如果使用了多个 CSS 文件，将其按照组件而非页面的形式分拆，因为页面会被重组，而组件只会被移动；
良好的注释是非常重要的。请留出时间来描述组件（component）的工作方式、局限性和构建它们的方法。不要让你的团队其它成员 来猜测一段不通用或不明显的代码的目的。

提示：通过配置编辑器，可以提供快捷键来输出一致认可的注释模式。

CSS Code复制内容到剪贴板
  1. /* ==========================================================================  
  2.    组件块  
  3.  ============================================================================ */  
  4.   
  5. /* 子组件块  
  6.  ============================================================================ */  
  7. .selector {   
  8.   padding: 15px;   
  9.   margin-bottom: 15px;   
  10. }   
  11.   
  12. /* 子组件块  
  13.  ============================================================================ */  
  14. .selector-secondary {   
  15.   display: block; /* 注释*/  
  16. }   
  17.   
  18. .selector-three {   
  19.   display: span;   
  20. }  

Class 和 ID

使用语义化、通用的命名方式；
使用连字符 - 作为 ID、Class 名称界定符，不要驼峰命名法和下划线；
避免选择器嵌套层级过多，尽量少于 3 级；
避免选择器和 Class、ID 叠加使用；
出于性能考量，在没有必要的情况下避免元素选择器叠加 Class、ID 使用。

元素选择器和 ID、Class 混合使用也违反关注分离原则。如果 HTML 标签修改了，就要再去修改 CSS 代码，不利于后期维护。

CSS Code复制内容到剪贴板
  1. /* Not recommended */  
  2. .red {}   
  3. .box_green {}   
  4. .page .header .login #username input {}   
  5. ul#example {}   
  6.   
  7. /* Recommended */  
  8. #nav {}   
  9. .box-video {}   
  10. #username input {}   
  11. #example {}  

声明块格式

选择器分组时，保持独立的选择器占用一行；
声明块的左括号 { 前添加一个空格；
声明块的右括号 } 应单独成行；
声明语句中的 : 后应添加一个空格；
声明语句应以分号 ; 结尾；
一般以逗号分隔的属性值，每个逗号后应添加一个空格；
rgb()、rgba()、hsl()、hsla()或 rect()括号内的值，逗号分隔，但逗号后不添加一个空格；
对于属性值或颜色参数，省略小于 1 的小数前面的 0 （例如，.5 代替 0.5；-.5px 代替 -0.5px）；
十六进制值应该全部小写和尽量简写，例如，#ff

上一篇：使用Div+CSS纯图片实现圆角矩形的方法小结css三种方法实现div在浏览器水平居中一个div在浏览器水平居中的实现方法div+CSS制作类似微信对话气泡效果的实例总结EXCEL表格中的#DIV/0!等符号怎么全部当计算?让DIV水平垂直居中的两种完美方法推荐学习DIV+CSS网页布局之混合布局学习DIV+CSS网页布局之三列布局学习DIV+CSS网页布局之两列布局学习DIV+CSS网页布局之一列布局使用div+CSS将页脚始终控制在页面最下方的方法

下一篇：非常漂亮的CSS3百叶窗焦点图动画纯CSS实现图片百叶窗展示效果示例

相关内容

点击排行

本栏推荐

猜你喜欢

-六神源码网