- 代码组织
- 以组件为单位组织代码段；
- 制定一致的注释规范；
- 组件块和子组件块以及声明块之间使用一个空行分割，子组件块之间使用三个空行分割；
- 如果有多个CSS文件，应当按照组件形式而不是按照页面形式来拆分。因为页面可能会被重组，而组件只会被移动；
注释
在写代码之前，要规划好组件的工作方式，局限性和构造他们的方法。具体见基本规则。class和id
- 使用语义化、通用的方式命名；
- 使用
连字符命名class和id，不要使用驼峰命名和下划线； - 避免嵌套层级太多，最好
不要超过3层； - 避免选择器和class，id叠加使用；
出于性能考量，在没有必要的情况下避免元素选择器叠加Class、ID 使用。
元素选择器和ID、Class混合使用也违反关注分离原则。如果 HTML 标签修改了，就要再去修改 CSS 代码，不利于后期维护。
/* 错误示范 */
.red {}
.box_green {}
.page .header .login #username input {}
ul#example {}
/* 正确示范 */
#nav {}
.box-video {}
#username input {}
#example {}
声明块的格式
- 选择分组时，保持独立的选择器占用一行；
- 声明块的左括号
{前面加一个空格； - 声明块的右括号
}应当单独成一行； - 声明句的冒号
:后面应当加一个空格； - 声明句以分号
;结尾； - 以逗号
,分隔的属性值，每个逗号后应添加一个空格； - rgb()、rgba()、hsl()、hsla()或 rect()括号内的值，逗号分隔，但逗号后不添加一个空格；
- 对于属性值或颜色参数，省略小于1的小数前面的0（例如，.5 代替 0.5；-.5px 代替 -0.5px）；
- 十六进制值应该全部小写和尽量简写，例如，#fff 代替 #ffffff；
- 避免为 0 值指定单位，例如，用
margin: 0;代替margin: 0px;；
/* 错误示范 */
.selector, .selector-secondary, .selector[type=text] {
padding:15px;
margin:0px 0px 15px;
background-color:rgba(0, 0, 0, 0.5);
box-shadow:0px 1px 2px #CCC,inset 0 1px 0 #FFFFFF
}
/* 正确示范 独立的选择器 */
.selector,
.selector-secondary,
.selector[type="text"] {
padding: 15px;
margin-bottom: 15px;
background-color: rgba(0,0,0,.5);
box-shadow: 0 1px 2px #ccc, inset 0 1px 0 #fff;
}
- 当使用特定浏览器带有前缀的属性时，通过缩进的方式，让每个属性的值在垂直方向对齐，这样便于多行编辑。
.selector { -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.15); box-shadow: 0 1px 2px rgba(0,0,0,.15); }
属性的声明顺序
- Positioning
- Box Model
- Typographic
- Visual
制定此顺序的原因：
定位（positioning）可以从正常的文档流中移除元素，还能够覆盖正常的盒模型（box model）的相关样式，因此排在首位。盒模型决定了组件的尺寸和位置，因此排在第二位。其他属性只是影响组件的内部（inside）或者是不影响前两组属性，因此排在后面。
/* 正确示范 */
.declaration-order {
/* Positioning */
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 100;
/* Box model */
display: block;
box-sizing: border-box;
width: 100px;
height: 100px;
padding: 10px;
border: 1px solid #e5e5e5;
border-radius: 3px;
margin: 10px;
float: right;
overflow: hidden;
/* Typographic */
font: normal 13px "Helvetica Neue", sans-serif;
line-height: 1.5;
text-align: center;
/* Visual */
background-color: #f5f5f5;
color: #fff;
opacity: .8;
/* Other */
cursor: pointer;
}
- 引号的使用
url()，属性选择符，属性值使用双引号。
/* 错误示范 */
@import url(//www.google.com/css/maia.css);
html {
font-family: 'open sans', arial, sans-serif;
}
/* 正确示范 */
@import url("//www.google.com/css/maia.css");
html {
font-family: "open sans", arial, sans-serif;
}
.selector[type="text"] {
}
- 媒体查询（media Query）的位置
- 将媒体查询放在尽可能相关规则的附近，
- 不要将他们打包放在单独的文件或者文件的底部
.element { ... }
.element-avatar { ... }
.element-selected { ... }
@media (max-width: 768px) {
.element { ...}
.element-avatar { ... }
.element-selected { ... }
}
- 关于
@import和link
不用@import，因为他很慢，不但增加了额外的请求数，还会导致不可预料的问题
解决方法：
- 使用多个 元素；
- 通过 Sass 或 Less 类似的 CSS 预处理器将多个 CSS 文件编译为一个文件；
- 其他 CSS 文件合并工具；
链接样式的顺序
a:link -> a:visited -> a:hover -> a:active
- 组件
从 Components 的角度思考，将网站的模块都作为一个独立的 Components
。
- 组件命名
组件至少使用两个单词命名
- 点赞（.like-button）
- 搜索框（.search-form）
!!! 以上规则仅供参考