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