前端 CSS 规范和命名

1. Id 和 class 命名分隔符

/* bad  "demo" 和 "image" 之间没有分隔符 */
.demoimage {}
 
/* bad 使用下划线 */
.error_status {}
 
/* good  选择器中使用连字符，以提高可读性 */
#video-id {}
.ads-sample {}

2. 值与单位

2.1 单位

值为 0 时不用添加单位

margin: 0;
padding: 0;

值在 -1 和 1 之间时，不需要加 0

font-size: .8em;

2.2 颜色值

颜色统一用 16 进制表示，重复的字母省略。使用 rgba() 时每个逗号后必须保留一个空格

/* bad */
color: #eebbcc;
 
/* good */
color: #ebc;
 
/* good */
box-shadow: 0 0 2px rgba(0, 128, 0, .3);

颜色值不能使用命名颜色，颜色值中的英文字符应统一采用小写

/* bad */
.success {
  color: lightgreen;
}
 
/* good */
.success {
  color: #90ee90;
}
 
/* bad */
.success {
  background-color: #ACA
}

/* good */
.success {
  background-color: #aca
}

3. 选择器及属性

3.1 选择器

除非需要，否则不要在 id 或 class 前加元素名进行限定

/* bad */
ul#example {}
div.error {}

/* good */
#example {}
.error {}

3.2 属性简写

/* bad */
font-family: palatino, georgia, serif;
font-size: 100%;
line-height: 1.6;

padding-bottom: 2em;
padding-left: 1em;
padding-right: 1em;
padding-top: 0;

/* good */
font: 100%/1.6 palatino, georgia, serif;
padding: 0 1em 2em;

4. 书写顺序

按照下面的顺序书写
定位 => 宽高 => 补白(外内) => 边框(宽 ，位置，颜色) => 文字样式 => 背景 => 其他

div {
  /* 定位属性 */
  display;
  visibility;
  float;
  clear;
  
  position;
  top;
  right;
  botttom;
  left;
  z-index;
  overflow;

  /* 自身属性 */
  width;
  min-width;
  max-width;
  height;
  min-height;
  max-height;

  margin;
  margin-top;
  margin-right;
  margin-bottom;
  margin-left;

  padding;
  padding-top;
  padding-right;
  padding-bottom;
  padding-left;
  
  border-width;
  border-top-width;
  border-right-width;
  border-bottom-width;
  border-left-width;

  border-style;
  border-top-style;
  border-right-style;
  border-bottom-style;
  border-left-style;

  border-color;
  border-top-color;
  border-right-color;
  border-bottom-color;
  border-left-color;

  outline;

  list-style;

  table-layout;
  caption-side;
  border-collapse;
  border-spacing;
  empty-cells;
  
  /* 文字样式, 文本属性 */
  font;
  font-family;
  font-size;
  line-height;
  font-weight;
  text-align;
  text-indent;
  text-transform;
  text-decoration;
  letter-spacing;
  word-spacing;
  white-space;
  vertical-align;
  color;

  background;
  background-color;
  background-image;
  background-repeat;
  background-position;

  /* 其他属性 */
  opacity;

  cursor;

  content;
  quotes;
}

5. 通用

5.1 选择器的嵌套层级

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

/* bad */
.page .header .login #username input {}
.comment * {}

/* good */
#username input {}
.comment .avatar {}

5.2 样式块风格

在选择器和 {} 之间用一个空格隔开

/* bad 没有空格 */
#video{
  margin-top: 1em;
}

/* bad 没有必要的换行 */
#video
{
  margin-top: 1em;
}

/* good */
#video {
  margin-top: 1em;
}

5.3 属性名书写风格

属性名和值之间都应有一个空格

/* bad */
h3 {
  font-weight:bold;
}

/* good */
h3 {
  font-weight: bold;
}

5.4 选择器分隔

每个选择器都另起一行

/* bad */
div, p , span{
  color: #FFF;
}

/* good */
div,
p,
span {
 color: #FFF;
}

5.5 分段注释

用注释把 CSS 分成各个部分

/* Header */

#adw-header {}

/* Footer */

#adw-footer {}

5.6 !important

尽量不使用 !important 声明。当需要强制指定样式且不允许任何场景覆盖时，才可通过标签内联和 !important 定义样式 , 设计上 确实不允许任何其它场景覆盖样式

6. 字体

6.3 font-weight

font-weight 属性必须使用数值方式描述。400 等同于 normal，700 等同于 bold

/* bad */
h1 {
  font-weight: bold;
}

/* good */
h1 {
  font-weight: 700;
}

7. 兼容性

7.1 属性前缀

带私有前缀的属性由长到短排列，按冒号位置对齐，标准属性放在最后

.box {
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}

8. 文件命名

1. 全局样式表：global.css
2. 重置默认样式：reset.css
3. 布局样式：layout.css
4. 文字样式：font.css

9. id 及 class 命名

统一采用 kebab-case 命名

1. 无嵌套结构时 , 第一个字符表示一个块，第二个字符表示块级下面的元素

<div class="article">
  <button class="article-btn"></button>
</div>
 
<div class="head">
  <h1 class="head-title">title</h1>
</div>

2. 有嵌套结构时 , 直接根据层级关系命名，无需用 - 连接