无废话网页重构系列——（6）HTML主干结构：站点(site)、页面(page)

语义化概念：通过丰富的语义关系对数据进行逻辑化描述，便于数据人机可读、检索挖掘和共享交换，实现信息处理的自动化和智能化；即人类提供良好结构的、作为人能识别的数据给机器，让不同机器能准确高效的意会和处理数据反馈给人类。

语义化实现方案有多种，如RDF、RDFa、Microformats、Microdata等规范，虽其复杂性、数据模型、属性类型等特性不尽相同，但都支持HTML5语言，项目如有特定需求可采用相关规范，实现丰富的语义关系。本篇Web语义化仅从HTML5语言标准下的“标签语义”和“属性命名语义”两部分展开。

标签语义

Web重构工作主要是语义化排版文档信息，构建语义明确、结构清晰的文档，便于浏览器解析渲染、搜索引擎建立索引抓取页面，提升内容的交互性、可读性和可维护性，视觉呈现上即使没有引入样式，人还是能“愉快”的阅读主体内容，如标题就是标题、段落就是段落、列表就列表…

根据文档特征，在HTML 4.01规范中定义了大量的语义标签，如文本、列表、表格、链接、媒体对象、表单等范畴下的标签元素；在HTML 5中更为详细的规范化了文档特征，添加了新的标签元素用以更明确的定义和描述文档的结构，并且对所有元素按 Metadata、Flow、Sectioning、Heading、Phrasing、Embedded、Interactive 等属性重新定义了分类规则，如下图(来源：W3C/HTML 5.2 / 3.2.4.2. Kinds of content)：

合理使用语义标签，主要是分明层次嵌套、清晰标签职责。

属性命名语义

属性命名语义，主要是class、id、data-*等属性的命名，其中最主要的是class属性命名，主要有OOCSS、BEM、SMACSS、SUITCSS、Atomic等方案，各种方案都是意图通过样式命名让文档具备逻辑表达能力。OOCSS主要侧重样式的抽象、独立、封装与复用，BEM、SMACSS、SUITCSS主要侧重减轻样式对HTML层级结构嵌套依赖，Atomic主要侧重剥离具体样式表现的特性。

属性命名依赖于HTML结构，早期在项目中尝试过长命名、短命名方案，团队小、项目小都还可以定义与维护，在多人参与的一定规模的项目中，长命名kebab-case会变得很长很晦涩，短命名层级嵌套会变得越来越深，总有队友深怕会与他人产生冲突刻意为之。

属性命名具体实现建议：

采用BEM + OOCSS + Atomic + SCSS/LESS/Stylus/PostCSS组合方案
样式用属性使用.class，数据钩子使用#id
不用‘大小、颜色、方位、形状’等表象的词
JavaScript钩子属性名采用j_lowerCamelCase前缀加小驼峰方式

BEM规则可参考：

Block独立模块：中横线
Element子元素：俩下划线
Modifier模块状态：一个下划线
Block下的所有Element不考虑层级嵌套关系，扁平化处理都属于Block，即连续的__下划线只能出现一次

BEM实现为：

模块：.block
模块_状态：.block_modifier
模块__子元素：.block__element
模块__子元素_状态：.block__element_modifier

附上常用命名词：

用途	ClassName
主次	primary, secondary, accent, weak, bold, light 建议用于变量
大小	base, normal, regular, small, medium, large, xlarge, xxlarge, xxxlarge 建议用于变量
结构	site, page, topbar, header, footer, container, title, main, content, aside, pendant, section, module, wrapper, inner, row, column
导航	nav, navigation, navbar, menu, breadcrumb, prev, next, first, last, pagination, pager, forward, back, up
列表	list, item, group, panel
组件	alert, dialog, popover, modal, dropdown, tooltip, accordion, collapse, tabs, carousel, slide, media, card, colorpicker, timepicker, datepicker, datetimepicker, calendar, switch, select, radio, checkbox, transfer, upload, cascader, tree-select, label, badge, avatar, backtop, loading, spin, message, notification, overlay, steps, timeline, progress, scroll, rate, divider, spacer, gallery
页面	index, archive, detail, special, contact, search, about, forum
状态	default, toggle, active, current, cancel, checked, hover, focus, success, fail, warning, danger, info, error, close, on, off, in
常用	vertical, horizontal, btn, more, icon, attach

扩展阅读：

An Uber-comparison of RDFa, Microdata and Microformats

（本篇结束）

许可协议：自由转载-保持署名-非商业性使用-禁止演绎 (CC BY-NC-ND 4.0)

By 小可 from https://xinlu.ink/tech/pro-web-reconstruction-6-semantics.html