CSS 编码规范

CSS 编码规范

文件

CSS 文件使用 UTF-8 编码。

  • 样式文件必须写上 @charset 规则,并且一定要在样式文件的第一行首个字符位置开始写,编码名用 UTF-8
  • 字符 @charset; 都用小写字母,不能出现转义符,编码名允许大小混写
@charset "UTF-8";

缩进

使用 4 个空格做为一个缩进层级,不允许使用 2 个空格 或 tab 字符。

示例:

.selector {
    margin: 0;
    padding: 0;
}

空格

  • 选择器{ 之间必须包含空格。

    示例:

    .selector {
    }
    
  • 属性名 与之后的 : 之间不允许包含空格, :属性值 之间必须包含空格。

    示例:

    margin: 0;
    
  • 列表型属性值 书写在单行时,, 后必须跟一个空格。

    示例:

    font-family: Arial, sans-serif;
    

注释

注释统一用 /* */(scss中也不要用//);缩进与下一行代码保持一致;当位于一个代码行的末尾,与代码间隔一个空格。

示例:

/* header */
.header {
    ...
}

.header {
    /* 50px */
    width: 50px;
    color: red; /* color red */
}

选择器

  • 当一个 rule 包含多个 selector 时,每个选择器声明必须独占一行。

    示例:

    /* good */
    .post,
    .page,
    .comment {
        line-height: 1.5;
    }
    
    /* bad */
    .post, .page, .comment {
        line-height: 1.5;
    }
    
  • >+~ 选择器的两边各保留一个空格。

    示例:

    /* good */
    main > nav {
        padding: 10px;
    }
    
    label + input {
        margin-left: 5px;
    }
    
    input:checked ~ button {
        background-color: #69C;
    }
    
    /* bad */
    main>nav {
        padding: 10px;
    }
    
    label+input {
        margin-left: 5px;
    }
    
    input:checked~button {
        background-color: #69C;
    }
    
  • 属性选择器中的值必须用双引号包围。

    示例:

    /* good */
    article[character="juliet"] {
        voice-family: "Vivien Leigh", victoria, female
    }
    
    /* bad */
    article[character='juliet'] {
        voice-family: "Vivien Leigh", victoria, female
    }
    

属性

  • 属性定义必须另起一行。

    示例:

    /* good */
    .selector {
        margin: 0;
        padding: 0;
    }
    
    /* bad */
    .selector { margin: 0; padding: 0; }
    
  • 属性定义后必须以分号结尾。

    示例:

    /* good */
    .selector {
        margin: 0;
    }
    
    /* bad */
    .selector {
        margin: 0
    }
    
  • 在可以使用缩写的情况下,尽量使用属性缩写。

    示例:

    /* good */
    .post {
        font: 12px/1.5 arial, sans-serif;
    }
    
    /* bad */
    .post {
        font-family: arial, sans-serif;
        font-size: 12px;
        line-height: 1.5;
    }
    

属性书写顺序(建议)

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

  • Positioning - 定位属性
  • Box model - 盒模型属性
  • Typographic - 排版属性
  • Visual - 视觉属性
  • Misc - 其它属性

由于定位(positioning)可以从正常的文档流中移除元素,并且还能覆盖盒模型(box model)相关的样式,因此排在首位。

盒模型排在第二位,因为它决定了组件的尺寸和位置。

其他属性只是影响组件的内部(inside)或者是不影响前两组属性,因此排在后面。

完整的属性列表及其排列顺序请参考 Recess

示例:

.selector {
    /* Positioning */
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 100;
    /* Box-model */
    display: block;
    float: right;
    width: 100px;
    height: 100px;
    /* Typography */
    font: normal 13px "Helvetica Neue", sans-serif;
    line-height: 1.5;
    color: #333;
    text-align: center;
    /* Visual */
    background-color: #f5f5f5;
    border: 1px solid #e5e5e5;
    border-radius: 3px;
    /* Misc */
    opacity: 1;
}

值与单位

  • 当属性值为 0 - 1 之间的小数时,省略整数部分的 0

    示例:

    /* good */
    panel {
        opacity: .8
    }
    
    /* bad */
    panel {
        opacity: 0.8
    }
    
  • 属性值为 0 时须省略单位。

    示例:

    /* good */
    body {
        padding: 0 5px;
    }
    
    /* bad */
    body {
        padding: 0px 5px;
    }
    
  • RGB颜色值必须使用十六进制记号形式 #rrggbb ,使用 rgba() 时每个逗号后必须保留一个空格。

    示例:

    /* good */
    .success {
        box-shadow: 0 0 2px rgba(0, 128, 0, .3);
        border-color: #008000;
    }
    
    /* bad */
    .success {
        box-shadow: 0 0 2px rgba(0,128,0,.3);
        border-color: rgb(0, 128, 0);
    }
    
  • 颜色值可以缩写时,必须使用缩写形式。

    示例:

    /* good */
    .success {
        background-color: #aca;
    }
    
    /* bad */
    .success {
        background-color: #aaccaa;
    }
    
  • 颜色值不允许使用命名色值。

    示例:

    /* good */
    .success {
        color: #90ee90;
    }
    
    /* bad */
    .success {
        color: lightgreen;
    }
    
  • 颜色值中的英文字符采用小写。如不用小写也需要保证同一项目内保持大小写一致。

    示例:

    /* good */
    .success {
        background-color: #aca;
        color: #90ee90;
    }
    
    /* good */
    .success {
        background-color: #ACA;
        color: #90EE90;
    }
    
    /* bad */
    .success {
        background-color: #ACA;
        color: #90ee90;
    }
    

Class 命名

采用 BEM 的命名规范

BEM 分别表示 Block (块), Element (元素)和 Modifier (修饰状态)。

  • Block 是页面中独立存在的区块,可以在不同场合下被重用;每个页面都可以看做是多个 Block 组成。

  • Element 是构成 Block 的元素,只有在对应 Block 内部才具有意义,是依赖于 Block 的存在。

  • Modifier 是描述 Block 或 Element 的属性或状态;同一个 Block 或 Element 可以有多个 Modifier 。

在选择器中,由以下三种符号来表示扩展的关系:

- 中划线:仅作为连字符使用,表示某个块 、某个子元素或状态的多单词之间的连接记号。

__ 双下划线:双下划线用来连接块和块的子元素。

-- 双横线:双横线用来描述一个块或者块的子元素的一种状态。

is-xxx:表示一种业务逻辑。

type-block__element--modifier

组件之间的完全解耦,不会造成命名空间的污染,如:.block-xxx ul li 的写法带来的潜在的嵌套风险。

BEM 命名会使得 Class 类名变长,但经过压缩后这个带宽开销可以忽略不计。

/* normal */
.list-ranking {}

.list-ranking.select {}

.list-ranking .item {}

.list-ranking .item.active {}

/* BEM */
.list-ranking {} /* block */

.list-ranking--select {} /* block modifier*/

.list-ranking__item {} /* block element */

.list-ranking__item--large {} /* block element modifier*/

.list-ranking__item.is-active {} /*一种状态*/

<ul class="list-ranking list--select">
    <li class="list-ranking__item list-ranking__item--large"></li>
    <li class="list-ranking__item is-active"></li>
    <li class="list-ranking__item"></li>
    <li class="list-ranking__item"></li>
    <li class="list-ranking__item"></li>
</ul>

.END

参考:
[译]谷歌 HTML/CSS 规范
代码规范

已标记关键词 清除标记
相关推荐
©️2020 CSDN 皮肤主题: 成长之路 设计师:Amelia_0503 返回首页