直接用标签名或ID写CSS难维护，因语义弱、唯一性强、结构耦合高；应采用BEM类名规范与独立顶层类名HTML结构，实现样式解耦与真正复用。
为什么直接用标签名或 ID 写 CSS 会让样式越来越难维护
因为标签名（如 div、span）语义弱，ID（如 #header）强制唯一且无法复用，一旦组件挪动位置或改结构，样式就断；更麻烦的是，后续开发者不敢删 CSS，只能叠新规则，最终出现大量冗余、冲突、覆盖难查的声明。
真正能长期复用的 CSS，靠的是「类名可预测 + 结构不绑架样式」。这需要两件事同步做：命名有约束，HTML 结构有收敛。
类名怎么起才不容易写重、改错、猜错
推荐 BEM 变体（不强求双下划线，但必须分层）：用 block、block__element、block--modifier 这种模式。重点不是语法，是让类名自带上下文。
-
btn是基础块，btn__text表示它是 btn 内部文本，不是随便一个text -
card--featured比featured-card更可靠——后者容易和另一个featured-list冲突，前者明确属于card块 - 避免纯功能类名如
red、mt-16（除非是原子 CSS 系统），它们脱离语境后无法推断用途，也难以搜索定位 - 类名中不用
left/right，改用--start/--end，适配 RTL 布局时不用重写样式
HTML 结构怎么写才能让 CSS 不依赖深度嵌套
深层嵌套选择器（如 .sidebar .nav ul li a）看似精准，实则脆弱：中间加一层 div 就失效；别人重构 DOM 时根本不敢动；还容易意外影响子组件。
立即学习“前端免费学习笔记（深入）”；
更稳的做法是「每个有意义的视觉单元都拥有自己的顶层类名」：
- 把
改成 - 不写
.nav__item a，直接写.nav__link—— 链接样式从此和父级结构解耦 - 如果某区块需条件样式（如“在首页显示为大图”），加修饰类
hero--home，而不是靠.home .hero这种路径判断
什么时候该抽成独立组件，而不是塞进现有类里
当一个 UI 片段满足以下任一条件，就应该拆成独立 block：
- 它在多个页面/模块中出现（如
pricing-card出现在首页、产品页、邮件模板） - 它有自己的交互逻辑（比如带展开/收起的
accordion），样式和行为强绑定 - 它的内部结构可能变化（比如某个
user-avatar后来要支持徽章、状态点、多尺寸），但外部调用方式不能变
这时候类名就不再是 profile-header__avatar，而是独立的 avatar，通过组合使用：
最常被忽略的一点：复用性不是靠减少类名数量实现的，而是靠让每个类名职责单一、边界清晰、不隐含结构假设。写完一个组件，试着把它剪切粘贴到另一个完全无关的页面里——如果样式还能对、结构没崩、不用改 CSS，那才算真复用成功。
