Today's newsletter is sponsored by ConfigCat — the feature flag service that helps you release features faster and with less risk. More on them at the end of today's newsletter.
You've probably already seen me mention that I'm building a UI library for people who love HTML, powered by modern CSS and Web Components.
I've been giving a lot of thought to how to make CSS files modular in the UI library without requiring any sort of build system.
Today I want to talk about how the CSS @layer at-rule makes this a lot easier! Let's dig in…
The challenge
I'm expecting the library to have just two required CSS files…
-
theme.css, which contains your brand colors, typography, and so on. -
core.css, which has all of the styles for core HTML elements like headings, forms, buttons, and the like.
The various extras—components that may or may not be needed on any particular project—can then be loaded as standalone files, so you're not loading stuff you don't need.
The challenge is that one of the things in the core.css is a set of utility classes, and because of how the cascade works those should be the last thing you load.
The C in CSS
The Cascade—the C in CSS—is incredibly powerful.
It makes it much easier to write lean, performant CSS. Instead of rewriting styles over-and-over again, CSS follows two basic rules:
- The style selector with the greater specificity wins.
- When two selectors have the same specificity, the last one in the CSS wins.
Imagine you have a .callout element.
Normally, they have black text on a gray background, but you add a .bg-blue class to make this one blue with white text instead.
<div class="callout bg-blue"> 👋 Hi universe! </div>
Your CSS is split across two files: utilities.css and extras.css.
They load separately, and for whatever reason, the utilities.css class is loaded first in the source order.
/* In a utilities.css file that was loaded first */ .bg-blue { background-color: #0088cc; color: #ffffff; } /* In some base.css file */ .callout { background-color: #f7f7f7; border: 1px solid #e5e5e5; border-radius: 0.5rem; padding: 1em; }
What will the UI of the .callout.bg-blue element look like?
You can see for yourself here.
Because .callout is the last selector, and has the same specificity as .bg-blue, it wins. The background is gray, not blue. But .callout doesn't specific a text color, so the color of the element is now an unreadable white on a light background.
CSS @layer FTW!
The @layer at-rule let's you assign selectors to different groups, and define the order in which those groups should load in the cascade, regardless of how they're loaded in the source order.
In our main CSS (or hell, even an inline <style> element), we'll define the different layers and their cascade order…
@layer extras, utilities;
Think of this the same way you'd think of file load order in the pre-@layer world.
The browser will treat extras as the first layer, and then utilities as the second, regardless of how they're loaded in your source.
Then, you can wrap your styles in an @layer at-rule, giving it the name of the layer group is should be added to. You can have as many of these as you want, and even use the same name multiple times in multiple places if you want.
/* In a utilities.css file that was loaded first */ @layer utilities { .bg-blue { background-color: #0088cc; color: #ffffff; } } /* In some extras.css file */ @layer extras { .callout { background-color: #f7f7f7; border: 1px solid #e5e5e5; border-radius: 0.5rem; padding: 1em; } }
Here's an updated demo using @layer.
Now, our UI looks the way you'd expect it to, regardless of the order in-which the CSS was loaded.
Are you looking for a service to support dynamic feature flags? ConfigCat is a cross-platform LaunchDarkly alternative that's easy to learn and quick to set up. With SDKs for 19 platforms — including JavaScript, Python, Ruby, Java, and even Rust — you can toggle features on or off without redeploying.
ConfigCat subscriptions are the same price regardless of your team size. Get 25% off any paid plan with code GO25 or just use ConfigCat's generous free tier. Definitely worth checking out.>
Cheers,
Chris
Want to share this with others or read it later? View it in a browser.
0 Komentar untuk "[Go Make Things] The CSS @layer at-rule"