语义化
语义化概念：通过丰富的语义关系对数据进行逻辑化描述，便于数据人机可读、检索挖掘和共享交换，实现信息处理的自动化和智能化；即人类提供良好结构的、作为人能识别的数据给机器，让不同机器能准确高效的意会和处理数据反馈给人类。
语义化实现方案有多种，如 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 属性命名，主要有 BEM、OOCSS、SMACSS、SUITCSS、Atomic 等方案，各种方案都是意图通过样式命名让文档具备逻辑表达能力。OOCSS 主要侧重样式的抽象、独立、封装与复用，BEM、SMACSS、SUITCSS 主要侧重减轻样式对 HTML 层级结构嵌套依赖，Atomic 主要侧重剥离具体样式表现的特性。在这些 CSS Styling 方案中，BEM 方案最为流行，因为 BEM 简明直了，又无其它依赖项，仅是设计方法。
属性命名依赖于 HTML 结构，早期在项目中尝试过长命名、短命名方案，团队小、项目小都还可以定义与维护，在多人参与的一定规模的项目中，长命名 kebab-case 会变得很长很晦涩，短命名层级嵌套会变得越来越深，总有队友深怕会与他人产生冲突刻意为之。
属性命名具体实现建议：
- 采用
BEM + SCSS/LESS/Stylus/PostCSS组合方案 - 样式使用
class控制，数据钩子使用#id和data-<name>(适用于 DOM 编程) - 不用‘大小、颜色、方位、形状’等表象的词，如 red、blue、left、right 之类命名
- JavaScript 钩子
id采用lowerCamelCase小驼峰方式
BEM 规则可参考：
Block独立模块：中横线Element子元素：俩下划线Modifier模块状态：一个下划线Block下的所有Element不考虑层级嵌套关系，扁平化处理都属于Block，即连续的__下划线只能出现一次
BEM 实现为：
- 模块：
.block - 模块_状态：
.block_modifier - 模块__子元素：
.block__element - 模块__子元素_状态：
.block__element_modifier
BEM 方案一定程度上解决了样式作用域的问题，适合基础 UI 框架，在业务开发中，为解决各组件之间样式问题，需要 Component-scoped CSS 方案，可以采用 Shadow DOM、CSS Modules、styled-components 等方案，另外一些前端 MVVM 框架提供了 <style scoped> 机制限定样式作用域。
附上常用命名词：
| 用途 | 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, dashboard, 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 |
扩展阅读：
更新日志：
- 2022-04-10，补充样式作用域信息
- 2015-07-16