CSS最佳实践

结构组织

1
2
3
4
5
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)的位置:将媒体查询放在尽可能相关规则的附近。
  • 当使用特定厂商的带有前缀的属性时,通过缩进的方式,让每个属性的值在垂直方向对齐
  • 对于只包含一条声明的样式,为了易读性和便于快速编辑,建议将语句放在同一行。对于带有多条声明的样式,还是应当将声明分为多行。