Luckily, CSS Modules are starting to land in multiple browsers. Firefox added support behind a flag, and it might ship in 145.
So you'll be able to import the CSS from your JS modules, and apply it to the document:
import extras from 'css-extras' with {type: 'css'};
if (!document.adoptedStyleSheets.includes(extras)) {
document.adoptedStyleSheets.push(extras);
}
Or, if you use shadow DOM: this.shadowRoot.adoptedStyleSheets.push(extras);(I'm not weighing in on the validity of this position, just reporting what I perceive the position itself to be.)
Is preprocessed CSS faster? Yes. Is it meaningfully faster? Probably not.
In the context of animations, I'd intuit the latter but would be open to hearing why.
CSS in general is Turing complete if you allow running multiple frames, although it requires ugly hacks. See e.g. https://codepen.io/propjockey/pen/dywNyBQ, which is quite insane IMO.
Kinda clever, actually.
This project is based on just one new proposed rule which won't be available in all mainstream browsers until 2027-28, and won't be safe for production use until close to the end of the decade.
Of note from 2023: subgrids, :has, container queries, nesting... And in 2022, cascade layers (plus <style scoped>, I mean @scope, I mean :scope).
What goes in some people's mind when they come up with these ugly conventions and rules?
The earlier versions of the CSS spec had no double dash prefix sigil for custom properties.
You could just make up a value like: "bigger", "accent", etc...
The problem is that CSS needs to be able to add new properties overtime, and we don't want any name collisions with variable names that web developers have already taken.
So we need a sigil that only custom properties and that regular properties can't use.
- We can't use `$` because that would conflict with SCSS, and we wouldn't be able to use custom properties in the same file as scss variables
- We can't use any of the following symbols because they're already used in CSS itself: !@#.,%^&>~:?\|{}`()+*/"';
- We can't use `<` because it could harm parsing performance.
- We can't prefix with `-`, `_`, or `__` because developers have already used them in their files.
- That seems to leave just: `--` or something even weirder.
So `--` is longer but in the context of not breaking anything, it's the best option on the table.
-------------
Now we're in this unusual spot where custom properties are genuinely more useful then what came before (they're like scss vars but they can update live and cascade too!), but they're a little wordy.
Probably not for long though, the upgraded attr() function will remove a lot of the massive walls of definitions that too many design systems and methodologies are relying on, and the upcoming functions used with the conditionals (if, media, where, not etc...) will take that further.
Utility based libraries tend to avoid this these days and use simpler names, but those are also supposed to be your root libraries, not your custom CSS.
I’m glad I don’t work on browser engines for a living. CSS is getting more complex and spaghetti-capable by the day.
> Currently only supported in Chrome 141+. The @function rule is going through the W3C standardization process and will be available in other browsers soon.
Also, pretty tired of Chrome effectively front-running standards as a not-so-subtle means of cramming them through.
Every feature sounds great in isolation, but in aggregate they become a moloch.
Then people say “modern CSS is great, you just have to pick the ‘good subset’.”, but then nobody can agree what that subset should be, and everybody else uses a different subset.
LLMs also contribute to this, as 90% of what’s available on the web is considered outdated now, but that is the majority of training data.
Although, yes, CSS is getting more complex because everything on the web is. What's the last standard feature to really be taken away after actually existing in the wild for a while? XHTML and Flash (effectively a standard if not in reality)?
Part of the problem is once people get used to doing something a particular way, they don’t want to change.
I looked at a friend’s website the other day and it’s using a table-based layout and it wasn’t even that old!
Nothing can be removed from CSS because sites from the 90’s and the early 2000’s still have to work in today’s browsers.
The good news is most greenfield projects can use floats and tables in the way they were intended, which wasn’t ever layout.
On the contrary. CSS functions and mixins may make a lot of current cruft unnecessary.
Is anything really necessary? Not snark: almost nothing is necessary in life but many things are convenient.
And maybe there are some really compelling ones... I think the only really useful one I see here is `--abs`, which really should just be built-in.
The main use case of functions is that you can parameterize code. This lets you parameterize stylesheets, like set a base font size and primary color, and then derive your whole theme from it, from spacing to secondary border colors to how buttons look when they're hovered.
https://developer.mozilla.org/en-US/docs/Web/CSS/abs
There are also other non-custom math functions like round() which can be very useful.