扫二维码与项目经理沟通
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流
这期内容当中小编将会给大家带来有关怎么在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