CSS的一些编程规范总结

2020-05-07 06:00:50易采站长站整理

XML/HTML Code复制内容到剪贴板

<th class="is-sortable  js-is-sortable">  
</th>  

  上面的这个标记有两个 class,你可以用其中一个来给这个可排序的表格栏添加样式,用另一个添加排序功能。
  I18n

  虽然我(该 CSS Guideline 文档原作者 Harry Roberts)是个英国人,而且我一向拼写 colour 而非 color,但是为了追求统一,我认为在 CSS 中用美式拼法更佳。CSS 以及其它多数语言都是以美式拼法编写,所以如果在 .colour-picker{} 中写 color:red 就缺乏统一性。我以前主张同时用两种拼法,例如:

CSS Code复制内容到剪贴板

.color-picker,   
.colour-picker{   
}  

  但是我最近参与了一份规模庞大的 Sass 项目,这个项目中有许多的颜色变量(例如 $brand-color,$highlight-color 等等),每个变量要维护两种拼法实在辛苦,要查找并替换时也需要两倍的工作量。

  所以为了统一,把所有的 class 与变量都以你参与的项目的惯用拼法命名即可。
 注释

  我使用行宽不超过 80 字节的文档块风格注释:

CSS Code复制内容到剪贴板

/**  
 * This is a docBlock style comment  
 *   
 * This is a longer description of the comment, describing the code in more  
 * detail. We limit these lines to a maximum of 80 characters in length.  
 *   
 * We can have markup in the comments, and are encouraged to do so:  
 *   
   <div class=foo>  
       <p>Lorem</p>  
   </div>  
 *   
 * We do not prefix lines of code with an asterisk as to do so would inhibit  
 * copy and paste.  
 */  
  
  
/**  
 * 这是一个文档块(DocBlock)风格的注释。  
 *  
 * 这里开始是描述更详细、篇幅更长的注释正文。当然,我们要把行宽控制在 80 字节以内。  
 *  
 * 我们可以在注释中嵌入 HTML 标记,而且这也是个不错的办法:  
 *  
    <div class=foo>  
        <p>Lorem</p>