这期内容当中小编将会给大家带来有关怎么在CSS中利用methodologies实现模块化，文章内容丰富且以专业的角度为大家分析和叙述，阅读完这篇文章希望大家可以有所收获。

从网站建设到定制行业解决方案，为提供成都网站设计、成都网站制作服务体系，各种行业企业客户提供网站建设解决方案，助力业务快速发展。创新互联将不断加快创新步伐，提供优质的建站服务。

一、什么是 CSS methodologies

CSS methodologies，可以理解成 设计模式，也可以理解成 css 规范，市面使用情况如下图：

二、常见的 CSS methodologies

1、OOCSS

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

（1）规则

1、不要使用 ID 用 Class

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

2、结构和样式分离

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

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

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

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

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

class="btn btn-default"

class="btn btn-green"

class="btn btn-red"

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

3、容器和内容分离

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

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

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

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

（2）利弊

好处：

• 模块化，可重用

• 减少代码重复

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

缺点：

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

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

（3）实例

Bootstrap 就是用的 OOCSS。

例如：

html

 
         
            1
            2
            3
        
        
            login
            register