一、什么是 CSS methodo LOG ies
CSS methodologies ，可以理解成 设计模式，也可以理解成 css 规范，市面使用情况如下图：
上图来 源 ： 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对ht ML 的依赖。
2、结构和样式分离
虽然 早期 html 和 css 实现了结构和样式的分离，但 css 内部同样存在两种类型的样式：
结构样式（例如长 宽 、 距离 ） 皮肤样式（例如颜色、阴影）所以 OOCSS 建议把这两种样式拆开。
比如有三种按钮， 白色 的/绿色的/ 红色 的，可分别定义为：
class=" BT n btn-default" class="btn btn-green" class="btn btn- red "
如果你真的有很多个具有紫色按钮，则可以创建一个单独的紫色按钮类。这样可以大大减少CSS代码的数量。
3、容器和内容分离
内容绝不 应该 限制于特定的容器，为了重用，得分离开。
# 错误写法
.header .action {
}
.header .action .lo gin {
}
.header .action .register {
}
# 正确写法
.header{
}
.action{
}
.login {
}
.register {
}
继承选择符是有用的，它可以减少因相同命名引发的样式冲突（常发生于多人协作开发）。但是，我们不应过度使用。
（2）利弊
好处：
模块化，可重用 减少代码重复 提高 可拓展性、可维护性、 可读性缺点：
虽减少了深层的嵌套选择器，但是多了更多的类 如果代码中没有大量重复的视觉模式，比如一些小项目，则应 用O OCSS可能不切实际（3）实例
Bootstrap 就是用的 OOCSS。
例如：
html
<div class='header'>
<ul class='menu'>
<li class='menu -i tem active'>1</li>
<li class='menu- IT em'>2</li>
<li class='menu-item'>3</li>
</ul>
<div class="action">
<button class="btn btn-login">login</button>
<button class="btn btn-register">register</button>
</div>
</div>
css：
.header {
}
.menu {
}
.menu-item {
}
.item.active {
}
.action {
}
.btn {
}
.btn-login {
}
.btn-register{
}
2、BEM
BEM - Block Element Mo DF ier（块元素编辑器）。诞生于2009年。
（1）内容
BEM 包括三个：
Block - 块，如 header Element - 子元素，如 块menu 下的 item Modfier - 状态，如. current 、.active（2）规则
1、命名规范
- 中划线 ：仅作为连字符使用，表示某个块或者某个子元素的多单词之间的连接记号。 __ 双下划线：用来连接块和块的子元素。 -- 双中划线：用来描述一个块或者块的子元素的一种状态。在某些 公司 （如腾讯）的规范里，双中划线被单下划线（ _ ）替代。
例如： .block-n am e__element--modifier
demo - html：
<div class='header'>
<ul class='header__menu'>
<li class='header__menu-item--active'>1</li>
<li class='header__menu-item'>2</li>
<li class='header__menu-item'>3</li>
</ul>
<div class="header__action">
<button class="header__btn--login">login</button>
<button class="header__btn--register">register</button>
</div>
</div>
demo - less:
.header {
&am p; __menu {}
&__menu-item {}
&__action {}
&__btn {
&--login {}
&--register {}
}
}
2、避免嵌套
BEM 最多只有 B+E+M 三级。
所以请避免 .block__el1__el2 的格式，直接 改为 .block_el2 。
这里的 block 就很像命名空间了。
（3）利弊
好处：
层级关系一目了然，具有可读性 不需要依靠层级选择器来限定约束作用域，可避免跨组件的样式污染。缺点：
命名方式长而难看，书写不便（可以通过 less/sass 来 简化 书写） 在较小的组件中，BEM 格式可能显得鸡肋。但对于公共的、全局性的模块样式定义，还是推荐使用 BEM 格式。（尤其对外发布的公共组件）其他：
BEM 命名会使得 Class 类名变长，但经过 gzip 压缩后这个 带宽 开销可以忽略不计。
BEM是不允许用标签选择器的，哪怕最 简单 的 li 也得写成 .menu-item。
（4）实践
饿了么的 框架elementUI 就是BEM的一种，或者你也可以研究网站 company.yandex.ru/ 。
3、SMACSS
SMACSS （Scalable & Modular Arch itecture CSS ，即 CSS 的可扩展性和模块化架构）。Jonathan Snook 于 2011 年提出， 当时 他在雅虎工作，为 Yahoo M ai l 编写 CSS。
（1）规则
1、Categorizing CSS Rules（CSS 分类规则）
它将 CSS 分为5个不同的类别：
Base 基本规范
例如 CSS Reset 和 CSS Normalize。
Layout 布局规范
例如左右分栏、栅格系统。
Module 模块
例如一个产品列表，一个导航条。可重用。
stat e 状态规范
例如选中状态。
Theme 样式规范
2、N ami ng Rules（命名规则）
为类名添加 前缀 ：
Base 不需要前缀。而且是用标签而不是 class 和 ID。
l- 用作 Layout 的前缀： l-inline m- 用作 Module 的前缀： m-callout 。但也可以 不用 前缀。 is- 用作 State 的前缀： is-collapsed Theme 一般会新建个 theme.css，用之前存在的类名。如果想用单独的类名，可用 theme- 前缀。例子：
<div class="l-box m- PR ofile m-profile--is-pro-user"> < img class=" ;m -avatar m-profile__image" /> <p class="m-profile__bio"> .. .</p> </div>
（2）实例
在线 demo： https://codepen.io/savemuse/pen/gWVpvd
4、 Atomic CSS
Atomic CSS 也是雅虎提出的，可以从字面 意思 理解成 原子 CSS 。
（1）示例
<div classname ="P(10px) M(20%) Pos(f) Start(50%) Bgc(#fff)" />
会有专门的 Atomic css 工具，帮助将上面 html 中的 class name 解析成 正常 的 css。（略）
（2）利弊
好处：将 CSS style 最小元件化，重用性 最大化 。
坏处：这根本就是在写 inline -s tyle，只是我们用 class name 的方式來表示而已。
（3）总结
这种做法真的很激进。我暂时无法接受。
三、总结
抛开激进的Atomic，我对剩下的 OOCSS / BEM / SMACSS 有如下建议：
他们各自的思想有互补也有冲突，在实际开发中可以有取舍的使用
他们都可以结合 CSS 预处理器 （如 less/sass ）获得更好的效率
把上文分别介绍他们的好处列举在一起对比汇总，发现他们解决的核心问题就是：模块化
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。
@H_921_ 360 @
总结
以上是 为你收集整理的 运用CSS methodologies去实现模块化的方法示例 全部内容，希望文章能够帮你解决 运用CSS methodologies去实现模块化的方法示例 所遇到的问题。
如果觉得 网站内容还不错， 推荐好友。
查看更多关于运用CSS methodologies去实现模块化的方法示例的详细内容...