CSS may also be difficult at scale. This truth is clear in keeping with the choice of
answers other people have get a hold of to assist you handle. The largest
problem with CSS is that this:

How are you able to make sure that your CSS adjustments don’t seem to be having an sudden have an effect on?

That is because of the “C” a part of CSS: “Cascading Taste Sheets”. I have been doing
this internet dev factor since round 2013. I have been via with regards to each and every
answer for this CSS problem you’ll be able to recall to mind. From common CSS with excellent
naming conventions, via pre-processors, css-modules, css-in-js, and software
css categories.

In my put up
How I constructed a contemporary site in 2021,
I provide an explanation for that this site makes use of Tailwind CSS for
styling. I could not be happier with this as it makes it really easy for me to
have a maintainable and constant styling answer all in round 12kbs of CSS
for the entire web site.

So my web site is not in point of fact benefiting from the function I am about to turn you,
however I wish to let you know all about it anyway as a result of it is a brilliantly easy
function distinctive to Remix that has a profound have an effect on on developer productiveness and
efficiency.

Good enough, so shall we say that on my About Me web page, I sought after to customise the
styling of one thing. For instance, what if I sought after to make the entire h1s blue?
If you happen to sought after to do this by yourself about web page, how would you do it? In case you are
the usage of CSS-in-JS, let’s consider for a second that you are not. So you’ll most certainly
wish to do one thing like this:

.about-page h1 {
  colour: blue;
}

And you then’d make sure to have the about-page elegance title implemented someplace
prime to your DOM tree.

Why the about-page elegance title? To namespace it proper? You would not wish to
have h1s on different pages to abruptly all be blue. However let’s take into consideration the
downside right here. We handiest want this CSS to be at the web page when the consumer’s at the
/about web page proper? So why can we also have the CSS at the different pages? Would not
it’s higher if we simply… like… shouldn’t have the CSS on any web page instead of the
/about web page?

And I am not speaking about simply lazy-loading the CSS or the rest. That is not
sufficient. We’d like the CSS not to handiest arrive within the browser when the consumer will get to
the /about web page but in addition be certain it is got rid of from the web page when the consumer
navigates clear of the /about web page.

And that is the magic element of Remix’s anti-clash potion. Apply:

Permit me to explain what is taking place on this gif. We commence at the /about web page
and there is a <hyperlink /> tag for a about-[hash].css document. That document’s making
our h1 name blue. Then after we navigate to the homepage, that <hyperlink /> tag
is got rid of from the web page and the h1 is restored to its common white colour.

Beautiful easy proper? After I first noticed this I simply sat there processing what I
was once seeing. It is nearly too easy and I am nearly mad I by no means considered it.
I be expecting Remix is not the primary to ever have this concept, however it is not at all a
standard concept. I do not know of every other frameworks or gear that permit this.

Let me take it a step additional despite the fact that. Simply in case it isn’t transparent how profound
that is. This is how this works from a code perspective:

import kind {LinksFunction} from 'remix'
import aboutStyles from '~/types/routes/about.css'

export const hyperlinks: LinksFunction = () => {
  go back [{rel: 'stylesheet', href: aboutStyles}]
}

export default serve as AboutScreen() {
  go back <stuff />
}

In remix, while you import a .css document, it provides you with again a URL.

What this direction module does is inform Remix: “When this direction is lively at the
web page, listed here are the hyperlink tags I would like at the web page.” And Remix guarantees that the ones
hyperlink tags are at the web page and additionally that they are got rid of from the web page when
that direction isn’t lively.

So what does this imply in apply? It signifies that if you end up running in a CSS
document, you’ll be able to to find precisely the place it is getting used (which routes it is getting used
in) and precisely what have an effect on your adjustments may have.

In apply, you generally may have your CSS document used on a unmarried direction, so
there may be generally just one web page you wish to have to fret about. So you’ll be able to freely
increase your CSS with out being concerned that your adjustments are impacting every other web page
than the only you are searching for. You do not want to even apply a namespace
conference if you do not want to. You are not looking for a device to auto-namespace your
CSS types for you. And Remix is not doing the rest in your CSS both. It is simply
loading and unloading your CSS for you.

However what concerning the CSS for reusable elements? For those, you can want to make
certain their CSS information are on each and every web page you utilize the part. In apply, it is
perhaps you can simply need this on each and every web page so you’ll be able to put it to your root
direction so it is on each and every web page. Whenever you do this, you must recognize that after
you are making a metamorphosis to that document (or every other CSS document you load at the root
direction) will likely be lively on each and every web page (which once more, is what you wish to have 😅).

On this case it is if truth be told much less about reusable elements and extra about
remembering to take into consideration the pages the place the CSS document seems and make sure
you are correctly namespacing relative to the opposite CSS information that will likely be at the
pages your CSS document is lively on.

The purpose of this put up is extra to name out this truth:

With Remix, it is conceivable to be specific concerning the pages upon which your CSS
document is lively and it is conceivable to statically resolve the ones pages for a
given CSS document.

Having a predictable result to
the adjustments you are making is a large win for maintainability.

As discussed, this site is the usage of Tailwind. Prior to this web site, I had by no means used
tailwind. However Stephan advisable that we cross with it. I figured it
may make us productive as we were given began, then I may again out of tailwind
over the years later and use this selection of Remix.

Through the top of it I noticed that Tailwind does greater than side-step the Cascade
clashing problems, it additionally provides you with a super set of constraints to stay your UI
taking a look constant. So I made up our minds to stay it.

So what do I like to recommend? I counsel you skip to the top and use Tailwind. But if
you are in want of a few one-off types (or in case you in point of fact do not wish to use
Tailwind), it is in point of fact great to understand that Remix has your again for that type of
factor making for a stellar maintainable CSS answer.