#CSS命名真是件难事 原文：Naming CSS Stuff Is Really Hard
这不是一篇关于CSS结构的文章，当然也不是关于命名的相关规范。相反，让我们来谈谈我们怎么调用元素。他们自己的名称。The things we use to link blocks of styles to the elements they're associated with（我们使用连接块的东西他们与风格的元素）。
10个人里面有9个人会同意：在写CSS的时候，给需要的元素命名是最纠结的部分（译者：原文difficult, 认为命名其实可以很随意，但是想命好却很难、很纠结）。这是因为我们并不能预知未来（未来的需求变更）。一个CSS类名在某天或许很适合，但当设计更改，在某天这个就是错误的了。然后我们又要去重改我们的代码结构、样式来满足当前的需求。是不是感觉很讨厌呢？
我们该如何去解决这种问题？以使所选的名字尽可能的保持稳定。
我们通常可以通过下列三种方式之一来进行命名（译者想法：根据应用需求，可以在一个项目内混合使用，当然最好是固定的模块使用，做到有序可循）：
- 功能性的命名
- 基于内容的命名
- 表现性的命名
样式名在一个给定的类别（规则）中，更具有可维护性的特点。如若我们在命名时遵循这些原则那么将事半功倍...
##实用命名
<button class="positive-button">Send Message</button>一个实用的样式名看起来会像是这样子的positive-button，important-text或者selected-tab。这些元素的样式都是基于它们的功能或者意思。这种样式名和所属的内容具有很强的关联性，当应用样式的时，就如它的名字一样会是什么样子。功能性的命名正因如此。
样式和它们所属的元素之间正因有这层固有的关系，因此这些样式更改的几率会很少。或者如果你改动了一个名为positive-button元素的外观，那么你可能会需要调站点里所有基于此的每一个元素（工程浩大啊！）。如果你的设计师考虑的是如何改动这个名为positive-button的按钮，而非设置菜单里面的一个Add User（添加用户）的按钮，那么你在一个很开放的地方，你已经是站在系统（大局）层面上来考虑问题而不是单纯某个页面了。
实用的样式名是很不错的。当允许的时候，这可能是你想写的方式。不过这里有个问题：实用的样式名总不是总是可行的。
设计并不是总是有条理性。我们可以很容易给一个在交谈过程中出现的按钮起一个实用的样式名。大部分时候，它们的功能接近于它们的所赋予的样式。但是对剩余的99%样式做同样的事则不是那么容易了。有时候那个块需要一个内阴影仅因它看起来不错，又有些时候那个图标需要增加一个鼠标划入效果仅因为会精致很多。再有些时候，那些文本需要是橙色的，呃，好吧，因为是它们就是橙色的。并不是每一个网站的视觉的背后都有一套功能性的命名方案，当然，这没关系。
所以，接下来该怎么办呢？好吧，现在我们面临一些选择。有时候我们也会有卡壳想不出好的功能性的命名的时候，这时，我们也可以基于它的内容或者它的表现形式来命名的。它们对可维护性都有不同的影响（译者：基于内容的要考虑后期更改内容的问题，而基于表现形式的后期更改表现形式也是要考虑的问题）。
##基于内容的命名
<button class="submit-button">Send Message</button>基于内容的命名是它们的样式名直接反应了它们所包含的内容。如果你曾经看到类似这样过的样式名submit-button，intro-text，或是profile-photo，你看到就是基于内容的命名。
这些样式名感觉很直白。它们很好的分离了你的内容和样式。理论上来说，这可以使你能够完全重新设计页面的情况下，感觉你没有碰到HTML一样，就像CSS禅意花园一般。是不是看起来遥不可及？
现在坐下来想想，有这样的疑问：“这对我有什么用？”
我还未曾被要求过网站改版的时候不许改动原有HTML，可能你还没有机会接触到。当然，有些HTML是和后台系统集成在一起的，也因此你失去了对它们的控制，chances are you'll need to write some less-than-ideal hacky CSS to make design changes.记住，CSS禅意花园更多的只是一个展示CSS可维护性的例子,如若必须这样，不要仅用CSS去做。
如果你参与小型站点的制作，那么基于内容的命名方式是个不错的选择。但随着你的站点的扩大增长，这种方式变得越来越不适用，对样式的复用不再方便。假如你的login-button以及你的submit-button看起来一样的呢？你的CSS如何去呈现？避免重复一个样式你需要把选择器加逗号分开，或者用预处理里的extend功能。这些方式都很难去组织和适应一个大型项目。
如果还有个更好的的方式来这些样式...
##表现性的命名
<button class="green-button">Send Message</button>表现性的命名是描述一个看起来像是green-button或者big-text或squiggle-border的元素。名字本身表示的是应用该元素的样式就是这样的。
这种方式有助于代码的重用。它们不关心它们是用在一个产品标题上，一个用户名或者一个页面的标题。它们只需要把那个字变大或者加粗。这同时也带来了优雅缩放的好处。正如你在开发一个新的部件，你可以攫取已经存在的样式然后直接放到你的新代码上。你不用担心在现有的结构中放入这些样式，因为你没有加入新的样式。
表现性的命名具有很强的自我描述。开发人员检查代码的时候可以推断出这个是一个round-image而不是profile-photo。表现性的命名也引起了关于可维护性的问题争议。因为它模糊标记和标签之间的界限，设计的更改也将涉及到HTML的更改。如果你料到在项目中会是个问题，请谨慎使用。
##但是，这并不具有语义化！
表现性的命名方式口碑不佳，也因如此，多数人都尽量避免使用这种方式，因为它们并不具备语义化。然而，这只能说是一个传说，Nicolas Gallagher也打破了这一说法。"区分语义化的HTML和语义化的样式名是很重要的。" Nicolas说的好："
The principle of writing "semantic HTML" is one of the foundations of modern, professional front-end development. Most semantics are related to aspects of the nature of the existing or expected content...
However, not all semantics need to be content-derived. Class names cannot be "unsemantic". Whatever names are being used: they have meaning, they have purpose. Class name semantics can be different to those of HTML elements."
##概括
功能性的命名方式通常是你最好的选择，当你可以用它们的时候，尽管用就是了。如果你想不出一个固定的实用的名字，考虑下项目的性质以及它将来如何发展。经验之谈：基于内容的命名方式更适合小型的站点项目，而表现性的命名方式则适合稍大的站点项目。
开发者可以了解到关于这方面的东西，没人想让项目变得难以维护，but everybody has different ideas of how to keep that from happening–particularly so with class names.It's helpful to think about the nature of the type of class names you're using（这对于思考你所使用的类名的性质类型很有帮助） and question how well it lines up with the goals of your project.