一、什么是 CSS methodologies

上图来源：https://2019.stateofcss.com/technologies/

你可能在日常开发中并不会专门花时间去注意和了解 CSS methodologies，但随着你经验的积累，你可能会自己思考，或者阅读别人的代码、参考网上成熟的框架，这里面都或多或少的蕴含了一些 css methodologies 的闪光点。而下面要介绍的几种主流的 css methodologies，则可以帮你做到很好的总结和梳理。

二、常见的 CSS methodologies#

1、OOCSS#

面向对象的 CSS（Object-Oriented CSS，简称 OOCSS ），由 Nicole Sullivan 于 2008 年提出，这基于她在雅虎的工作。

（1）规则#

1、不要使用 ID 用 Class

直接使用class来设定样式，这样写不只是可以增加语义，同時也降低css对html的依赖。

2、结构和样式分离

虽然早期 html 和 css 实现了结构和样式的分离，但 css 内部同样存在两种类型的样式：

• 结构样式（例如长宽、距离）

• 皮肤样式（例如颜色、阴影）

所以 OOCSS 建议把这两种样式拆开。

比如有三种按钮，白色的/绿色的/红色的，可分别定义为：

Copy
class="btn btn-default"  class="btn btn-green"  class="btn btn-red"

如果你真的有很多个具有紫色按钮，则可以创建一个单独的紫色按钮类。这样可以大大减少CSS代码的数量。

3、容器和内容分离

内容绝不应该限制于特定的容器，为了重用，得分离开。

Copy
# 错误写法 .header .action { } .header .action .login { } .header .action .register { }  # 正确写法 .header{ } .action{ } .login { } .register { }

继承选择符是有用的，它可以减少因相同命名引发的样式冲突（常发生于多人协作开发）。但是，我们不应过度使用。

（2）利弊#

好处：

• 模块化，可重用

• 减少代码重复

• 提高可拓展性、可维护性、可读性

缺点：

• 虽减少了深层的嵌套选择器，但是多了更多的类

• 如果代码中没有大量重复的视觉模式，比如一些小项目，则应用OOCSS可能不切实际

（3）实例#

Bootstrap 就是用的 OOCSS。

例如：

html

Copy
    <div class='header'>         <ul