# CSS 规范
element-ui 里面的index.css 改过一些样式 所以新拉的项目要记得覆盖index.css
# 1.CSS的书写顺序
结构性属性: display,position, left, top, right float,margin, padding.... 表现性属性: background, border font...
<!-- display 放在最前面 -->
display:block;
<!-- position -->
position: relative;
<!-- position 进行定位的属性 -->
top: 100px;
<!-- 宽高 -->
width: 100px;
line-height: 20px;
<!-- margin padding -->
margin: 10px;
padding: 10px;
<!-- font -->
font-size: 20px;
font-weight: 700;
<!-- border -->
border: 1px solid red;
border-radius: 4px;
<!-- background -->
background-color: pink;
<!-- z-index -->
z-index: 10;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
# 2.BEM 命名
BEM代表块(Block),元素(Element),修饰符(Modifier)。 BEM介绍 (opens new window) 组件库的通用组件强制要求使用BEM
# 3.css规范
- id 驼峰 PageOne
- class 以"-"间隔 page-one
- 尽量避免把标签作为选择器
- 选择器尽可能的精确,避免出现中文拼音类名
- 减少使用ID作为选择器
- 避免使用!important
- 在css中注释要表明,分模块来标明,比如头部用/头部start/和/头部end/,目的是便于修改样式时进行查找。同样的js 也要以事件源发生的事件进行命名。
- 禁止在html文件使用
<style></style>
- 名称首单词要与插件或者模块相关,例如时间插件:.date-(单词)
- 缩写属性
//不推荐
font-family: palatino, georgia, serif;
font-size: 100%;
line-height: 1.6;
//推荐
font: 100%/1.6 palatino, georgia, serif;
1
2
3
4
5
6
2
3
4
5
6
- 兼容多个浏览器时,将标准属性写在底部。 -moz-border-radius: 15px; /* Firefox / -webkit-border-radius: 15px; / Safari和Chrome / border-radius: 15px; / Opera 10.5+, 以及使用了IE-CSS3的IE浏览器 *//标准属性
- css文件 一个样式一行
// 不推荐
.gic-btn {font-size:15px;}
// 推荐
.gic-btn
{
font-size:15px;
}
1
2
3
4
5
6
7
2
3
4
5
6
7
- css每一个样式都需要“;”结尾,后期压缩css需要断句,例如:
.btn
{
font-size:14px;//结尾
}
1
2
3
4
2
3
4
- 尽量css 路径,但路径不宜过长 3层内为宜
# html文件
<form class="gic-form">
<dl class="gic-group">
<dd class="gic-input">
<label>
<span>名称:</span>
<span><input type="text" value="" /></input></span>
</lable>
</dd>
</dl>
</form>
1
2
3
4
5
6
7
8
9
10
2
3
4
5
6
7
8
9
10
# css文件
/**表单模块**/
.gic-form
{
display:block;
font-size:16px;
}
.gic-form .gic-input
{
display:block;
}
.gic-form .gic-input span
{
}
/**表单模块end**/
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
2
3
4
5
6
7
8
9
10
11
12
13
14
15