# 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.BEM 命名

BEM代表块(Block),元素(Element),修饰符(Modifier)。 BEM介绍 (opens new window) 组件库的通用组件强制要求使用BEM

# 3.css规范

  1. id 驼峰 PageOne
  2. class 以"-"间隔 page-one
  3. 尽量避免把标签作为选择器
  4. 选择器尽可能的精确,避免出现中文拼音类名
  5. 减少使用ID作为选择器
  6. 避免使用!important
  7. 在css中注释要表明,分模块来标明,比如头部用/头部start/和/头部end/,目的是便于修改样式时进行查找。同样的js 也要以事件源发生的事件进行命名。
  8. 禁止在html文件使用<style></style>
  9. 名称首单词要与插件或者模块相关,例如时间插件:.date-(单词)
  10. 缩写属性
//不推荐
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
  1. 兼容多个浏览器时,将标准属性写在底部。 -moz-border-radius: 15px; /* Firefox / -webkit-border-radius: 15px; / Safari和Chrome / border-radius: 15px; / Opera 10.5+, 以及使用了IE-CSS3的IE浏览器 *//标准属性
  2. css文件 一个样式一行
// 不推荐
.gic-btn {font-size:15px;}
// 推荐
.gic-btn
{
	font-size:15px;
}
1
2
3
4
5
6
7
  1. css每一个样式都需要“;”结尾,后期压缩css需要断句,例如:
.btn 
{
	font-size:14px;//结尾
}
1
2
3
4
  1. 尽量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

# 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