ITCSS六层顺序不可调换，因决定CSS加载与权重优先级：settings/tools最前（变量/函数），generic次之（全局重置），objects/components居中（布局/组件），trumps垫底（工具类）；@import或@use必须严格按层归类导入，objects与components需分离结构与视觉职责，trumps禁用语义名且仅含单一行为样式。
ITCSS 不是命名规范，而是 CSS 架构分层方法；用错层级顺序，样式权重冲突和覆盖逻辑就彻底失控。
为什么 layers 顺序不能调换
ITCSS 的六层（settings、tools、generic、elements、objects、components、trumps）本质是 CSS 加载顺序 → 决定选择器权重生效优先级。把 components 放在 generic 前面，button { margin: 0 } 就可能被后面加载的 * { box-sizing: border-box } 意外重置。
-
settings和tools必须最前：存放$color-primary、@function rem()等，不输出 CSS -
generic紧随其后：*, ::before, ::after、html、body等全局重置，影响所有后续规则 -
trumps（如!important工具类）必须垫底：否则会被中间层无意覆盖，.u-hidden失效
@import 顺序写错等于白搭 ITCSS
SCSS 中靠 @import 控制加载顺序，但很多人把 components/_card.scss 直接 import 到主文件顶部，破坏了层级流。ITCSS 要求所有导入严格按层归类、集中管理。
- 主入口
main.scss只做七次@import，每层一个，顺序不可乱 - 禁止在
components/文件夹里@import '../tools/functions'：工具应已在tools层提前注入，重复引入会污染作用域 - Webpack/Vite 下若用
@use替代@import，需确保模块路径与 ITCSS 层级物理结构一致，否则@use 'tools/functions'可能被解析为相对路径而非逻辑层
objects 和 components 容易混用
对象（object）是抽象布局模式，比如 .o-layout-grid、.o-media；组件（component）是具体业务单元，比如 .c-card、.c-header。混用会导致复用性崩塌和样式泄漏。
立即学习“前端免费学习笔记（深入）”；
-
objects不含颜色、字体、间距等视觉属性，只管结构和容器行为 -
components可以基于objects组合，但自身必须封闭：不能依赖.c-card .o-media这种跨层耦合选择器 - 常见错误：
.c-button里写&:hover { @include o-layout-grid; }—— 把布局逻辑塞进组件，违反关注点分离
为什么 trumps 层禁用语义类名
trumps 是最后执行的覆盖层，只放无上下文的“暴力工具”，比如 .u-text-center、.u-mt-0。一旦起名带业务含义（如 .u-product-card-hidden），就违背了它的设计意图：即插即用、随处可覆、不绑定 DOM 结构。
- 命名必须以
u-开头，且仅描述单一视觉行为 - 禁止在
trumps里写媒体查询组合：如.u-mt-2@sm应拆成独立文件_trumps-responsive.scss，否则破坏加载时序稳定性 - 如果项目用了 Tailwind，
trumps层就基本不用手写 —— 但得确认 Tailwind 的@layer utilities是否真被注入在 ITCSS 的trumps位置，否则class="u-hidden md:u-block"可能被前面层的[hidden]规则压制
真正难的不是记住七层名字，而是每次加一个新样式时，下意识问自己：它属于哪一层？有没有偷偷跨层引用？有没有让下一层不得不打补丁来修复上一层的副作用？
