BEM

在较小的宣传册网站上，你如何组织你的风格通常不是一个大问题。你进去，写一些 CSS，或者甚至一些 SASS。您使用 SASS 的生产设置将它们编译成一个单独的样式表，然后将它们聚合在一起，以便将来自模块的所有样式表放入一个整洁的包中。

然而，当涉及到更大、更复杂的项目时，你如何组织你的代码至少在以下三个方面是效率的关键: 它影响你写代码的时间，你需要写多少代码，以及你的浏览器需要加载多少代码。当您与主题团队一起工作时，并且当高性能是必不可少的时候，这就变得尤为重要。

对于使用遗留代码的长期项目也是如此(请阅读“如何使用 Sass 和 SMACSS 来缩放和维护遗留 CSS”ーー其中有一些不错的 SMACSS 和 BEM 混合)。

方法

有很多方法可以减少 CSS 的占用，组织程序员之间的合作，维护大型的 CSS 代码库。这在 Twitter、 Facebook 和 GitHub 这样的大型项目中是显而易见的，但其他项目通常很快就会发展成某种“巨大的 CSS 文件”状态。

• OOCSS - 用 CSS“对象”分离容器和内容
• SMACSS - 样式指南-用五种类别的 CSS 规则来编写 CSS
• SUITCSS - 结构化类名和有意义的连字符
• Atomic原子式ーー将样式分解成原子式或不可分割的样式

为什么是 BEM 而不是其他？

无论您选择在项目中使用哪种方法，您都将受益于更结构化的 CSS 和 UI 的优势。有些风格不那么严格，而且更灵活，而另一些风格在团队中更容易理解和适应。

我选择 BEM 而不选择其他方法的原因在于: 它比其他方法(比如 SMACSS)更容易混淆，但是仍然为我们提供了我们想要的好的架构(比如 OOCSS)和可识别的术语。- Mark McDonnell，可维护 CSS 与 BEM

Blocks, Elements and Modifiers