Stylus中应将变量统一置于\_variables.styl并加命名空间前缀（如$color-primary），mixin需带语义前缀且设默认参数；避免!global滥用，BEM嵌套须确保块名一致，编译时启用--compress并慎用@extend。
Stylus 里怎么组织变量和混合（mixin）才不混乱
Stylus 本身没有模块作用域，@import 是直接文本拼接，变量和 mixin 一旦在全局 scope 定义，就可能被后续文件意外覆盖或污染。比如两个组件都定义了 btn-base()，后导入的会静默替换前一个。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 所有基础变量统一放在
_variables.styl，用命名空间前缀，如$color-primary、$space-md，避免裸名$primary - mixin 尽量带语义前缀，
text-truncate()比truncate()更安全；带参数的 mixin 用默认值兜底，比如flex-center($justify = center, $align = center) - 不要在
@import链中混用!global，除非明确需要跨文件覆盖——多数时候这是设计缺陷的信号
用 Stylus 写 BEM 命名时容易漏掉的细节
BEM 在 Stylus 里写起来很顺，但嵌套层级一深，&__element 和 &--modifier 的生成逻辑就容易出错。常见错误是：父级 class 名拼写不一致，或 modifier 写成 .block--modifier &__element 这种无效组合。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 块级 class 必须用
block声明，后续所有&__和&--才能正确解析，例如：.header { &__logo { ... } &--dark { ... } } - 避免多层嵌套修饰符，像
.card--hover &__title--large这类写法既难读又难维护，应拆成独立规则或用extend复用 - Stylus 不支持原生的 BEM 工具函数，别依赖未验证的第三方 mixin 库；手写简单版
bem($block, $element, $modifier)反而更可控
Stylus 编译后 CSS 文件体积暴增的常见原因
Stylus 默认不压缩输出，且嵌套 + 属性展开（如 margin 10px 0 → margin-top: 10px; margin-right: 0; margin-bottom: 10px; margin-left: 0;）会让 CSS 行数翻倍。线上环境若没配压缩，首屏加载可能多几百 KB。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 构建时必须启用
--compress参数，Webpack 中用stylus-loader时配置stylusOptions: { compress: true } - 禁用自动属性展开：在变量定义或 mixin 中显式写全四边，或用
unquote()包裹字符串值来绕过解析，比如margin unquote('10px 0') - 慎用
@extend，它会把所有被 extend 的选择器重复注入每个使用处，比includemixin 更易膨胀
Stylus 和现代构建工具联调时最常卡住的点
Stylus 本身不处理 CSS-in-JS 或 scoped style，和 Vue/React 项目集成时，容易误以为它能自动隔离样式。实际中，.vue 单文件里的 <style lang="stylus"> 仍走标准 Stylus 编译流程，不会自动加 hash 或 scope 属性。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- Vue 项目中若需 scoped 行为，必须显式加
scoped属性，Stylus 不会自动识别&或嵌套结构来模拟作用域 - Webpack 中
stylus-loader的additionalData配置要谨慎使用，全局注入变量时，确保路径相对正确，否则编译报错信息里@import错误位置会偏移 - VS Code 插件
Stylus Supremacy对缩进敏感，空格/Tab 混用会导致格式化失败，建议项目根目录加.editorconfig统一设为 2 空格
