关于CSS文件组织和书写规范、顺序
2016-03-07 | heke

这些天企业导师review到我的css代码时发现了很多细节性的问题，书写规范和书写顺序都有一些问题影响了代码的阅读体验，之后看了很多代码规范的文章，这里就总结一下这些经验，也总结下学习boostrap 组织样式文件的思路和方法。

CSS书写顺序

  1. 位置属性(position, top, right, z-index, display, float等)
  2. 大小(width, height, padding, margin)
  3. 文字系列(font, line-height, letter-spacing, color- text-align等)
  4. 背景(background, border等)
  5. 其他(animation, transition等)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
.declaration-order {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 100;
display: block;
float: right;

width: 100px;
height: 100px;

font: normal 13px "Helvetica Neue", sans-serif;
line-height: 1.5;
color: #333;
text-align: center;

background-color: #f5f5f5;
border: 1px solid #e5e5e5;
border-radius: 3px;

opacity: 1;
}
}

CSS书写规范

关于书写规范，网上有太多这样的文章来写这些东西，我推荐一个写的比较好的规范，里面也涵盖了html的规范：[编码规范]（http://codeguide.bootcss.com/）

CSS代码组织

之前写毕设的时候学习了下LESS，于是也去看了看bootstrap的less源码,觉得在代码组织这一块还是有很多地方值得学习的：

  1. 以组件为单位组织代码段。
  2. 制定一致的注释规范。
  3. 使用一致的空白符将代码分隔成块，这样利于扫描较大的文档。
  4. 如果使用了多个 CSS 文件，将其按照组件而非页面的形式分拆，因为页面会被重组，而组件只会被移动。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
//就像这样使用一个master.less文件来管理所有需要的代码，然后根据各自的功能用注释分开，在每个less文件中写好各自的部分（如变量就写变量）
// Core variables and mixins
@import "variables.less";
@import "mixins.less";

// Reset and dependencies
@import "normalize.less";
@import "print.less";
@import "glyphicons.less";

// Core CSS
@import "scaffolding.less";
@import "type.less";
@import "code.less";
@import "grid.less";
@import "tables.less";
@import "forms.less";
@import "buttons.less";

// Components
@import "component-animations.less";
@import "dropdowns.less";
@import "button-groups.less";
@import "input-groups.less";
@import "navs.less";