（四）CSS 规范

命名

类名使用小写字母，以中划线分隔
id 采用驼峰式命名
scss 中的变量、函数、混合、placeholder 采用驼峰式命名
ID 和 class 的名称总是使用可以反应元素目的和用途的名称，或其他通用的名称，代替表象和晦涩难懂的名称

不推荐：

.fw-800 {
  font-weight: 800;
}

.red {
  color: red;
}

推荐:

.heavy {
  font-weight: 800;
}

.important {
  color: red;
}

选择器

1)css 选择器中避免使用标签名
从结构、表现、行为分离的原则来看，应该尽量避免 css 中出现 HTML 标签，并且在 css 选择器中出现标签名会存在潜在的问题。

2)很多前端开发人员写选择器链的时候不使用 直接子选择器（注：直接子选择器和后代选择器的区别）。有时，这可能会导致疼痛的设计问题并且有时候可能会很耗性能。然而，在任何情况下，这是一个非常不好的做法。如果你不写很通用的，需要匹配到 DOM 末端的选择器， 你应该总是考虑直接子选择器。

不推荐:

.content .title {
  font-size: 2rem;
}

推荐:

.content > .title {
  font-size: 2rem;
}

尽量使用缩写属性

不推荐：

border-top-style: none;
font-family: palatino, georgia, serif;
font-size: 100%;
line-height: 1.6;
padding-bottom: 2em;
padding-left: 1em;
padding-right: 1em;
padding-top: 0;

推荐：

border-top: 0;
font: 100%/1.6 palatino, georgia, serif;
padding: 0 1em 2em;

每个选择器及属性独占一行

不推荐：

button{
  width:100px;height:50px;color:#fff;background:#00a0e9;
}

推荐：

button{
  width:100px;
  height:50px;
  color:#fff;
  background:#00a0e9;
}

省略0后面的单位

不推荐：

div{
  padding-bottom: 0px;
  margin: 0em;
}

推荐：

div{
  padding-bottom: 0;
  margin: 0;
}

避免使用ID选择器及全局标签选择器防止污染全局样式

不推荐：

#header{
  padding-bottom: 0px;
  margin: 0em;
}

推荐：

.header{
  padding-bottom: 0px;
  margin: 0em;
}

CSS属性书写顺序

尽量遵循:显示属性->盒模型->文字属性->排版->其他。

例如:

.searchBtn{
	display:block;
	position:abtolute;
	left:2px;
	top:0;
	width:50px;
	height:19px;
	border:1px solid #ccc;
	padding:5px 2px;
	font:Arial 12px/19px;
	text-align:center;
	vertical-align:middle;
	color:#666;
	background:#999;
	cursor:pointer;
}

CSS命名规范

头：header
内容：content/containe
尾：footer
导航：nav
侧栏：sidebar
栏目：column
页面外围控制整体布局宽度：wrapper
左右中：left right center
登录条：loginbar
标志：logo
广告：banner
页面主体：main
热点：hot
新闻：news
下载：download
子导航：subnav
菜单：menu
子菜单：submenu
搜索：search
友情链接：friendlink
页脚：footer
版权：copyright
滚动：scroll
内容：content
标签页：tab
文章列表：list
提示信息：msg
小技巧：tips
栏目标题：title
加入：joinus
指南：guild
服务：service
注册：regsiter
状态：status
投票：vote
合作伙伴：partner