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

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

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

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

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

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

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

CSS 注释

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

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

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

Class 和 ID

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

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

声明块格式

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

声明顺序

相关属性应为一组，推荐的样式编写顺序

Positioning
Box model
Typographic
Visual
由于定位（positioning）可以从正常的文档流中移除元素，并且还能覆盖盒模型（box model）相关的样式，因此排在首位。盒模型决定了组件的尺寸和位置，因此排在第二位。

其他属性只是影响组件的内部（inside）或者是不影响前两组属性，因此排在后面。