你有没有注意到，没有人会写"我们如何命名我们的ruby变量在公司X“博客?没人会用"我将这两种方法命名策略结合起来，突然间我的JavaScript变得可维护了!然而，当涉及到CSS时，开发人员都在考虑命名策略。我们歌颂BEM, SMACSS, OOCSS, SUIT，或任何其他本周流行的大写字母。这是为什么呢?

与作为平台的Web的其他部分一样，CSS已经被强制组合在一起，不仅仅是显示它最初设计用于的静态文档。同样，与Web的其他部分一样，CSS也在不断发展，以满足我们对它的许多新需求，包括一些新功能媒体查询，动画和flexbox这使得语言本身更加强大，处理器就像少，萨斯和PostCSS使编写复杂的样式更容易。然而，从一开始，该语言的一个基本部分就没有改变，它是我们痴迷于命名的根源:CSS有一个范围问题¹．如果我创建一个名为大，我必须确保我的应用程序或它的依赖没有使用其他CSS大意味着别的东西。之后，如果我想改变或移除我的大类，我必须梳理我的标记，以确保我理解它当前使用的所有位置。

当时和现在

在1996年，对于一个作者创建一个文档来说，CSS代表了一个巨大的进步。通过允许作者从内容中提取所有样式，并将其放在单个样式表中，内容和样式都变得更具可读性，并可以在文档的不同部分共享一致的视觉处理。你甚至可以使用别人写的样式，只要你确保它们不与你自己的相冲突。

然而，20年后，我们不再是撰写单一文档的单一作者。我们一大群人巨大的应用程序的编写,现在我们不只是竞争与比特的CSS类名我们贴的一些论坛,但是从许多图书馆我们拉从凉亭或npm,更不用说我们的队友和过去的自我在应用程序的其他部分。尽管如此，我们管理来自所有这些不同来源的样式的方法本质上仍然等同于“把它们都扔到一个大文件中，并希望不会发生冲突。”

名字有什么关系?

如果我想确定我的想法大并不与。的观点相冲突大从我刚刚安装的闪亮的新小部件，有任意数量的naïve选择器嵌套方法，我可以尝试(比如.my-container-class .large)，但在规模上，这些解决方案是可行的重构和性能危险，如果对方大定义没有封装在它自己的容器类中。这就是我们的字母命名方法发挥作用的地方。

我们不是试图强迫CSS的内置机制来限定选择器的范围，而是自己承担开发人员的责任，确保名称从一开始就不会重叠。我们发明了所以许多精心制作的不同的方法他们带来了真正的好处当您知道您的类名是上下文独立的并且唯一命名的时候，就不需要精确地找出它们在哪里被使用了，重构也就不那么可怕了。

然而，这些命名方法也增加了认知开销，它们使标记和样式表混乱，最终它们依赖于人类做正确的事情，所以它们仍然容易出错。即使如此，我们仍然坚持希望next__big——事，或者完美Combination-of-methodologies这将是让一切变得简单的灵丹妙药。然而。然而,……

我可以在GitHub上找到任何不成熟的jQuery插件，有10个不同的为调用它们的迭代变量的循环我，但它们并不相互冲突，最重要的是，它们不会阻止我拥有自己的变量也不客气地叫我．在大多数成熟的语言中，JavaScript变量是定义它们的区域的局部变量²，所以不会有泄露的危险，而且只需要对它们进行专门的命名，以便在它们自己的特定上下文中有意义。

为什么CSS不能像那样?

多亏了CSS模块项目,它可以!“一切都是全局的”的负担从开发人员转移到了工具上，通过转换类名以确保它们是惟一的，有效地使每个CSS文件具有独立的名称空间。这与Angular、React和Ember等面向组件的UI框架很好地对齐，在这些框架中，你想要应用的许多样式都是针对特定组件的。

但是，共享样式呢?CSS提供的关于内联样式的最有价值的东西之一是一种一次性定义样式并在不同的地方应用它的方法，完全失去它将会适得其反。对于这种情况，我们基于ES6模块系统建立的模式，通过导入其他模块的名称来显式地选择共享。

例如，我可以把我的大班从以前的一个排版模块中，定义一些颜色常量颜色模块，然后使用它们来定义特定组件中的头文件的样式:

/ *组件/ my-component.css * /@ value的原色，辅助色彩从“. . / colors.css”；
.header｛组成：大从“. . / typography.css”；颜色：的原色；边界底部：1 px固体辅助色彩；｝

我的头类的上下文被约束组件模块，我显式地将它导入到任何我想在CSS或JS中使用它的范围。正因为如此，才有可能静态地确定每个类的使用位置，从而实现消除死代码和无风险重构等功能。

从原始类名到保证唯一的类名的映射可以作为每个模块的JS对象使用。从这里开始，将这些类应用到您的标记就可以归结为您所选择的UI框架的细节。

模块化CSS用于雄心勃勃的应用

在Salsify，我们对CSS模块项目的承诺感到兴奋，我们渴望探索它启用的模式和它打开的可能性。我们也一个Ember.js商店，所以自然我们的第一步是建立一个插件，有创意的命名ember-css-modules．该插件支持使用ember风格的CSS模块，允许您使用局部类元素或组件的属性:

｛｛!——模板/部件/组件。哈佛商学院——}}< div局部类＝“头”>标题< / div >

该插件仍然是一个正在进行的项目，但它已经完全功能，所以试一下！我们很想听听你的想法。

进一步的阅读

• 格伦Maddern的欢迎来到未来讨论项目的目标和具体特性
• 乔什·约翰斯顿的反思过去的将模块作为选择器嵌套的解决方案进行更详细的检查
• 用于工作的演示Browserify，Webpack和JSPM如果你不喜欢余烬