@use 是 scss 模块化隔离的唯一硬边界，强制变量/mixin 私有、禁止混用 @import；类名隔离须靠前缀或 css modules，bem 命名需明确归属与状态，根容器必须真实应用命名空间。
@use 是唯一能真正隔离变量和 mixin 的方式，类名隔离必须靠前缀或 CSS Modules。SCSS 本身没有作用域概念，@import 只是文本拼接，所有 $variable、@mixin、.class 全进全局；不加约束地写 .header，等于主动把样式控制权交给加载顺序和权重计算。
用 @use 替代 @import，让变量和 mixin 真正私有
这是模块化隔离的第一道硬边界，不是可选项。
-
@use必须出现在文件顶部，不能嵌套在@if或选择器里；否则编译直接报错 - 变量默认不导出：
@use 'colors';后，colors.$color-primary可用，但colors.$_color-warning（以下划线开头）会报Undefined variable - 混用
@import和@use会导致全局污染：哪怕只有一处@import 'mixins'，它就把所有$_base-padding倒进全局，彻底废掉其他文件的@use隔离 - 第三方库需确认版本：Bootstrap 5.3+ 支持
@use，老版本仍只能@import，无法享受模块隔离
类名隔离不能靠嵌套，必须显式加前缀或启用 CSS Modules
SCSS 的 & 嵌套只是语法糖，.modal { .header { } } 编译后仍是 .modal .header——它和页面里任何 .header 共享选择器层级，谁后加载谁赢。
- 根选择器必须带业务/组件级前缀：
.uikit-modal、.salesforce-form，禁用my-、global-这类泛化词 - 子元素严格用
&__body、&--disabled：写成& __body（中间空格）会生成全局__body类，直接失效 - 动态插入的 DOM（如 Bootstrap Modal）默认挂载到
document.body，会逃出你的.uikit-modal容器——必须显式传container: '.uikit-modal'，否则样式不生效 - 纯 HTML + CDN 场景下，CSS Modules 不可用，只能手动前缀或配
postcss-prefixer；注意它必须在autoprefixer之前执行，否则-webkit-transform可能被重复加前缀
BEM 不是命名习惯，而是强制回答“谁在用、在哪用、会不会被误伤”
写 .user-card__avatar 不是为了好看，是让所有人一眼看出这个类属于哪个功能闭环单元，且不依赖 DOM 层级。
- 禁止无上下文规则：
.button:hover是反模式，必须绑定 block：.search-form__submit:hover -
__表示归属，--表示状态：写成.user-card--avatar暗示 avatar 是一种修饰态，逻辑错误；.user-card__compact则混淆了结构部件与状态切换 - SCSS 中只用
&__和&--，禁用空格嵌套：&__avatar { &__icon { } }是非法的，BEM 不允许 __ 嵌套；真需要图标变体，用.user-card__avatar--with-icon - Block 名必须是功能闭环单元：
.search-form合格，.section-2、.left-sidebar不合格——它们含位置词、视觉词，跨项目迁移时极易冲突
最易被忽略的一点：命名空间类名（如 .uikit）必须真实加在 HTML 根容器上，否则编译出的 CSS 规则永远不匹配；而 @layer 只控制层叠顺序，不提供作用域，两个 .header 写在同一层里，照样互相覆盖。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
