内联CSS vs 新建CSS文件：少量自定义样式该如何选择？

首先明确结论：绝对不要用内联样式，20行自定义CSS已经超出内联样式的适用场景（内联仅适合极个别、一次性、无复用需求的单一样式调整），结合你所在团队使用设计系统+Bootstrap的背景，更应遵循团队样式组织规范处理。

具体建议如下：

• 先排查团队现有样式结构：如果修复针对特定组件，直接将自定义CSS添加到该组件对应的样式文件中（比如修复用户卡片组件，就加到user-card.css这类组件样式模块里），这是最贴合模块化维护的方式。
• 若无对应组件样式文件，或修复属于跨组件临时补丁，可新建小型专用修复文件（比如命名为temp-patches.css或component-specific-fixes.css），集中管理这类零散修复，后续迭代时再评估是否将其整合到设计系统或Bootstrap的定制配置中。
• 严格遵循团队命名规范：比如采用BEM或团队约定的命名方式，给自定义CSS选择器加上明确作用域（如.dashboard-header__notification-badge-fix），避免污染全局样式，防止与Bootstrap、设计系统的现有样式冲突。
• 优先复用设计系统：先确认设计系统中是否有对应变量、组件变体或工具类能实现修复效果，尽量减少自定义CSS编写——这才是使用设计系统的核心：保持样式一致性、减少冗余代码。

内联样式在大型项目中的弊端会被放大：20行样式会让HTML代码臃肿，无法复用，后续排查冲突或维护时难以定位，还完全违背设计系统统一管理样式的原则，增加团队长期维护成本。

内容的提问来源于stack exchange，提问作者D. R.