CSS最佳实践

结构组织

css
 |-[业务类文件夹]
 |-[通用类-样式重置].css
 |-[通用类-公用组件].css
 |-[通用类-ie兼容].css

css样式排序

• 显示与浮动（Display & Flow）
• 定位（Positioning）
• 尺寸（Dimensions）
• 边框相关属性（Margins、Padding、Borders、Outline）
• 字体样式（Typographic Styles）
• 背景（Backgrounds）
• 其他样式（Opacity、Cursors、Generated Content）

元素单位

1. 尽量设置相对尺寸
2. 只有在可预知元素尺寸的情况下使用绝对尺寸
3. 使用 rem 设置字体大小

选择器

六种基础选择器：

• ID 选择器（如 #page_content{}）
• 类选择器(如 .page-content-title{})
• 属性选择器（如 a[href="http://www.google.com"]{}）
• 伪类和伪对象选择器（如 :hover{}、::after{}）
• 标签类型（如 div{}）
• 通配符选择器（如 body *{}）

组合选择器：

• 后代选择符（如 .page .title{}）
• 子选择符（如 .page>.title{}）
• 相邻选择符（如 .page+.title{}）

最佳实践：

1. CSS样式中尽量不要使用ID选择器。
2. 减少子选择器的层级。
3. **使用组合的CSS类选择器。**面向对象编程一条原则：“多组合，少继承”。

CSS代码格式

• 用两个空格来代替制表符（tab） – 这是唯一能保证在所有环境下获得一致展现的方法。
• 为选择器分组时，将单独的选择器单独放在一行。
• 为了代码的易读性，在每个声明块的左花括号前添加一个空格。
• 声明块的右花括号应当单独成行。
• 每条声明语句的 : 后应该插入一个空格。
• 为了获得更准确的错误报告，每条声明都应该独占一行。
• 所有声明语句都应当以分号结尾。
• 对于以逗号分隔的属性值，每个逗号后面都应该插入一个空格
• 不要在 rgb()、rgba()、hsl()、hsla() 或 rect()值的内部的逗号后面插入空格。这样利于从多个属性值（既加逗号也加空格）中区分多个颜色值（只加逗号，不加空格）。
• 对于属性值或颜色参数，省略小于 1 的小数前面的 0（例如，.5 代替 0.5；-.5px 代替 -0.5px）。
• 十六进制值应该全部小写，例如，#fff。在扫描文档时，小写字符易于分辨，因为他们的形式更易于区分。
• 尽量使用简写形式的十六进制值，例如，用 #fff 代替 #ffffff。
  为选择器中的属性添加双引号，例如，input[type=“text”]* 。只有在某些情况下是可选的，但是，为了代码的一致性，建议都加上双引号。
• 避免为 0 值指定单位，例如，用 margin: 0; 代替 margin: 0px;。

css实践

class命名:

• class 名称中只能出现小写字符和破折号
• 避免过度任意的简写。.btn 代表 button，但是 .s 不能表达任何意思。
• class 名称应当尽可能短，并且意义明确。
• 使用有意义的名称。使用有组织的或目的明确的名称，不要使用表现形式（presentational）的名称。
• 基于最近的父 class 或基本（base） class 作为新 class 的前缀。

其他：

• 媒体查询（Media query）的位置：将媒体查询放在尽可能相关规则的附近。
• 当使用特定厂商的带有前缀的属性时，通过缩进的方式，让每个属性的值在垂直方向对齐
• 对于只包含一条声明的样式，为了易读性和便于快速编辑，建议将语句放在同一行。对于带有多条声明的样式，还是应当将声明分为多行。