CSS在规模上可能具有挑战性。根据人们想出的使其更容易处理的解决方案的数量，这一事实是显而易见的。CSS的最大挑战在于此。
你怎么能确定你的CSS变化不会产生意想不到的影响？
这要归功于CSS的 "C "部分。"层叠样式表"。我从2013年左右开始从事网络开发工作。我已经经历了你能想到的所有解决这个CSS难题的方法。从具有良好命名规则的常规CSS，到预处理器、css模块、css-in-js和实用css类。
在我的文章《我如何在2021年建立一个现代网站》中，我解释了这个网站使用Tailwind CSS进行造型。我对此非常满意，因为它使我能够非常容易地拥有一个可维护的、一致的造型解决方案，整个网站的CSS大约为12kbs。
所以，我的网站并没有真正利用我即将展示的功能，但我还是想告诉大家，因为这是Remix特有的一个非常简单的功能，对开发者的生产力和性能有深远的影响。
好吧，假设在我的 "关于我 "页面上，我想定制某些东西的样式。例如，如果我想把所有的h1，变成蓝色呢？如果你想在自己的关于我的页面上这样做，你会怎么做？如果你使用的是CSS-in-JS，让我们先想象一下，你不是这样的。所以你可能会想做这样的事情：
.about-page h1 {
color: blue;
}
然后，你要确保你在DOM树的某处应用了about-page 类的名称。
为什么要用about-page 这个类名？为了命名空间，对吗？你不会想让其他页面上的h1突然都变成蓝色。但是，让我们考虑一下这里的问题。我们只需要当用户在/about 页面上时，这个CSS就会出现在页面上，对吗？那么，我们为什么要在其他页面上设置这个CSS呢？如果我们只是......比如......在/about 页面以外的任何页面上都不设置CSS，那不是更好吗？
我不是在说懒得加载CSS或其他什么。那是不够的。我们需要CSS不仅在用户进入/about 页面时出现在浏览器中，而且还要确保在用户从/about 页面导航时将其从页面中删除。
这就是Remix的反冲突药水的神奇成分，观察一下：
请允许我描述一下这个GIF中发生的事情。我们从/about 页面开始，有一个 标签，用于一个about-[hash].css 文件。该文件使我们的h1 标题变成蓝色。然后，当我们导航到主页时，那个 标签被从页面上删除，h1 恢复到正常的白色。
很简单吧？当我第一次看到这个时，我只是坐在那里处理我看到的东西。这几乎太简单了，我几乎要气疯了，我从来没有想过这个问题。我希望Remix不是第一个有这种想法的人，但这肯定不是一个流行的想法。我不知道还有什么其他的框架或工具能做到这一点。
不过，让我再进一步。以防人们不清楚这有多深远。从代码的角度来看，这是如何工作的：
import type {LinksFunction} from 'remix'
import aboutStyles from '~/styles/routes/about.css'
export const links: LinksFunction = () => {
return [{rel: 'stylesheet', href: aboutStyles}]
}
export default function AboutScreen() {
return
}
在Remix中，当你导入一个.css 文件时，它会给你一个URL。
这个路由模块所做的是告诉Remix。"当这个路由在页面上激活时，这里有我需要的页面上的链接标签。"Remix确保这些链接标签在页面上，并且当该路由不活跃时，它们也会从页面上被移除。
那么，这在实践中意味着什么呢？这意味着，当你在一个CSS文件中工作时，你可以准确地找到它被使用的地方（它被用于哪些路由），你可以准确地知道你的变化会产生什么影响。
在实践中，你通常会让你的CSS文件用在一个路由上，所以通常只有一个页面需要你担心。因此，你可以自由地开发你的CSS，而不必担心你的改动会影响到除你所寻找的页面之外的任何其他页面。如果你不愿意，你甚至不需要遵循命名空间的惯例。你不需要一个工具来为你的CSS样式自动命名。Remix也没有对你的CSS做任何事情。它只是为你加载和卸载你的CSS。
但是，可重复使用的组件的CSS呢？对于这些组件，你需要确保它们的CSS文件在你使用该组件的每个页面上。在实践中，你很可能只想让它出现在每个页面上，所以你可以把它放在你的根路径中，这样它就会出现在每个页面上。一旦你这样做了，你就必须承认，当你对该文件（或你在根路径上加载的任何其他CSS文件）进行修改时，将在每个页面上都是有效的（这也是你想要的😅）。
在这种情况下，它实际上不是关于可重用的组件，而是关于记住考虑CSS文件出现的页面，并确保你正确地命名相对于其他CSS文件的间距，这些文件将出现在你的CSS文件所激活的页面上。
这篇文章的重点是指出这一事实。
有了Remix，就可以明确说明你的CSS文件在哪些页面上是有效的，并且可以静态地确定特定CSS文件的这些页面。
对你所做的修改有一个可预测的结果，这对可维护性是一个巨大的胜利。
如前所述，这个网站正在使用Tailwind。在这个网站之前，我从来没有使用过tailwind。但斯蒂芬建议我们使用它。我想，这可能会让我们在开始的时候就有成效，然后我可以在以后的时间里退出tailwind，使用Remix的这个功能。
到最后，我意识到Tailwind不仅仅是避开了级联冲突的问题，它还为你提供了一套很好的约束条件来保持你的用户界面的一致性。所以我决定保留它。
那么我的建议是什么呢？我建议你跳到最后，使用Tailwind。但是，当你需要一些一次性的样式时（或者如果你真的不想使用Tailwind），知道Remix在这种事情上为你提供支持，使之成为一个出色的可维护的CSS解决方案，这真的很好。
