CSS 样式集分析

  1. [selector]{
  2.     [property]:[value];
  3.     [<- Declaration ->]
  4. }
  6. [选择器]{
  7.     [属性]:[值];
  8.     [<- 声明 ->]
  9. }

编写 CSS 样式时，我习惯遵守这些规则：

  • class 名称以连字符（-）连接，除了下文提到的 BEM 命名法；
  • 缩进 4 空格；
  • 声明拆分成多行；
  • 声明以相关性顺序排列，而非字母顺序；
  • 有前缀的声明适当缩进，从而对齐其值；
  • 缩进样式集从而反映 DOM；
  • 保留最后一条声明结尾的分号。例如：
  1. .widget{
  2.     padding:10px;
  3.     border:1px solid #BADA55;
  4.     background-color:#C0FFEE;
  5.     -webkit-border-radius:4px;
  6.        -moz-border-radius:4px;
  7.             border-radius:4px;
  8. }
  9.     .widget-heading{
  10.         font-size:1.5rem;
  11.         line-height:1;
  12.         font-weight:bold;
  13.         color:#BADA55;
  14.         margin-right:-10px;
  15.         margin-left: -10px;
  16.         padding:0.25em;
  17.     }

我们可以发现，.widget-heading 是 .widget 的子元素，因为前者的样式集比后者多缩进了一级。这样通过缩进就可以让开发者在阅读代码时快速获取这样的重要信息。

我们还可以发现 .widget-heading 的声明是根据其相关性排列的：.widget-heading 是行间元素，所以我们先添加字体相关的样式声明，接下来是其它的。

以下是一个没有拆分成多行的例子：

  1. .t10    { width:10% }
  2. .t20    { width:20% }
  3. .t25    { width:25% }       /* 1/4 */
  4. .t30    { width:30% }
  5. .t33    { width:33.333% }   /* 1/3 */
  6. .t40    { width:40% }
  7. .t50    { width:50% }       /* 1/2 */
  8. .t60    { width:60% }
  9. .t66    { width:66.666% }   /* 2/3 */
  10. .t70    { width:70% }
  11. .t75    { width:75% }       /* 3/4*/
  12. .t80    { width:80% }
  13. .t90    { width:90% }

在这个例子（来自inuit.css’s table grid system）中，将 CSS 放在一行内可以使得代码更紧凑。