CSS代码编码规范

水深无声 2022-08-21 04:47 185阅读 0赞

博客来自：[http://www.gbtags.com/gb/tutorials/215/1164.htm][http_www.gbtags.com_gb_tutorials_215_1164.htm]

个人主页：[http://www.itit123.cn/][http_www.itit123.cn] 更多干货等你来拿

####  CSS代码编码规范 ####

类似HTML，代码编写规范帮助程序员很好的规整和管理代码。这里介绍一些CSS编码的相关规范。

## 有效组织注释 ##

CSS文件可以非常复杂，或许包含了几百行。这些巨大的文件可能会导致我们书写的样式非常难于编辑和查找。所以最好我们将样式组织在逻辑块中。

注意：尽量使用一些注释说明样式内容和相关逻辑模块，方便其它人理解

不符合编码规范

header { ... }
    article { ... }
    .btn { ... }

*      符合编码规范

<pre name="code" class="html">/* Primary header */
    header { ... }
    
    /* Featured article */
    article { ... }
    
    /* Buttons */
    .btn { ... }

## 使用多行书写代码和空格 ##

书写CSS，最重要的是将每一个选择器和声明定义在一个新行。然后，每一个选择器需要缩放来申明。

为了方便其它人阅读，需要按指定的方式来书写CSS，下面是对比的例子：

*      不符合编码规范

a,.btn{background:#aaa;color:#f60;font-size:18px;padding:6px;}

*      符合编码规范

a,
    .btn {
      background: #aaa;
      color: #f60;
      font-size: 18px;
      padding: 6px;
    }

以上代码更清楚的定义了css相关样式，更符合阅读习惯

## 使用正确的类名称 ##

类名或者值应该模块化，必须包含有效的说明元素相关内容，不是仅仅描述外观，类名称定义应该是小写，并且使用连字符号“-”

*      不符合编码规范

.Red_Box { ... }

*      符合编码规范

.alert-message { ... }

## 创建合适的选择器 ##

CSS选择器如果不好好维护则可能会无法控制。太长或者太不清楚都不合适。

太长的选择器会导致层次太深入，而打断正常的层次结构导致不可预期的错误。

还有就是尽量不要使用ID来定义CSS中选择器，因为它们比较专注，会导致很多问题。

下面是对比例子：

*      不符合编码规范

#aside #featured ul.news li a { ... }
    #aside #featured ul.news li a em.special { ... }

*      符合编码规范

.news a { ... }
    .news .special { ... }

## 必要的时候使用指定的类定义 ##

有些时候当CSS名太长的时候，有必要使用特定的类定义，因为层次太多需要你定义较多的代码。

举个例子，如果一个<em>元素签到到一个存在于<aside>元素中的<h1>元素，而以上这些元素都包含在<section>元素中，选择器有可能设计成为了"aside h1 em"，那么<em>元素即使移出<h1>元素，样式也不会发生变化，更好的解决方法是为<em>元素定义一个特定的类定义，比较代码如下：

*      不符合编码规范

section aside h1 em { ... }

*      符合编码规范

.text-offset { ... }

## 使用缩写属性和值 ##

一个CSS的特性是能够使用缩写属性和值。 大多数的属性和值都支持缩写方式，例如，内外边距，这样书写能够有效的减少代码

*      不符合编码规范

img {
      margin-top: 5px;
      margin-right: 10px;
      margin-bottom: 5px;
      margin-left: 10px;
    }
    button {
      padding: 0 0 0 20px;
    }

*      符合编码规范

img {
      margin: 5px 10px;
    }
    button {
      padding-left: 20px;
    }

## 使用缩写的16进制的颜色属性 ##

在颜色属性值书写中，如果可以的化尽量使用3个字母缩写来设置颜色值，对比代码如下：

*      不符合编码规范

.module {
      background: #DDDDDD;
      color: #FF6600;
    }

*      符合编码规范

.module {
      background: #ddd;
      color: #f60;
    }

## 不书写0值相关单位 ##

有时候，如果相关属性值为0的时候，尽量不书写单位，对比代码如下：

*      不符合编码规范

div {
      margin: 20px 0px;
      letter-spacing: 0%;
      padding: 0px 5px;
    }

*      符合编码规范

div {
      margin: 20px 0;
      letter-spacing: 0;
      padding: 0 5px;
    }

## 分组来管理浏览器相关兼容前缀 ##

对于CSS3相关属性来说， 通常需要使用浏览器相关的兼容性前缀，这个时候务必保证书写的代码能够有效的组织（有效对齐和分组），不要随意的书写，下面是对比代码：

*      不符合编码规范

div {
      background: -webkit-linear-gradient(#a1d3b0, #f6f1d3);
      background: -moz-linear-gradient(#a1d3b0, #f6f1d3);
      background: linear-gradient(#a1d3b0, #f6f1d3);
      -webkit-box-sizing: border-box;
      -moz-box-sizing: border-box;
      box-sizing: border-box;
    }

*      符合编码规范

div {
    background: -webkit-linear-gradient(#a1d3b0, #f6f1d3);
    background:    -moz-linear-gradient(#a1d3b0, #f6f1d3);
    background:         linear-gradient(#a1d3b0, #f6f1d3);
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
            box-sizing: border-box;
    }

> 小提示： 使用一些第三方类库，可以帮助我们书写不带有任何浏览器兼容性前缀的代码， 例如 prefixfree，更多请[参考教程][Link 1]  
>

## 模块化代码方便重用    ##

尽量不要书写重复定义的样式， 学会设计可重用的代码结构，避免生成大量的冗余代码，下面是对比例子：

*      不符合编码规范

.news {
      background: #eee;
      border: 1px solid #ccc;
      border-radius: 6px;
    }
    .events {
      background: #eee;
      border: 1px solid #ccc;
      border-radius: 6px;
    }

*      符合编码规范

.feat-box {
      background: #eee;
      border: 1px solid #ccc;
      border-radius: 6px;
    }

>   
>

[http_www.gbtags.com_gb_tutorials_215_1164.htm]: http://www.gbtags.com/gb/tutorials/215/1164.htm
[http_www.itit123.cn]: http://www.itit123.cn/
[Link 1]: http://www.gbtags.com/gb/gbliblist/115.htm