Bootstrap CSS 编码规范之属性声明顺序

声明顺序

相关的属性声明应当归为一组，并按照下面的顺序排列：

1. Positioning
2. Box model
3. Typographic
4. Visual

由于定位（positioning）可以从正常的文档流中移除元素，并且还能覆盖盒模型（box model）相关的样式，因此排在首位。盒模型排在第二位，因为它决定了组件的尺寸和位置。其他属性只是影响组件的内部（inside）或者是不影响前两组属性，因此排在后面。

1. .declaration-order {
2.   /* Positioning */
3.   position: absolute;
4.   top: 0;
5.   right: 0;
6.   bottom: 0;
7.   left: 0;
8.   z-index: 100;
10.   /* Box-model */
11.   display: block;
12.   float: right;
13.   width: 100px;
14.   height: 100px;
16.   /* Typography */
17.   font: normal 13px "Helvetica Neue", sans-serif;
18.   line-height: 1.5;
19.   color: #333;
20.   text-align: center;
22.   /* Visual */
23.   background-color: #f5f5f5;
24.   border: 1px solid #e5e5e5;
25.   border-radius: 3px;
27.   /* Misc */
28.   opacity: 1;
29. }

    关于作者

    歪脖先生，十五年以上软件开发经验，酷爱Web开发，精通 HTML、CSS、JavaScript、jQuery、JSON、Python、Less、Bootstrap等，著有《HTML宝典》、《揭秘CSS》、《Less简明教程》、《JSON教程》、《Bootstrap2用户指南》、《Bootstrap3实用教程》，并全部在 GitHub 上开源。