语意化背景
优点
关于语意化的优点,前人之述备矣,在这里仅再整合一下。
- 有利于构架良好 HTML 结构,方便搜索引擎抓取重点信息并建立索引。
- 有利于一些特殊的解析器解析页面。如无障碍阅读,CSS 兼容差的设备等。
- 有利于让页面结构更加清晰,利于代码迭代维护,增加代码可读性。
- 对于标签的自带样式可以省略自己设定,简化样式代码。
争议
语意化提出到现在已经很久,但是仍然没有被普遍采用,社区对与语意化也存在不小的争议。
这些争议可以认为是语意化的一些实现难点或是缺点,也在这里做一个整合总结。
- 语意化标签自带样式,在开发中存在和样式打架的情况,且每个浏览器对默认样式的表现不一样。
- 现代网页已经不再是按照文档的样式来排版,标题h,段落p 等语意化标签难以明确应采用的内容。
- 现代项目组件化的组件名,className 这两点的命名做到了语意化的思想,是一种语意化代替。
背景小结
总体而言,语意化的思路优点是对的,提高代码可维护性可读性,利于爬虫和其他解析器的解析。但由于语意化自带的样式导致在开发中使用语意化标签有了不必要困难,且现在的网页结构难以找到内容对应的语意标签。
目前市场情况 — case 淘宝网
- logo:h1标签
- 列表:li 与 ul
- 商品:h4 与 p 标签
- 二级标题:h3
可以看到淘宝大量使用了 h 标题,p 段落和表格 ul 等标签。
淘宝对语意化缺点的处理
- 默认样式,全局改变默认样式,改为自定义样式。
- 语意化对应关系,只使用标题,段落,表格等语意标签,不实用 aside 等结构化标签。在现代等工程中已经被模块化组件名取代。
淘宝
steam
个人拙见
取长补短的使用语意化。
对于结构化标签如 head、main 等,页面框架层面不实用语意化标签而采用组件名语意化来代替,但在组件内部可以使用局部重写标签样式,例如结合使用 less 重写 head 样式来使得组件内标签语意化。
对于内容类标签如 h、p、ul 等,可以全局自定义覆盖这些标签的自定义样式。以 ?? 为例当前的“全局样式”中如 title 等全局样式 class 可以改为使用 h 标签并将这些样式设置为对应标签的样式。将 className 的语意化转为标签语意化,既使得内容标签更加明确,也简化了 className 的设置代码。
综上:使用语意标签来保留语意化优点,但是将全局样式 class 的思路转为重写内容类标签样式,使用时将常用全局样式 class 转为使用对应的标签,同时也避免了语意化标签默认样式的缺点。组件内部使用 less、sass 等css预处理帮助局部重写结构化标签,使得语意化标签的样式根据项目特点自定义,让其的适用范围更广,避免语意化标签无处使用的缺点。