前端代码标准最佳实践：CSS

我不是女神ヾ 2022-06-08 10:27 178阅读 0赞

## 1，命名 ##

和其他语言规范一样，css的命名也讲究命名要有意义，命名要尽可能短但是要足够表达含义；命名的词用连字符连接。

不规范的命名：

**\[html\]**  view plain  copy

print ?

1.  \#navigation\{  
2.  \}  
3.  .demoimage\{  
4.  \}  
5.  .error\_status\{  
6.  \}

#navigation{
    }
    .demoimage{
    }
    .error_status{
    }

规范的命名：

[html] view plain copy print ? #nav{   }   .demo-image{   }   .error-status{   }   #nav{
    }
    .demo-image{
    }
    .error-status{
    }
     
     2, css选择器
     不同的标签类型尽可能不用相同的css类名；尽可能不用标签类型选择器，用css类名和ID足够定义css，因为ID是可以唯一确定Dom元素的，而css类是不推荐用于不同的标签的；另外应该少用ID选择器定义，因为ID的唯一性使得定义的css无法重用。
     不规范定义：
     
        
         [html] view plain copy print ? ul#menus{   }   div.info{   }   ul#menus{
    }
    div.info{
    }
    
    
    
     
     规范定义：
      
     
         
          [html] view plain copy print ? .main-menus{   }   .info{   }   .main-menus{
    }
    .info{
    }
    
    
    
     
     3，属性名称和值的定义精简
     css的某些属性定义可以可以分拆为各个独立项，比如padding，border, margin, background, font等，虽然分拆定义的可读性会好一些，但是就目前的经验来看，前端工程师们对这些常用的css理解程度足够好，合并后的定义不会对可读性带来影响，反而代码更简洁；此外对属性值为0的单位可以省略，在0后面添加入px em cm等单位是毫无意义的；对小数值可以省略小数点前的0；url值两端的引号可以省略。
     不规范的定义：
     规范定义：   border-top: 0;
    font: 100%/1.6 palatino, georgia, serif;
    padding: 0 1em 2em;
    margin: .8em;
    background: #00FF00 url(bgimage.gif) no-repeat fixed top;
     4，css代码的格式
     漂亮统一的代码格式可以提高代码的可读性和可维护性，css的最佳代码格式主要有以下几点：定义顺序以字母序排列，不考虑浏览器前缀；定义以分号结束；属性名称定义的分号后添加一个空格；多个选择器定义时，每个定义单独占一行。
     
          
           [html] view plain copy print ? /*css定义顺序以字母序排列；结束用分号；属性名称与值之间添加空格*/   background: fuchsia;   border: 1px solid;   -moz-border-radius: 4px;   -webkit-border-radius: 4px;   border-radius: 4px;   color: black;   text-align: center;   text-indent: 2em;      /*多个选择器定义时，每个选择器单独占用一行*/   h1,   h2,   h3 {       font-weight: normal;       line-height: 1.2;   }   /*css定义顺序以字母序排列；结束用分号；属性名称与值之间添加空格*/
    background: fuchsia;
    border: 1px solid;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    border-radius: 4px;
    color: black;
    text-align: center;
    text-indent: 2em;
    
    /*多个选择器定义时，每个选择器单独占用一行*/
    h1,
    h2,
    h3 {
        font-weight: normal;
        line-height: 1.2;
    }
    
    
    
     
     5，避免写兼容某个浏览器的css代码
     避免写特定浏览器兼容代码，这里说的特定浏览器主要指的是万恶的IE系列浏览器，IE6，7尤为严重。碰到浏览器兼容问题，首先考虑的是能否换一种其它的解决方案，如果没有合适的解决方案，记得单独写一个css文件给这些特定的浏览器，不要把兼容代码和常规代码混合，这样方便代码的维护，如果后期不支持这些老旧浏览器，可以直接删除这些单独的css文件即可。
     
          
           
           
            [html] view plain copy print ? 
           
                  
          
           
    
    
    
    
     
     6，记住块元素和行内元素的区别，避免写无用的css代码
     块级元素显示会独占一行，而行内元素不会独占一行。常见的块级元素有：div p ul ol table h1~h6 等；行内元素有：a em img input label select span strong textarea等。块级元素的display默认样式是block，而行内元素是inline，可以通过重新定义display来互转块级元素和行内元素。但是记住以下的css样式对行内元素是无效的：width height 和垂直方向设置的margin padding，所以避免给行内元素定义这些无用的样式。
     7，记住css定义的权重
     css的选择器是有权重的，当有多个样式时，权重高的样式会起作用。说一个插曲，前段时间面试了不少前端工程师，问得最多的一个问题就是css权重问题，很可惜的是知道css权重的不多。以下是权重的规则：标签的权重为1，class的权重为10，id的权重为100，以下例子是演示各种定义的权重值：
     
            
             [html] view plain copy print ? /*权重为1*/   div{   }   /*权重为10*/   .class1{   }   /*权重为100*/   #id1{   }   /*权重为100+1=101*/   #id1 div{   }   /*权重为10+1=11*/   .class1 div{   }   /*权重为10+10+1=21*/   .class1 .class2 div{   }   /*权重为1*/
    div{
    }
    /*权重为10*/
    .class1{
    }
    /*权重为100*/
    #id1{
    }
    /*权重为100+1=101*/
    #id1 div{
    }
    /*权重为10+1=11*/
    .class1 div{
    }
    /*权重为10+10+1=21*/
    .class1 .class2 div{
    }
    
    
    
     
     如果权重相同，则最后定义的样式会起作用，但是应该避免这种情况出现，因为光是靠前后的样式定义来影响最终的样式是不靠谱的，也会给后期的维护埋下一个雷区；另外为了代码的重用性，应尽可能定义小的权重，这和不推荐使用id来定义样式是一样的道理。
     8，使用css reset
     各个浏览器对不同的标签有其不同的内置的样式，为了使得在不同的浏览器下标签的表现相同，可以定义一个单独的base.css文件，重新定义各种标签的默认样式。另外推荐的css文件组织是：定义一个base.css，用于css reset，定义一个common.css，用于定义各种公用css类。这里有一份base.css，其实是以上提到的base.css和common.css的合并，分享给大家：base.css
     9，多组合少继承
     这种设计方式越来越受到大家的欢迎，各种前端框架中也能看到大量这样的设计。设计的核心思想是：把css定义中的固定部分和可变部分分开定义，使得代码达到最大程度的重用，这样的结果是增加了元素上添加的css类个数，但是提高了代码的维护性和可读性。如下的例子代码来自bootstrap的按钮样式定义
     按钮有一个固定的基础样式btn
     
             
              [html] view plain copy print ? .btn {     display: inline-block;     *display: inline;     padding: 4px 10px 4px;     margin-bottom: 0;     *margin-left: .3em;     font-size: 13px;     line-height: 18px;     *line-height: 20px;     color: #333333;     ...     *zoom: 1;     -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);        -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);             box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);   }   .btn {
      display: inline-block;
      *display: inline;
      padding: 4px 10px 4px;
      margin-bottom: 0;
      *margin-left: .3em;
      font-size: 13px;
      line-height: 18px;
      *line-height: 20px;
      color: #333333;
      ...
      *zoom: 1;
      -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
         -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
              box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
    }
    
    
    
     
     在此基础上定义各种按钮的特定样式
     
              
               [html] view plain copy print ? .btn.disabled,   .btn[disabled] {     cursor: default;     background-color: #e6e6e6;     background-image: none;     opacity: 0.65;     filter: alpha(opacity=65);     -webkit-box-shadow: none;        -moz-box-shadow: none;             box-shadow: none;   }      .btn-large {     padding: 9px 14px;     font-size: 15px;     line-height: normal;     -webkit-border-radius: 5px;        -moz-border-radius: 5px;             border-radius: 5px;   }      .btn-large [class^="icon-"] {     margin-top: 1px;   }      .btn-small {     padding: 5px 9px;     font-size: 11px;     line-height: 16px;   }      .btn-small [class^="icon-"] {     margin-top: -1px;   }      .btn-mini {     padding: 2px 6px;     font-size: 11px;     line-height: 14px;   }   .btn.disabled,
    .btn[disabled] {
      cursor: default;
      background-color: #e6e6e6;
      background-image: none;
      opacity: 0.65;
      filter: alpha(opacity=65);
      -webkit-box-shadow: none;
         -moz-box-shadow: none;
              box-shadow: none;
    }
    
    .btn-large {
      padding: 9px 14px;
      font-size: 15px;
      line-height: normal;
      -webkit-border-radius: 5px;
         -moz-border-radius: 5px;
              border-radius: 5px;
    }
    
    .btn-large [class^="icon-"] {
      margin-top: 1px;
    }
    
    .btn-small {
      padding: 5px 9px;
      font-size: 11px;
      line-height: 16px;
    }
    
    .btn-small [class^="icon-"] {
      margin-top: -1px;
    }
    
    .btn-mini {
      padding: 2px 6px;
      font-size: 11px;
      line-height: 14px;
    }
    
    
    
     
     另外再推荐一下bootstrap框架，在github中排名第一的前端框架，出自于twitter。
     10，雪碧图(css sprite)
     这项技术是将多张背景图合并为一张，然后通过设置不同的background-position属性来展示不同的背景。现在越来越多的网站采用这项技术，例如：亚马逊，苹果，Google, YouTube等，我们目前的项目MSB也部分使用了这些技术。其优点是减少http请求背景图的次数,降低服务器的压力，页面的背景图能同时出现，避免出现空白背景。缺点是不好维护，另外有试验的结果显示会稍微影响渲染的速度，因为要计算position，但是其优点大于缺点，尤其是网站的背景图多的时候。现在也有多个工具可以帮助我们自动合并背景图和生成相应的background-position。
     http://spritegen.website-performance.org/
     http://csssprites.com/
     http://drupal.org/project/sprites
     另外，如果你使用的是asp.net来开发网站，可以使用微软开源的一款工具，可以在运行时生成对应的css srite。
     具体参考这里：GENERATE CSS SPRITES IN ASP.NET
      
     以上就是我认为比较重要CSS标准实践，都是从整体来关注css的标准实践，其实css中细节的的一些最佳实践还有很多，需要具体问题需要具体讨论，目前各个工程师写的css代码多种多样，也比较混乱，也与css代码容易上手并且相同的效果实现方法有多种多样有关。不管语言的灵活性如何，养成一个良好的写代码习惯非常重要，这些需要在实践中不断总结和提高，希望这篇文章能给刚开始学习css的同行们提供一些帮助，在技术的提高过程中少走一些弯路。