语义化标签、BEM命名、template优化和模板继承规范是前端工程化四大核心实践。它们分别解决可访问性与SEO、样式隔离、首屏性能和组件复用问题，而非仅为美观或规范。
用、
语义化标签是 HTML 组件化的底层基础设施，不是锦上添花。浏览器、搜索引擎、屏幕阅读器都依赖它们理解页面意图；写错结构，轻则 SEO 掉权，重则辅助技术完全读不出导航或主内容。
常见错误现象：
-
<main>嵌套在<article>里——<main>必须是页面级唯一容器，不能降级为区块级 - 把搜索框、用户头像、登录按钮塞进
<nav>——<nav>只应包含导航链接，交互控件该归<header>或独立<section> - 多个
<section>没配<h2>等标题——没有标题的<section>语义失效，等价于<div>
使用场景中注意：
-
<aside>内容必须与邻近的<article>或<section>相关（如博客旁的“延伸阅读”），全站广告位别硬塞进去 -
<footer>是独立兄弟元素，不能包在<header>里，哪怕视觉上它紧贴页眉下方 - 一个页面可以有多个
<header>（比如每个<article>都自带），但顶层<header>应只承载站点级信息（Logo、全局操作）
组件外层加类前缀 + 子元素用 BEM 命名，不是为了“规范”，是为了不污染
纯 HTML 没作用域，class="title" 这种命名在多组件共存时必然冲突。BEM（Block__Element--Modifier）不是教条，是解决样式泄漏最轻量的办法。
立即学习“前端免费学习笔记（深入）”；
实操建议：
- 每个可复用区块外层加唯一块名前缀，例如
<div class="cmp-card">，内部子元素严格用cmp-card__title、cmp-card__body、cmp-card--featured - 避免
!important——如果子组件样式被父级覆盖，说明块前缀没起作用，或 CSS 优先级设计混乱 - 用
data-属性传递配置，例如<div class="cmp-banner" data-theme="dark" data-closable="true">，JS 读取后动态加类，比写死 class 更灵活
容易踩的坑：
- 复制粘贴组件时忘了改外层 class 前缀，导致两套样式互相打架
- 子元素用通用名（如
title、content），结果在另一个页面里被全局 CSS 覆盖成奇怪字体大小 - 用
id做组件标识——ID 必须唯一，无法复用，一复制就失效
非首屏内容必须用 <template>，而不是 display: none
display: none 的区块仍参与 DOM 构建、CSSOM 计算和布局，只是不绘制。对长图文页、商品瀑布流后半截，这会拖慢首屏解析速度，甚至触发内存告警。
正确做法：
- 把非首屏 HTML 片段包进
<template>标签，例如商品列表第二页起的数据容器 - 用
IntersectionObserver监听进入视口时再template.content.cloneNode(true)插入 DOM - 服务端渲染时，
<template>不会被解析，天然支持“仅客户端加载”语义
性能影响明显：
- 某门户首页移除 3 个
display: none的推荐区，FCP（首次内容绘制）从 1.8s 降到 0.9s -
<template>中的脚本不会执行，内联样式不计算，DOM 节点数直接减少 40%+
模板继承中 {{block 'xxx'}} 命名必须全局唯一且带区域前缀
art-template 多层继承（layout → inner-layout → page）时，同名 {{block 'content'}} 会被最深层模板完全覆盖，中间层定义的插入点彻底失效。
解决方案：
- 按“区域+职责”命名，例如
'header-nav'、'main-hero'、'sidebar-recommend'，杜绝泛用'content'、'body' - 所有 block 名维护在根目录
blocks.json中，构建脚本校验是否重复或缺失 - 继承层级控制在三层以内（layout → section → page），超过三层会导致编译缓存命中率骤降、调试路径过长
容易被忽略的细节：
- 即使你没手动定义
{{block 'xxx'}}，art-template 默认会生成隐式 block，若子模板未显式 override，可能意外继承空内容 - block 内容为空时，模板引擎仍会保留占位节点，需在 JS 层判断后主动移除，否则影响 DOM 查询效率
