CSS的组织和管理

CSS的组织和管理

原文链接 - 从BEM谈大型项目中CSS的组织和管理

BEM

BEM是一种CSS命名方法。
* B - Block，块，一组独立的模块，比如菜单。
* E - Element，元素，块的组成部分，比如菜单项。
* M - Modifier，修饰符，用于修饰块或元素的样式或行为，比如菜单项选中。

下面从代码来看BEM命名法和传统命名法的区别：

<!-- BEM命名法 -->
<ul class="menu">
    <li class="menu__item menu__item--selected">Menu Item1</li>
    <li class="menu__item">Menu Item2</li>
    <li class="menu__item">Menu Item3</li>
</ul>

<!-- 传统命名法 -->
<ul class="menu">
    <li class="item selected">Menu Item1</li>
    <li class="item">Menu Item2</li>
    <li class="item">Menu Item3</li>
</ul>

很容易看出，BEM命名法相对传统命名法要复杂些，但是其结构上的优势可以避免过多选择器带来的复杂属性的级联问题。
BEM命名法使整个块的逻辑联系更加紧密。

OOCSS

OOCSS - 面向对象CSS，是把面向对象的思想运用到CSS的一种方法。

这种方法包含两条原则：
* 结构与样式分离
* 容器与内容分离

这两条原则的目的是将主要关注点集中到样式外观，而不是DOM结构，提高CSS对象的可复用性。

面向对象的理念如模块化、单一功能原则、关注点分离等也在CSS中适用。

下面通过多媒体对象 media 来看看OOCSS：
* media - 最外层的 CSS 类，用来表明这是一个多媒体对象。
* img - 表示出现在左侧的链接、图片或视频对象。
* bd - 表现出现在右侧的主要内容。
* imgExt - 表示额外的链接、图片或视频对象，出现在 bd 表示的主要内容的右侧

<div class="media">
    <a href="http://oocss.org/" class="img">
        <img src="https://placehold.it/50x50" />
    </a>
    <div class="bd">OOCSS media object</div>
</div> 

SMACSS

SMACSS - 可扩展和模块化CSS，它是把CSS样式规则分成不同的类别。

比如，基础样式，布局样式，模块样式，状态样式，主题样式等等类别。

而不同的类别也有不同的命名方式，比如布局样式含有“l-”前缀等。

ACSS

ACSS - 原子化CSS

它认为关注点分离原则会导致代码冗长、琐碎，提倡将CSS样式尽可能的打散到单条样式。

比如CSS类 M(10) 对应着 Margin: 10px;

小结

首先需要一个基准的 CSS 样式表。这可以使用 Normalize.css 和 Bootstrap 4 中的 Reboot。
然后是进行模块划分。对每个模块中采用 BEM 来作为命名规则。在现在的 Web 项目中，一般不直接编写 CSS，
而是使用 SASS 或 LESS 这样的 CSS 预处理语言来编写。 – 原作者

这里了解到BEM, OOCSS, SMACSS, ACSS四种组织和管理CSS的思想，在实际项目中我会灵活地使用这些方法。

在我的GitHub中有一个repo叫做 basedBootstrap，
里面是自己基于Bootstrap整理的scss文件结构模板。