smacss五类规则必须物理隔离于styles/下的base/、layout/、module/、state/、theme/五个子目录，禁止混放或嵌套；base/禁用class选择器，layout/文件名须以l-开头，module/禁止后代选择器，state/强制is-/has-前缀，theme/只允许覆盖不新增结构类。
不能靠人盯人，得靠工具链自动拦截 + 文件结构硬约束。人工 Review 永远滞后，等样式冲突暴露时，修复成本已经翻倍。
SMACSS 目录结构必须物理隔离
SMACSS 的五类规则（base、layout、module、state、theme）如果混在一个文件夹里，再好的规范也形同虚设。目录本身就是第一道防线。
- 根目录下只允许存在
styles/，且内部必须是这五个子目录，不允许嵌套或合并（比如不能有styles/common/或styles/shared/） -
base/只放重置、字体、颜色变量等全局基础；禁止出现任何 class 选择器 -
layout/中的文件名必须以l-开头（如l-header.css），构建时可通过 ESLint 插件校验前缀 -
module/是唯一允许复用的目录，每个组件一个文件，命名必须语义化（如button.css、card.css），禁止出现index.css这类模糊命名
用 PostCSS 插件拦截非法选择器
SMACSS 要求状态类必须带 is- 或 has- 前缀（如 is-active），但开发者常随手写 .active 就提交了。靠约定没用，得在编译阶段报错。
- 接入
postcss-selector-not-allowed，配置禁止顶级.active、.hidden、.loading等泛用类名 - 对
state/目录下的 CSS，强制要求所有 class 必须匹配正则/^is-[a-z]+|^has-[a-z]+/ - 在
module/下允许.button这类块名，但禁止出现.button .icon这种后代选择器——它会破坏模块边界，应改用.button__icon
Webpack / Vite 构建时校验 import 路径合法性
SMACSS 的层级依赖是有方向的：base → layout → module，反向引用（比如 module/ 里 @import '../base/colors.css'）看似无害，实则埋下耦合隐患。
- 使用
eslint-plugin-import配合自定义规则，禁止module/目录下的文件 import 任何layout/或base/外的路径 - 在
theme/中只允许 override，不允许新增结构类；若检测到.l-sidebar出现在theme/dark.css中，直接中断构建 - CI 流程中加入
grep -r "import.*\.css" src/styles/ | grep -E "(module|layout)/.*base/"类似检查，失败即拒收 PR
真正难的不是写规则，而是让规则在开发者保存文件的瞬间就起作用——延迟哪怕 3 秒，人就会习惯性绕过。SMACSS 的落地效果，80% 取决于编辑器里是否实时标红、构建是否秒级失败、PR 检查是否卡住不放行。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
