- 文档中心
- 编码规范
# CSS规范
# CSS编码原则
易读,易维护,标准化,国际化,风格统一。
# 学习参考资料
https://developer.mozilla.org/en-US/docs/Web/CSS
https://sass-lang.com/documentation
https://css-tricks.com
https://github.com/twbs/bootstrap
https://github.com/zurb/foundation-sites
https://github.com/tailwindcss/tailwindcss
https://cssguidelin.es
http://nicolasgallagher.com/about-html-semantics-front-end-architecture/
https://philipwalton.com/articles/css-architecture/
1
2
3
4
5
6
7
8
9
10
11
2
3
4
5
6
7
8
9
10
11
# 使用UTF8字符集
# 缩进为2个或4个空格,项目中保存一致
.main {
background-color: gold;
}
1
2
3
2
3
# Blank Spaces 风格
选择器之后,左花括号之前需要空格,冒号之后需要有空格。
body {
background-color: lightblue;
text-align: center;
font-size: 20px;
}
1
2
3
4
5
2
3
4
5
# CSS属性值使用双引号
.ruler {
background-image: url("../../assets/images/ruler.gif");
background-repeat: repeat-y;
}
1
2
3
4
2
3
4
# 推荐使用BEM命名规范
.search {
color: #333;
}
.search--inverse {
color: #fff;
background: #333;
}
.search__submit {
background: #333;
border: 0;
color: #fff;
height: 2rem;
display: inline-block;
}
.search__submit--inverse {
color: #333;
background: #ccc;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
# 每行不能超过100个字符
# 使用border-box盒子模型
在css中,content-box盒子模型,width和height指的是内容区域的宽度和高度。 增加内边距、边框和外边距不会影响内容区域的尺寸,但是会增加元素框的总尺寸。

border-box盒子模型, 盒子的实际宽度=设置的width。 padding和border被包含在定义的width和height之内.

*,
*::before,
*::after {
box-sizing: border-box;
}
1
2
3
4
5
2
3
4
5
# 避免使用CSS类型选择器
参考:https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity
/* Not recommended */
ul#example {}
div.error {}
/* Recommended */
#example {}
.error {}
1
2
3
4
5
6
7
2
3
4
5
6
7
# SASS嵌套不超过三层
nav {
> ul {
height: 1em;
overflow: hidden;
position: relative;
&::after {
content: ' ';
display: block;
clear: both;
}
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
2
3
4
5
6
7
8
9
10
11
12
13
# CSS属性顺序分组排列
一般排列顺序为
1> Positioning - 定位属性
2> Box-model - 盒模型属性
3> Typography - 排版属性
4> Visual - 视觉属性
5> Misc - 其他属性
1
2
3
4
5
2
3
4
5
.selector {
/* Positioning */
position: absolute;
z-index: 10;
top: 0;
right: 0;
/* Display & Box Model */
display: inline-block;
overflow: hidden;
box-sizing: border-box;
width: 100px;
height: 100px;
padding: 10px;
border: 10px solid #333;
margin: 10px;
/* Color */
background: #000;
color: #fff;
/* Text */
font-family: sans-serif;
font-size: 16px;
line-height: 1.4;
text-align: right;
/* Other */
cursor: pointer;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
# 使用SASS预处理
Syntactically Awesome Style Sheets (Sass)
为了方便一次性修改项目中大量的重复性代码需要使用CSS预处理机制。 SASS比LESS更高级,特性跟多,最流行的bootstrap和最高级的foundation使用的是SASS。 Element UI使用的也是SASS。
{
"name": "sass demo",
"version": "1.0.0",
"main": "index.js",
"license": "MIT",
"scripts": {
"sass": "sass --no-source-map --watch src:src"
},
"devDependencies": {
"node-sass": "^4.12.0",
"sass": "^1.20.1"
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
2
3
4
5
6
7
8
9
10
11
12
13
# SASS变量定义 _variables.scss
// Color system
$white: #fff !default;
$gray-100: #f8f9fa !default;
$gray-200: #e9ecef !default;
$gray-300: #dee2e6 !default;
$gray-400: #ced4da !default;
$gray-500: #adb5bd !default;
$gray-600: #6c757d !default;
$gray-700: #495057 !default;
$gray-800: #343a40 !default;
$gray-900: #212529 !default;
$black: #000 !default;
1
2
3
4
5
6
7
8
9
10
11
12
2
3
4
5
6
7
8
9
10
11
12
最近更新时间: 2022/11/10 下午1:36:27