CSS 编码规范

Posted 2022-11-18 前端向朔

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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 规范
 代码规范

以上是关于CSS 编码规范的主要内容，如果未能解决你的问题，请参考以下文章