css 规范
编码
在 css 首行设置文件编码为 utf-8。
1
|
@charset "utf-8";
|
id and class
id 和 class 尽量使用语义化命名，比如 header，main，footer，logo，nav，menu 等等。
不推荐
1 2 |
.fw-800 {font-weight:800;} .red {color:red;} |
推荐
1 2 |
.heavy {font-weight:800;} .important {color:red;} |
合理的避免使用 id
id 只有在两种情况下才会用到。1、锚点；2、用于 js
不要给 id 设置任何的 css。
优化你的 css 选择器
当构建选择器时应该使用清晰，准确和有语义的 class 名。尽量减少使用标签选择器。如果你只关心你的 class 名，而不是你的代码元素，这样会更容易维护。
不推荐
1 2 3 |
div.content > header.content-header > h2.title { font-size: 2em; } |
推荐
1 2 3 |
.content > .content-header > .title { font-size: 2em; } |
尽可能的减少选择器的层级
在写选择器时，要尽可能的减少层级，一般 2~3 层，最多 4 层。
缩写属性
css 提供了各种缩写属性（如 font 字体）应该尽可能使用，即使在只设置一个值的情况下。使用缩写属性对于代码效率和可读性是有很有用的。
不推荐
1 2 3 4 5 6 7 8 |
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; |
推荐
1 2 3 |
border-top: 0; font: 100%/1.6 palatino, georgia, serif; padding: 0 1em 2em; |
0 和 单位
省略 0 值后面的单位。不要在 0 值后面使用单位，除非有值。
不推荐
1 2 |
padding-bottom: 0px; margin: 0em; |
推荐
1 2 |
padding-bottom: 0; margin: 0; |
十六进制表示法
在可能的情况下，使用 3 个字符的十六进制表示法。颜色值允许这样表示，3 个字符的十六进制表示法更简短。另外始终使用小写的十六进制数字。
id 和 class 的分隔符
使用中划线（-）分隔 id 和 class 中的单词。虽然它很不方便的让你双击选择，但是它可以增强理解性。另外属性选择器也能识别中划线（-）[attribute|=value]，所以最好坚持使用中划线作为分隔符。
不推荐
1 2 |
.demoimage {} .error_status {} |
推荐
1 2 |
#video-id {} .ads-sample {} |
hacks
虽然 hacks 能够很方便的解决浏览器之间的兼容问题，但是我们还是不要使用 hacks，尽量从根本上解决问题，比如改变结构等等。
声明顺序
这是一个选择器内书写 css 属性顺序的大致轮廓，为了保证更好的可读性。作为最佳实践，我们应该遵循以下顺序：
- 结构性：
- 定位：
position|z-index|top|right|bottom|left|clip - 布局：
display|float|clear|visibility|overflow|overflow-x|overflow-y - 尺寸：
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|border-radius|box-shadow|border-image - 背景：
background|background-color|background-image|background-repeat|background-attachment|background-position|background-origin|background-clip|background-size - 颜色：
color|opacity - 字体：
font|font-style|font-variant|font-weight|font-size|font-family - 文本：
white-space|text-align|text-indent|vertical-align|line-height - 文本修饰：
text-decoration|text-shadow - 列表：
list-style|list-style-image|list-style-position|list-style-type - 内容：
content - 用户界面：
text-overflow|outline|cursor|zoom|box-sizing|resize - 多列：
columns - 伸缩盒：
flex - 变换，过渡，动画：
transform|transition|animation
- 边框：
声明结束
为了保证一致性和可扩展性，每个声明应该用分号结束。
css 引号
属性选择器或属性值用双引号（””），而不是单引号（’’）括起来。url 的值不要使用引号。
不推荐
1 2 3 4 5 6 7 |
@import url('//cdn.com/foundation.css'); html { font-family: 'open sans', arial, sans-serif; } body:after { content: 'pause'; } |
推荐
1 2 3 4 5 6 7 |
@import url(//cdn.com/foundation.css); html { font-family: "open sans", arial, sans-serif; } body:after { content: "pause"; } |
css 中文字体
css 中文字体可以用 unicode 格式来表示，比如“宋体”可以用 \5B8B\4F53 来表示。具体参考下表：
| 中文名 | 英文名 | unicode |
|---|---|---|
| 宋体 | SimSun | \5B8B\4F53 |
| 黑体 | SimHei | \9ED1\4F53 |
| 新宋体 | NSimSun | \65B0\5B8B\4F53 |
| 楷体 | KaiTi | \6977\4F53 |
| 微软正黑体 | Microsoft JhengHei | \5FAE\x8F6F\6B63\9ED1\4F53 |
| 微软雅黑 | Microsoft YaHei | \5FAE\8F6F\96C5\9ED1 |