深度剖析HTML的语意和与其相关的前端框架

关于语义

语义研究的是标志与符号之间的关系，以及它们所代表的意义。在语言学中，它主要是研究这些标志（如单词，短语，或者声音）在语言中的意义。而在前端开发领域，语义主要涉及的是HTML元素、属性和属性值（包括像Microdata这样的扩展）所约定的意义。这些在规范中常用的正式约定语义，可以帮助程序（以及后来参与开发的人）更好地理解一个网站各方面的信息。然而，即使这些元素、属性和属性值的语义是正式化的，它们依然得服从于开发者的适应程度以及共同选择的结果。这使得正式的约定语义也可能会在今后被修改（而这正是HTML设计原则之一）。
区分不同类型的HTML语义

遵守编写“语义化的HTML”这个原则，是现代专业前端开发的基础之一。绝大多数的语义都与当前或预期的内容性质有关（如：h1元素，lang属性，type属性的email值，Microdata）。

然而，并非所有的语义都需要以内容为导向。类名不能“无语义”。不管是用什么名字命名，它们都必须要有意义与目的。类名的语义可以和那些HTML元素不同。我们可以借助HTML元素、某些HTML属性、Microdata等所具有的“全局性”语义，然后利用网站或应用的“局部性”特定语义加以区分，这些特定语义通常包含在属性值中，比如class属性。

尽管在HTML5规范的class属性这一章节中重申了这个假定的“最佳实践”…

    …鼓励开发者使用class属性值描述实际内容，而不是描述期望展现的内容。

…并没有什么内在的原因非这样做不可。事实上，当这种方法在大型网站或者应用中运用时，它往往会成为一种障碍。

    HTML元素和其它属性已经提供了内容层的语义
    对于机器或访问者来说，类名所能透露的有用的语义信息非常少，甚至没有。除非它是已经约定的那一小部分名称（机器同样可读） —— Mircoformats
    类名的主要用途是成为CSS和JavaScript的钩子。如果你不需要为你的页面添加表现和行为，那么你或许不必在你的HTML里添加类名
    类名应该为开发者传达有用的信息。当你阅读一个DOM片段时，它将有助于理解某个类名的具体作用。尤其是在多人协作的开发团队里，与HTML组件打交道的可不光只有前端开发者。

举一个非常简单的例子：

当Twitter Bootstrap刚刚问世的时候，我重写了已编译的CSS，以便更好地与手动操作的文件比较大小。在最小化所有的文件之后，手动操作的CSS文件比预处理程序输出的小10%。但是当所有的文件都通过gzip压缩后，预处理程序输出的CSS文件比手动操作的小了5%。

这强调了比较HTTP压缩后文件大小的重要性，因为减少的文件大小并不能说明全部问题。它暗示了有经验的CSS开发者在用预处理程序时不必太过关注编译后的CSS中一定程度的重复，因为它将在HTTP压缩后变得更小。通过预处理程序处理更易于维护的CSS代码所带来的好处，要胜过关注原始CSS和压缩后输出的CSS的美观或文件大小。

在另一个实验中，我从线上扒了一个60KB的HTML文件（由很多可重用的组件组成），并删除了它的每一个class属性。这样处理之后，文件大小减小到25KB。当原始文件与扒下来的文件都通过gzip压缩后，它们的大小分别变为7.6KB和6KB——只相差1.6KB。自由使用class所导致的实际文件大小的结果已经不值得再去强调了。