CSS 在大规模上可能具有挑战性。这一事实是显而易见的，因为 人们想出的解决方案使其更容易处理。最大的 CSS的挑战是这样的：
你怎么能确定你的CSS变化不会产生意想不到的影响？
这是由于 CSS 的“C”部分：“级联样式表”。我一直在做 这个 Web 开发的事情始于 2013 年左右。我几乎经历过每一个 你能想到的这个CSS挑战的解决方案。从常规CSS到好的 命名约定，通过预处理器、css-modules、css-in-js 和实用程序 CSS 类。
在我的帖子中，我如何在 2021 年建立了一个现代网站， 我解释说，这个网站使用 Tailwind CSS 造型。我对此感到非常高兴，因为它让我很容易 在大约 12kbs 的 CSS 中拥有可维护且一致的样式解决方案 对于整个网站。
所以我的网站并没有真正利用我将要向您展示的功能， 但无论如何，我都想告诉你这一切，因为它非常简单 Remix 独有的功能，对开发人员的生产力和 性能。
好的，假设在我的“关于我”页面上，我想自定义 某物的样式。例如，如果我想把所有的 s 都变成蓝色怎么办？ 如果你想自己做关于页面，你会怎么做？如果你是 使用 CSS-in-JS，让我们想象一下你不是。所以你可能会 想做这样的事情：h1
.about-page h1 {
color: blue;
}
然后，请确保在某处应用了类名 在 DOM 树中排名靠前。about-page
为什么是班级名称？命名它，对吗？你不会想的 在其他页面上有 s 突然全部变成蓝色。但是，让我们考虑一下 问题在这里。我们只需要当用户在页面上时，这个CSS就会出现在页面上，对吧？那么，为什么我们甚至在其他页面上都有CSS？不会 如果我们只是......喜欢。。。除了页面之外，其他任何页面上都没有 CSS？about-pageh1/about/about
而且我不是在谈论只是延迟加载 CSS 或任何东西。那不是 足够。我们需要CSS不仅在用户到达浏览器时到达浏览器 页面，但也要确保在用户 离开页面。/about/about
请允许我描述一下这个 gif 中发生的事情。我们从页面开始 并且有一个文件的标签。该文件正在制作 我们的标题是蓝色的。然后，当我们导航到主页时，该标签 从页面中删除，并恢复为常规白色。/about<link />about-[hash].cssh1<link />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 <stuff />
}
在混音中，当您导入文件时，它会返回一个 URL。.css
此路由模块的作用是告诉 Remix：“当此路由 在 页面上，这是我在页面上需要的链接标签。而 Remix 确保了这些 链接标签在页面上，并且在以下情况下它们会从页面中删除 该路由未处于活动状态。
那么这在实践中意味着什么呢？这意味着当你在CSS中工作时 文件，您可以准确找到使用它的位置（使用它的路由） in），您确切地知道您的更改将产生什么影响。
在实践中，您通常会在单个路由上使用 CSS 文件，因此 通常只需要担心一个页面。所以你可以自由地 开发您的 CSS，而不必担心您的更改会影响任何其他页面 比你要找的那个。您甚至不需要遵循命名空间 如果你不想的话，约定。你不需要一个工具来自动命名你的 适合您的CSS样式。而且 Remix 也不会对你的 CSS 做任何事情。只是 为您加载和卸载 CSS。
可重复使用的组件？
但是可重用组件的CSS呢？对于这些，您需要制作 确保他们的 CSS 文件出现在您使用该组件的每个页面上。在实践中，它是 最有可能的是，你只想在每个页面上都显示它，这样你就可以把它放在你的根目录中 路由，所以它出现在每个页面上。一旦你这样做了，你必须承认什么时候 您对该文件（或您在根目录上加载的任何其他 CSS 文件）进行更改 route）将在每个页面上处于活动状态（同样，这是您想要😅的）。
在这种情况下，它实际上不是关于可重用的组件，而是关于 记住要考虑出现 CSS 文件的页面并确保 您正确地命名了相对于将位于 CSS 文件处于活动状态的页面。
这篇文章的重点更多的是指出这个事实：
使用 Remix，可以明确 CSS 所在的页面 文件处于活动状态，可以静态地确定这些页面的 给定的CSS文件。
具有可预测的结果 您所做的更改是可维护性的巨大胜利。
