class名不能叫red-btn或box1，因其描述样式或无意义序号，而非功能角色；应使用search-submit等语义化命名，配合BEM结构与kebab-case格式。
class 名为什么不能叫 red-btn 或 box1
这类名字不是在描述“这是什么”，而是在描述“它现在长什么样”或“我懒得想名字”。设计改版后按钮变蓝，red-btn 就成误导；box1 更是等于没命名——没人知道它对应哪个模块、是否可复用、能不能删。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 聚焦功能或内容角色：
search-submit、user-profile-card、notification-badge - 采用 BEM 规范：
header__logo、card--featured，明确模块/元素/状态层级 - 禁用缩写（除非通用如
btn）、拼音、数字序号，也禁用样式词（blue、left、big） - 类名过时不可怕，可怕的是没人敢动——因为改一个
red-btn，得全局搜、逐个判断是否真红
为什么 id="main-content" 可以，但 id="btn-primary" 不行
id 是锚点跳转和 JS 精确操作的唯一依据，浏览器、辅助技术、React/Vue 的 hydration 都依赖它的全局唯一性。一旦重复或泛化，后果立竿见影：JS getElementById() 只返回第一个匹配项，SSR 渲染错乱，无障碍跳转失效。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 只用于锚点（
#main-content）、表单关联（<label for="form-contact">）、单例组件控制（modal-confirmation） - 禁止在循环渲染中使用相同
id，比如商品卡片列表里每个都写id="product-item" - 含特殊字符（如点、冒号）必须转义：
getElementById("user\.email")，否则会被当 CSS 选择器解析 - 优先用
data-module="header"替代id做模块标识，支持多实例且不破坏唯一性
<main> 和 <section> 用错比不用还糟
把商品列表塞进 <aside>，等于告诉搜索引擎和屏幕阅读器“这段内容不重要”，SEO 降权、视障用户跳过、axe 工具直接报错。语义标签不是装饰，是标准 DOM 接口，选错就等于主动放弃可访问性和结构稳定性。
实操建议：
立即学习“前端免费学习笔记（深入）”；
-
<main>每页仅一个，不能嵌套在<header>、<footer>、<nav>或另一个<main>内 -
<section>必须有主题，且建议配<h2>～<h6>；纯视觉分隔（比如“右边那个 div”）不该用它 -
<article>用于独立可分发内容（博客、新闻），<aside>用于相关但非核心信息（作者简介、广告） - 滥用
<div>套娃会导致document.querySelector('main')失效，新同事查半天才搞清哪块是正文
kebab-case 和 BEM 不是风格偏好，是全链路兼容刚需
连字符（-）是 HTML/CSS/JS 全链路唯一无需转义、无歧义、被所有工具默认支持的分隔符。下划线在 CSS 中需转义，驼峰在 HTML 属性里无效，大小写混用在 case-insensitive 环境中直接失控。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 所有
class、id、data-属性统一用小写 + kebab-case：user-profile-card、data-module="product-list" - BEM 重点不在双下划线或双短横，而在意识：Block 是独立模块（
search-form），Element 是其子部分（search-form__input），Modifier 是状态（search-form--disabled） - 工具类加前缀隔离：
u-hidden、u-text-center，避免与语义类名冲突 - 命名长度控制在 2–3 个单词，过长（如
global-header-navigation-dropdown-toggle-button）说明职责不清，该拆模块了
class="box2" 被五个不同组件复用、又没人记得它最初干啥；或是 id="nav" 在页脚又出现一次，导致导航菜单 JS 控制失灵。语义不是写给机器看的装饰，是写给所有人——包括三个月后的你自己——最省力的沟通协议。 
