语义化

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

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

标签语义

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

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

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

属性命名语义

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

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

属性命名具体实现建议:

  • 采用 BEM + OOCSS + Atomic + SCSS/LESS/Stylus/PostCSS 组合方案
  • 样式用属性使用 .class,数据钩子使用 #id
  • 不用‘大小、颜色、方位、形状’等表象的词
  • JavaScript 钩子属性名采用 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, 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

扩展阅读:


更新日志:

  • 2015-07-16

(本篇结束)

CC BY-NC-ND 4.0

Last Updated: 2021/7/10下午8:54:57
Contributors: xianghongai