前端代码规范——CSS代码规范

最新推荐文章于 2025-04-02 14:42:59 发布

破风小k

最新推荐文章于 2025-04-02 14:42:59 发布

阅读量496

点赞数

分类专栏： web

本文链接：https://blog.youkuaiyun.com/Danny1076376440/article/details/108810558

版权

web 专栏收录该内容

13 篇文章

订阅专栏

CSS代码规范

1.命名规范

CSS的命名规范也称作BEM规范，为的就是结束混乱的命名方式，达到一个语义化的css命名方式

1.1 block

负责描述功能的

.header {
}

.header--select {
}

不能使用元素选择器和ID选择器

/* good */
.header {
}

/* bad */
.header a {
}

1.2 Element

是用一个双下划线隔开

/* good */
.header__body {
    
}

/* bad */
.header .body {
    
}

表示的是目的，而不是状态，如下例子：目的是在header下面定义三个区域 body、logo、title，但是并没有指定任何状态。

.header__body {
    
}

.header__logo {
    
}

.header__title {
    
}

不能脱离Block父级单独使用

/* good */
<header class="header">
    <p class="header__body">
        
    </p>
</header>

/* bad */
<header>
    <p class="header__body">
        
    </p>
</header>

1.3 Modifier

表示的是一个状态，是用双横杠分开的。

.header__button--default {
    
}

Boolean

.header__button {
    
}

.header__button--selected {
    
}

枚举

.header__button--primary {
    
}

.header__button--warning {
    
}

不能单独使用

/* good */
<p class="header">
    <p class="header__body">
        <button class="header__button header__button--primary"></button>
        <button class="header__button header__button--default"></button>
    </p>
</p>

/* bad */
<p>
    <p>
        <button class="header__button--primary"></button>
        <button class="header__button--default"></button>
    </p>
</p>

2 代码风格

【强制】与 prettier 保持一致

3 通用

3.1 选择器

[强制] 如无必要，不得为 id、class 选择器添加类型选择器进行限定。

解释：
在性能和维护性上，都有一定的影响。

示例：
/* good */
#error,
.danger-message {
    font-color: #c00;
}
/* bad */
dialog#error,
p.danger-message {
    font-color: #c00;
}

[建议] 选择器的嵌套层级应不大于 3 级，位置靠后的限定条件应尽可能精确。

示例：
/* good */
#username input {}
.comment .avatar {}
/* bad */
.page .header .login #username input {}
.comment div * {}

3.2 属性缩写

[建议] 在可以使用缩写的情况下，尽量使用属性缩写。

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

[建议] 使用 border / margin / padding 等缩写时，应注意隐含值对实际数值的影响，确实需要设置多个方向的值时才使用缩写。

解释：
border / margin / padding 等缩写会同时设置多个属性的值，容易覆盖不需要覆盖的设定。如某些方向需要继承其他声明的值，则应该分开设置。

示例：
/* good */
.page {
    margin-right: auto;
    margin-left: auto;
}
.featured {
    border-color: #69c;
}
/* bad */
.page {
    margin: 5px auto; /* introducing redundancy */
}
.featured {
    border: 1px solid #69c; /* introducing redundancy */
}

3.3 清除浮动

[建议] 当元素需要撑起高度以包含内部的浮动元素时，通过对伪类设置 clear 或触发 BFC 的方式进行 clearfix。尽量不使用增加空标签的方式。

3.4 !important

在业务代码中强制不能使用 !important，除公共样式之外。

3.5 z-index

[建议] 将 z-index 进行分层，对文档流外绝对定位元素的视觉层级关系进行管理。

4 值与单位

4.1 文本

[强制] 文本内容必须用双引号包围。

4.2 数值

[强制] 当数值为 0 - 1 之间的小数时，省略整数部分的 0。

示例：
/* good */
panel {
    opacity: .8
}
/* bad */
panel {
    opacity: 0.8
}

4.3 url()

[强制] url() 函数中的路径不加引号。

示例：
body {
    background: url(bg.png);
}

4.4 长度

[强制] 长度为 0 时须省略单位。 (也只有长度单位可省)

示例：
/* good */
body {
    padding: 0 5px;
}
/* bad */
body {
    padding: 0px 5px;
}

4.5 颜色

[强制] RGB颜色值必须使用十六进制记号形式 #rrggbb。不允许使用 rgb()。
解释：
带有alpha的颜色信息可以使用 rgba()。使用 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;
}

[建议] 颜色值中的英文字符采用小写。如不用小写也需要保证同一项目内保持大小写一致。
ps: 这条规则可能与最新脚手架工程可能有冲突，因为最新版的工程规则不允许写大写字母

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

4.6 2D 位置

[强制] 必须同时给出水平和垂直方向的位置。
解释：
2D 位置初始值为 0% 0%，但在只有一个方向的值时，另一个方向的值会被解析为 center。为避免理解上的困扰，应同时给出两个方向的值。background-position属性值的定义

示例：
/* good */
body {
    background-position: center top; /* 50% 0% */
}
/* bad */
body {
    background-position: top; /* 50% 0% */
}

5 文本编排

5.1 字号

[强制] 需要在 Windows 平台显示的中文内容，其字号应不小于 12px。
解释：
由于 Windows 的字体渲染机制，小于 12px 的文字显示效果极差、难以辨认。

5.2 字重

[强制] font-weight 属性必须使用数值方式描述。

示例：
/* good */
h1 {
    font-weight: 700;
}
/* bad */
h1 {
    font-weight: bold;
}

5.3 行高

[建议] line-height 在单行的时候使用1，多行的时候使用具体数值

示例：
.container {
    line-height: 1.5;
}

6 变换与动画

[强制] 使用 transition 时应指定 transition-property。

示例：
/* good */
.box {
    transition: color 1s;
    transition-property: color, border-color;
    transition-duration: 1s, 2s;
}
/* bad */
.box {
    transition: all 1s;
}

[建议] 尽可能使用transition 做动画变换，不会引起浏览器的重排

示例：
/* good */
.box {
    transition: transform 1s;
}
.box:hover {
    transform: translate(20px); /* move right for 20px */
}
/* bad */
.box {
    left: 0;
    transition: left 1s;
}
.box:hover {
    left: 20px; /* move right for 20px */
}