英文原文：
About HTML semantics and front-end architecture
这是一篇我喜欢的思想，经验，理念，以及过去几年中我所试验的理念的集合。它覆盖了HTML语义，前端架构的组件和方法，类命名模式，和HTTP内容压缩。
我们不会停止探索
而我们一切探索的终点
将会到达我们出发的地方
于是我们第一次认识了这个地方。
T.S. Eliot — “小吉丁”
关于语义
语义是对标记与符号之间的关系，以及它们的含义的研究。在语言学中，这主要是对语言中的符号（如单词，短语，或声音）意义的研究。在前端web开发的上下文中，语义大多是与元素，属性，和属性值（包括像Microdata之类的扩展）的一致认同意义相关。这些认同意义通常在规范中被定义概念，它们可以帮助程序员（也就是人类）更好的理解网站中信息的不同方面。但是，即使是规范化以后，元素，属性，和属性值的语义还是受制于开发者对其的适应与吸收。这可能会导致后续对正式认同语义的修改（这也是一个HTML 设计原则）。
区别不同类型的HTML语义
编写“语义HTML”原则是现代专业前端开发的基础之一。大部分语义关于存在的本质属性或是期望的内容（例如h1element,langattribute,emailvalue of thetypeattribute, Microdata）。
然而，不是所有的语义都要源于内容。Class名不能是“非语义”（unsemantic）的。无论使用什么名字，都要有意义、有目的。Class名的语义可以和那些HTML元素不一样。 我们可以统一利用“全局”的语义命名HTML元素、某些HTML属性、微数据等等，以免和“本地”的网站/应用专属的常常包含在属性值内的语义相混淆，比如theclassattribute。
尽管在HTML5 specification section on classes 重复的认为“最佳的实践” 如下…
…作者鼓励用 [class attribute] 值来描述内容的显示，而不是描述的内容所需的表现值。
…没有内在的理由这样做。事实上，它往往是大型网站或应用程序工作时的一个障碍。
- 内容层语义已经担任HTML元素和其他属性。
- 类名很少或根本没有赋予语义有用的信息给计算机或浏览，除非它的一小部分（计算机可读）约定的名字 - 微格式的部分。
- 类名称的主要目的是为CSS和JavaScript设置钩子。 如果你不需要给你的web文档添加演示和行为，那么你可能不需要在你的HTML文件中使用classes。
- 类名应该提供有用的信息给开发商。当你读一个DOM代码段的时候，有助于了解一个特定的类的名字是要干什么，特别是在前期与多个开发团队，包括非HTML组件工作的人。
以这种非常简单的例子：
<div class="news">
<h2>News</h2>
[news content]
</div> 从上面的例子很明显的看出，类名news并没有告诉你任何内容。它没给你组件的组织结构的任何信息，它不能用于说明内容是不是“新闻”。类名的语义与内容的性质已经减少的关联，架构功能已经变小，或者也很容易让其他开发者使用。
内容无关的类名
另一种可选的方法是在设计中从重复结构和功能模式中派生类名的语义。大多数可重用的组件都带有与内容无关的类名。
我们不应该害怕在清晰明确的层级间建立联系，而不是让类名严格地反映特定的内容。这样做不会让类变得“没有语义”，它仅仅意味着它们的语义不是从内容中派生出来的。如果附加的HTML元素帮助创建鲁棒性强，柔软度大，可重用的组件，我们就不要害怕把这些元素包含进来。这样做也不会让HTML变得没有语义，它仅仅意味着你使用了刚好超过标记内容最小所需的元素。
前端架构
组件/模板/面向对象架构的设计宗旨就是开发出一套包含一系列不同类型的可重用组件。在规范的应用程序中，关于类名称的语义，由实用主义者们推动并服务他们的主要目的——提供有意义的，灵活的，可重用的关联供开发者使用。
可重用及可组合的组件
可伸缩的HTML/CSS大体上必须依赖于HTML内的层级，这样就可以创造可重用的组件。一个灵活且可重用的组件既不能依赖存在于DOM 树的某个部分，也不能需要使用特定的元素类型。它应该能适用于不同的编辑器并且很容易主体化。如果必要的话，多余的HTML元素（除了那些需要标记内容的元素）可以用来让组价更强壮。Nicole Sullivan所谓的媒体对象就是很好的例子。
组件可以很容易的组合受益于类型选择器的废止和支持class。下面的示例展示了btn组件与uilist组件的简易组合。问题是，指定.btn不如指定.uilist（这将覆盖共享属性），uilist组件需要一个锚标记作为子节点。
.btn { /* styles */ }
.uilist { /* styles */ }
.uilist a { /* styles */ }
<nav class="uilist">
<a href="#">Home</a>
<a href="#">About</a>
<a class="btn" href="#">Login</a>
</nav>
使用class来修饰子DOM元素是提高易用性、使用uilist来组合其他组件的一种方法。虽然这有助于减少指定规则，主要的好处是可以让你对任何类型的子节点应用结构化的样式。
.btn { /* styles */ }
.uilist { /* styles */ }
.uilist-item { /* styles */ }
<nav class="uilist">
<a class="uilist-item" href="#">Home</a>
<a class="uilist-item" href="#">About</a>
<span class="uilist-item">
<a class="btn" href="#">Login</a>
</span>
</nav>
JavaScript指定class
使用JavaScript指定class的形式的可以降低风险：组件的主题或结构的改变时破坏对其对应的Javascript。一种有效的方法是：Javascript钩子只使用js-*的特定class，并且一直保持。
<a href="/login" class="btn btn-primary js-login"></a>
这样做，你可以减少风险：组件的结构或主题改变时会无意中影响任何必需的JavaScript行为或复杂功能。
组件编辑器
组件通常具有与基础组件有些许差别的多种不同外观，比如，一个不同颜色的背景或者边框。有两种主要的模式被用来创建这些不同的组件。我称它们为“单类”模式和“多类”模式。
“单类”模式
.btn, .btn-primary { /* button template styles */ }
.btn-primary { /* styles specific to save button */ }
<button class="btn">Default</button>
<button class="btn-primary">Login</button>
“多类”模式
.btn { /* button template styles */ }
.btn-primary { /* styles specific to primary button */ }
<button class="btn">Default</button>
<button class="btn btn-primary">Login</button>
如果你使用了预处理器，就可以使用Sass的@extend功能，来缩减一些使用“单类”模式时所涉及的维护工作。可是，即使有预处理器的帮助，我仍然倾向于使用“多类”模式，和在HTML中增加编辑类。
本文中的所有译文仅用于学习和交流目的，转载请务必注明文章译者、出处、和本文链接。
2KB翻译工作遵照
CC 协议，如果我们的工作有侵犯到您的权益，请及时联系我们。
2KB项目（www.2kb.com，源码交易平台）,提供担保交易、源码交易、虚拟商品、在家创业、在线创业、任务交易、网站设计、软件设计、网络兼职、站长交易、域名交易、链接买卖、网站交易、广告买卖、站长培训、建站美工等服务
