《编写可维护CSS的实践指南》
标签：#前端 #CSS #TailwindCSS #AtomicCSS #StyleX #CSSModules #CSS_Scoping #CSS_Variables #CSS_Layers #Fluid_Typography #StyleLint #Component_Scoped_CSS
总结：
两位前端老兵Wes Bos和Scott Tolinski畅聊如何让CSS不变成"垃圾场"。核心思路是选一个系统坚持到底、用变量代替硬编码、保持组件独立可移植，并善用现代CSS原生能力（如@scope、@layer、clamp流体排版）减少媒体查询的重复劳动。他们还对比了Tailwind、StyleX、CSS Modules等主流方案，强调好CSS要"有弹性"——能自适应容器变化，而不是在每个断点重写一遍样式。
文章要点：
- **样式别"漏"出去**：好CSS要像密封舱，组件拆下来放在白纸上照样好看；如果样式太宽泛、到处泄漏，代码很快就会腐烂发臭
- **变量是救命稻草**：颜色、字体、阴影全进变量里，别写死数值；不然一年后你会在代码里挖出40种不同的灰色，改起来想哭
- **给CSS分层控权**：用`@layer`把重置、主题、组件样式分楼层，告别"加权重、加!important"的 specificity 战争，心里踏实多了
- **原生作用域来了**：`@scope`已经登陆主流浏览器，甚至可以把`<style>`直接丢进组件里自动限定范围，Vue和Svelte用户听了直呼"终于等到你"
- **流体排版超省心**：用`clamp()`做字体大小，让文字在手机和桌面之间丝滑缩放，很多时候连媒体查询都可以省了
- **Tailwind vs CSS Modules vs StyleX**：Tailwind像速记本，上手快但类名堆成山；CSS Modules稳扎稳打；StyleX走构建时优化路线，但媒体查询语法劝退不少人——选哪个不重要，关键是别混着用
- **上StyleLint当"坏人"**：让工具自动拦住"用硬编码颜色"这类操作，比你在PR里当挑刺老哥体面多了，团队协作必备
文章URL：https://syntax.fm/show/999/writing-maintainable-css/transcript
标签：#前端 #CSS #TailwindCSS #AtomicCSS #StyleX #CSSModules #CSS_Scoping #CSS_Variables #CSS_Layers #Fluid_Typography #StyleLint #Component_Scoped_CSS
总结：
两位前端老兵Wes Bos和Scott Tolinski畅聊如何让CSS不变成"垃圾场"。核心思路是选一个系统坚持到底、用变量代替硬编码、保持组件独立可移植，并善用现代CSS原生能力（如@scope、@layer、clamp流体排版）减少媒体查询的重复劳动。他们还对比了Tailwind、StyleX、CSS Modules等主流方案，强调好CSS要"有弹性"——能自适应容器变化，而不是在每个断点重写一遍样式。
文章要点：
- **样式别"漏"出去**：好CSS要像密封舱，组件拆下来放在白纸上照样好看；如果样式太宽泛、到处泄漏，代码很快就会腐烂发臭
- **变量是救命稻草**：颜色、字体、阴影全进变量里，别写死数值；不然一年后你会在代码里挖出40种不同的灰色，改起来想哭
- **给CSS分层控权**：用`@layer`把重置、主题、组件样式分楼层，告别"加权重、加!important"的 specificity 战争，心里踏实多了
- **原生作用域来了**：`@scope`已经登陆主流浏览器，甚至可以把`<style>`直接丢进组件里自动限定范围，Vue和Svelte用户听了直呼"终于等到你"
- **流体排版超省心**：用`clamp()`做字体大小，让文字在手机和桌面之间丝滑缩放，很多时候连媒体查询都可以省了
- **Tailwind vs CSS Modules vs StyleX**：Tailwind像速记本，上手快但类名堆成山；CSS Modules稳扎稳打；StyleX走构建时优化路线，但媒体查询语法劝退不少人——选哪个不重要，关键是别混着用
- **上StyleLint当"坏人"**：让工具自动拦住"用硬编码颜色"这类操作，比你在PR里当挑刺老哥体面多了，团队协作必备
文章URL：https://syntax.fm/show/999/writing-maintainable-css/transcript
syntax.fm
Transcript: Writing Maintainable CSS - Syntax #999
