应建\_snippets.less收高频稳定样式逻辑，如.text-truncate()、.visually-hidden()、.aspect-ratio()等自包含、无业务语义、带文档与命名空间的mixin，禁用项目变量、禁止副作用，通过入口@import "_snippets"统一引用。
直接建一个 _snippets.less 文件，把高频、稳定、不带业务语义的样式逻辑收进去，比零散复制粘贴或重复写 .clearfix 强得多。
哪些代码适合放进私有片段库
不是所有可复用的样式都该塞进片段库。重点收那些“写了十次、改了三次、每次还容易漏前缀”的东西：
-
.text-truncate()：带white-space、overflow、text-overflow三件套，且支持传参控制宽度 -
.visually-hidden()：无障碍隐藏但保留在 DOM 流中，避免手写border: 0; clip: rect(1px, 1px, 1px, 1px);等易错组合 -
.sr-only-focusable()：配合上一条，让键盘焦点能进入被隐藏的内容 -
.aspect-ratio(@ratio: 16/9)：用padding-top+position: absolute实现响应式宽高比，不用 JS - 基础栅格辅助类，比如
.col-1~.col-12，但只暴露 class 名，不暴露内部计算逻辑
别收跟具体组件强绑定的样式（如 .user-card-header），那是模块文件该管的事；也别收还在频繁调整的实验性写法，片段库要的是“写一次、信十年”。
怎么组织片段库结构才不踩坑
片段库不是 dump 文件夹，结构松散会导致后期没人敢动、不敢删、不敢查。关键就三点：
立即学习“前端免费学习笔记（深入）”；
- 每个 mixin 必须有文档注释，用
//写清用途、参数类型、默认值、示例调用，比如：// .text-truncate(@width: 100%) —— 限制单行文本，超出显示省略号 - 按功能分组，用命名空间隔离，例如：
.utils.text-truncate()、.layout.aspect-ratio()，避免全局污染和命名冲突 - 禁止在片段里引用项目级变量（如
@primary-color），它必须是自包含的；需要颜色时，一律设为参数，默认值用标准色值（如#000） - 所有私有变量、辅助 mixin 都以下划线开头，如
@_utils-padding-base或.utils._reset-list()，明确告诉别人：“别从外面调我”
编译时若发现 _snippets.less 体积超过 2KB，就该拆——说明它开始混入不该有的东西了。
如何安全地在项目中引用片段库
入口文件（如 index.less）里只做一件事：@import "_snippets";，不加任何路径修饰。其他地方禁止直接 @import 片段文件。
- 确保构建工具的
paths配置把src/styles加进查找路径，否则@import "_snippets"会找不到 - 禁用
lessc --include-path这类运行时路径覆盖，它会让 import 行为变得不可追踪 - 如果用 Webpack +
less-loader，确认lessOptions.paths已正确指向片段所在目录 - 片段库本身不参与主题切换逻辑，所以不要把它放在
variables或themes模块之后加载——顺序错会导致参数默认值被意外覆盖
最常被忽略的一点：片段库里的 mixin 不该有副作用。比如 .clearfix() 只该生成清除浮动的规则，不能顺手把 zoom: 1 也加上去——IE6 兼容早该移除了，留着只会干扰现代浏览器的渲染判断。
