687 points • 3 days ago • Article Link

Julia Evans 最近将她的多个网站从 Tailwind CSS 迁回原生 CSS，这个过程让她既愉快又收获颇丰。使用 Tailwind 八年后，她意识到尽管它最初帮她摆脱了无结构 CSS 的混乱，但她已经超越了它的局限。她发现 Tailwind 其实教会了她如何系统化地管理调色板、字体比例等设计要素，于是决定把这些方法带入新的做法中。

为了在没有框架的情况下管理 CSS，Evans 采用了受 React 等 JavaScript 框架启发的组件化结构。每个组件都有独立的 CSS 文件和唯一的类名，确保一个元素的样式不会意外覆盖另一个。这样的隔离让维护变得更容易：修改时只需关注小而自包含的代码块。她还为全局元素制定了严格的约定，比如把调色板集中用变量定义，以及只保留一套有限的基础样式以维持全站一致性。

她工作流程中的一个重大技术转变是从依赖媒体查询的响应式设计，转向使用 CSS Grid 。借助 auto-fit 和 grid-template-areas 等特性，她可以构建能适应不同屏幕尺寸的灵活布局，避免了大量断点带来的杂乱。她还简化了构建流程：开发时依赖原生 CSS 特性如 @import 和嵌套选择器，仅在生产打包时使用 esbuild，从而保持标准化并提高效率。

Evans 解释说她离开 Tailwind 的决定既有现实层面的考虑，也有理念上的原因。现实上，Tailwind 的新版本需要构建系统，这使她多年来不得不依赖一个过时且笨重的版本；此外，在同一项目中混用原生 CSS 与 Tailwind 也难以维护。理念上，她想远离那种贬低 CSS 专业性的趋势——她认为 CSS 是一门强大且复杂的技术，值得被学习和尊重，而不应被实用类所取代。 Julia Evans recently migrated several of her websites away from Tailwind CSS and back to vanilla CSS, a move she found both enjoyable and enlightening. After eight years of using Tailwind, she realized that while it initially saved her from the chaos of unstructured CSS, she had outgrown its limitations. She discovered that Tailwind had actually taught her valuable systems for managing design elements like color palettes and font scales, which she decided to carry forward into her new approach.

To manage her CSS without a framework, Evans adopted a component-based structure inspired by JavaScript frameworks like React. Each component has its own dedicated CSS file and a unique class, ensuring that styles for one element do not accidentally override another. This isolation makes maintenance significantly easier, as she only needs to focus on a small, self-contained block of code when making changes. She also established strict conventions for global elements, such as a centralized color palette defined in variables and a limited set of base styles for site-wide consistency.

A major technical shift in her workflow was the move away from media queries for responsive design toward using CSS Grid. By utilizing features like `auto-fit` and `grid-template-areas`, she can create flexible layouts that adapt to different screen sizes without the clutter of numerous breakpoints. She also simplified her build process, relying on native CSS features like `@import` and nested selectors for development, only using `esbuild` for production bundling to keep things standards-based and efficient.

Evans explained that her decision to leave Tailwind was driven by both practical and philosophical concerns. On a practical level, newer versions of Tailwind require a build system, leading her to rely on an outdated, heavy version for years. She also found that mixing vanilla CSS with Tailwind in the same project was difficult to maintain. Philosophically, she wanted to move away from what she perceives as a trend of devaluing CSS expertise. She believes that CSS is a powerful, complex technology that deserves to be learned and respected rather than bypassed by utility classes.