web前端入门到实战：CSS 类名范式一览

今天我们来回顾几种常见的 CSS 的类名范式

• OOCSS
• BEM
• SMACSS
• ACSS

CSS 的特性不断增强，预编译框架也层出不穷，但是即使使用 cssModules 这样的 scope 技术，我们仍需要一些范式来指导我们在局部更规范合理地给类取名字。

上面介绍的范式都不是什么新鲜事物，有的甚至相当有历史了，回顾他们主要目的在于帮助我们抬起头来重新想一想当初为什么我们选择了某一种范式（比如 BEM）来进行我们的类命名：

不同的范式的侧重不同，有些范式可以相互兼容组合，有些不能。他们大都是为了达成以下目标诞生的：

• 避免类名冲突
• 准确传达语义
• 提高样式复用率，减少代码量
• 实现样式拆分，控制各部分的影响面

而同时它们也大都就以下几点达成了共识：

• 避免使用 id 和标签作为样式锚点
• 避免使用 !important
• 避免关联标签与类名，如：div.header 或 h1.title
• 避免使用层级选择器，如：.sidebar .title

下面我们就来逐一回顾这些 CSS 范式，在文末我们还会附赠两个控制选择器权重的小技巧：

OOCSS

Object-oriented CSS，即「面向对象的 CSS」

OOCSS 提倡对类进行必要的分离，以提高复用性，减少 CSS 代码量。这种范式主张将样式类