6 ms·

Reimagine Atomic CSS

52 points by city41 5y ago

city41 5y ago
This is a long read that explores some downsides and limitations of existing atomic css frameworks. Then it introduces UnoCSS, which is an interesting and fresh new take on the idea.
willio58 5y ago
Really cool stuff. The arbitrary css in class names is just so cool, especially with css vars.
spiderfarmer 5y ago
FYI. The stylesheet for this relatively simple article is 152 Kb of which 88.5% is unused according Chrome's code coverage tool.
- johnthedebs 5y ago
  Also worth noting that it's ~37kb over the wire, applies to the whole site (where it is much more thoroughly used), and contains a bunch of svg icons that don't need to be loaded in separate requests. If anything, that reinforces to me how well considered it is!
  - andrei_says_ 5y ago
    I appreciate how these two statements, while fully factual, paint two completely different pictures. Such a great example of omission and inclusion when reporting the facts.
  - eyelidlessness 5y ago
    And this approach may or may not be better, depending on usage patterns. Code splitting or even inlining may benefit users who tend to view only one page then move on. A single file loaded and cached upfront will tend to benefit users who stay on your site to view multiple pages. In either case, splitting atomic CSS is probably more complex to get right because of ordering, and possibly more inefficient for everyone as well.
  - hinkley 5y ago
    I don't want to necessarily argue with OP's CSS file but there is a teachable moment here. We make a master CSS file because we don't want to serve bunches of CSS files per page. The constraint we want is: n << 100 There are other solutions besides n=1 that satisfy this inequality. Serving 2 CSS files per page does not introduce substantial latency over 1, even on HTTP 1.1 user agents. Once you get to 4 you start to cause some problems, but 2 is barely noticeable. CI/CD can fight your CDN by reissuing every asset on your website on every single publish, causing all of your visitors to soak up bandwidth at the same time. If you name your JS and CSS bundles based on the hash of the contents instead of prefixed with a version number, then many publishes will reuse the same assets, except that doesn't scale so the bigger the website the more evictions you'll see. But a site bundle with a per-page or per-subject matter bundle does scale, because targeted fixes often won't affect your home page.
_puk 5y ago
Nice that this looks like it's going to be the engine for WindiCSS 4.0.. less fragmentation is for the best, and Windi does a fantastic job already.
The_rationalist 5y ago
to be clear, the issue it solve only apply for css in js/tailwind but do not apply for standard SCSS code that use minification/dead code elimination (which is fast)
krsdcbl 5y ago
It's an interesting approach, but does it really solve the problems atomic/functional css have asude from purging/unused styles? I always felt like the most useful thing tailwind actually brings is the preset based style system, as a dev u don't need to remember if the styleguide calls for 6 or 8 pixel space, it's just "m" to me and i can apply styles without worrying too much about design details. If this approach compiles the atomic classes depending on arbitrary numbers, have i gained anything aside using the "class" instead of the "style" property? (aside specificity of course)
yurishimo 5y ago
This project looks pretty interesting, but I find the hoops the author decided to jump through to showcase the "bad" parts of existing tooling hilarious. The Tailwind config file "downsides" were the most interesting. 5 minutes every time to find the config variable to change? Maybe 5 minutes the first time and then it's the exact same process to for every other attribute. Tailwind even renamed all of the options to mirror the JS counterparts. Again, I think this is a cool idea, but not everything needs to be a pissing contest. Just state the features your thing provides and let users decide if it's worth switching. Side note: some performance numbers on using attribute selectors vs css classes would be interesting. I'd assume it's negligible until tens-of-thousands of selectors, but I'm curious nonetheless!
- eyelidlessness 5y ago
  I don’t necessarily read it as a passing contest. Sometimes the best way to convey why a thing you built is interesting—especially in a crowded space like styling solutions—is to show how it contrasts with better known solutions.
- krsdcbl 5y ago
  adding to this that these "downsides" are the actual upsides of tailwind. Getting rid of config in favour of arbitrary numbers kills a lot of the actual utility such frameworks provide
  - yurishimo 5y ago
    Not to mention tailwind has had some sort of arbitrary value support since the JIT was introduced.
- steve_adams_86 5y ago
  I noticed this too. I actually find extending tailwind very intuitive. Rather than finding myself out of context and wasting time I felt grateful that someone designed a tool well and glad to be adopting it in my project.
remorses 5y ago
Antfu is great, I have been following his oss work for the past year and everything he does is great He is also one of the main vite contributors
yakshaving_jgt 5y ago
This approach still seems nonsensical to me, and I've written tens of thousands of lines of CSS. If you're going to be doing things like .m-0 { margin: 0; } Then you may as well just do <div style="margin: 0"></div>
- carry_bit 5y ago
  The former lets you use media queries to make it responsive, and can help impose a design system versus having a bunch of random sizes and colors.
- echelon 5y ago
  I suppose in theory it gives you the ability to tweak all styles of a given type together in unison. .color-primary { color: #f00; } Could easily become .color-primary { color: #00f; } But beyond this case, I don't understand it either. It feels like the gravity has moved a long way from CSS Zen Garden and that the web isn't about semantics and documents anymore since the practical usage differs. Any designers that can shed light on this tailwind trend?
  - sodapopcan 5y ago
    You're not far off. What people often miss is that this is to be used for creating design systems. `m-0` doesn't necessarily mean `margin is zero`, it means the smallest margin available. You should also call it `m-xs` for example. Or if it does mean margin is 0 then it might be better suited to be called `m-none`. These utility classes play very nicely with component-based design. Just like JSX puts your markup in the same file as your code, this does the same for styling/layout. I wouldn't say it's necessarily "better for all" but it's absolutely a very viable way to work no matter how much some may cry heresy. It saves you from having to figure out what you're going to call everything upfront and let's you break things into components as you go. I haven't personally use it on a big project but I've found it a very clean way to work and have heard good things from folks using it on big projects.
  - krsdcbl 5y ago
    That's the thing that speaks for tailwind with the swatch-like config, but applying this principle here would lead to utter chaos. If i need a little more spacing on alk my medium margins, i would end up with something like .m-8 { margin: 10px; } if i start editing these compiled styles
otrahuevada 5y ago
As a full-stack dev on a gigantic codebase, I struggle a lot with understanding the allure of this type of tools, considering the extra baggage they bring with them. I could see myself doing something like .card { @include margin(2); @include borderRadius(10) // etc } and so on, then using class="card" to tie it together, but adding a tree-shaking step, or a pre-crawling (!!) step just strikes me as entirely too hefty a cost for what amounts to parametric variants of a given style token
- lytedev 5y ago
  Do this with CSS variables and only add new ones once you need them. This has been working great for me.
nickthemagicman 5y ago
I don't know what to think about this style of CSS. I was taught to use classes semantically and style from there. A navbar would be a .navbar class for example and that would be styled in the stylesheet. Istead of a bunch of classes in the html to define the styles for the navbar. I'm old school though and this may be the better more modern way?
- mattferderer 5y ago
  This might be worth a read or listen to with read aloud - https://adamwathan.me/css-utility-classes-and-separation-of-concerns/ https://adamwathan.me/css-utility-classes-and-separation-of-... He discusses why he changed from this thought process & mentions the old CSS Zen Garden many of us grew up with as the "ideal" way to do CSS. Of course your mileage may vary depending on the type of work/projects you do.
  - nickthemagicman 5y ago
    Holy cow have been rabbit holing on all morning on this. I've had to fight my zen garden conditioning the whole time but I have to admit this looks good. Thanks for the link!
conradludgate 5y ago
I'm not really a fan of CSS frameworks. I never get the hang of them. Most of them are really good at getting a consistent style, but any form of customisation often ends up more complicated than just implementing it yourself In my work flows I typically keep my components/layouts small and my CSS scoped. So I write the semantic HTML (or JSX), add a few classes in there and then style the classes (often in the browser rather than in my editor). People often complain about the web no longer being semantic, and I'd argue that CSS should also be semantic. The classes should fit the components. A button component should have a button class. A payment form should have a payment form class.
- conradludgate 5y ago
  Admittedly, my front end work is a side project for me and not my day job. But I have actively tried to get used to style frameworks, big JS ones like Ant and MUI, or CSS ones like Bootstrap or Tailwind and just never got it

52 points by city41 5y ago

This is a long read that explores some downsides and limitations of existing atomic css frameworks. Then it introduces UnoCSS, which is an interesting and fresh new take on the idea.

willio58 5y ago

Really cool stuff. The arbitrary css in class names is just so cool, especially with css vars.

spiderfarmer 5y ago

FYI. The stylesheet for this relatively simple article is 152 Kb of which 88.5% is unused according Chrome's code coverage tool.

johnthedebs 5y ago
Also worth noting that it's ~37kb over the wire, applies to the whole site (where it is much more thoroughly used), and contains a bunch of svg icons that don't need to be loaded in separate requests. If anything, that reinforces to me how well considered it is!
- andrei_says_ 5y ago
  I appreciate how these two statements, while fully factual, paint two completely different pictures. Such a great example of omission and inclusion when reporting the facts.
- eyelidlessness 5y ago
  And this approach may or may not be better, depending on usage patterns. Code splitting or even inlining may benefit users who tend to view only one page then move on. A single file loaded and cached upfront will tend to benefit users who stay on your site to view multiple pages. In either case, splitting atomic CSS is probably more complex to get right because of ordering, and possibly more inefficient for everyone as well.
- hinkley 5y ago
  I don't want to necessarily argue with OP's CSS file but there is a teachable moment here. We make a master CSS file because we don't want to serve bunches of CSS files per page. The constraint we want is: n << 100 There are other solutions besides n=1 that satisfy this inequality. Serving 2 CSS files per page does not introduce substantial latency over 1, even on HTTP 1.1 user agents. Once you get to 4 you start to cause some problems, but 2 is barely noticeable. CI/CD can fight your CDN by reissuing every asset on your website on every single publish, causing all of your visitors to soak up bandwidth at the same time. If you name your JS and CSS bundles based on the hash of the contents instead of prefixed with a version number, then many publishes will reuse the same assets, except that doesn't scale so the bigger the website the more evictions you'll see. But a site bundle with a per-page or per-subject matter bundle does scale, because targeted fixes often won't affect your home page.

_puk 5y ago

Nice that this looks like it's going to be the engine for WindiCSS 4.0.. less fragmentation is for the best, and Windi does a fantastic job already.

The_rationalist 5y ago

to be clear, the issue it solve only apply for css in js/tailwind but do not apply for standard SCSS code that use minification/dead code elimination (which is fast)

krsdcbl 5y ago

It's an interesting approach, but does it really solve the problems atomic/functional css have asude from purging/unused styles? I always felt like the most useful thing tailwind actually brings is the preset based style system, as a dev u don't need to remember if the styleguide calls for 6 or 8 pixel space, it's just "m" to me and i can apply styles without worrying too much about design details. If this approach compiles the atomic classes depending on arbitrary numbers, have i gained anything aside using the "class" instead of the "style" property? (aside specificity of course)

yurishimo 5y ago

This project looks pretty interesting, but I find the hoops the author decided to jump through to showcase the "bad" parts of existing tooling hilarious. The Tailwind config file "downsides" were the most interesting. 5 minutes every time to find the config variable to change? Maybe 5 minutes the first time and then it's the exact same process to for every other attribute. Tailwind even renamed all of the options to mirror the JS counterparts. Again, I think this is a cool idea, but not everything needs to be a pissing contest. Just state the features your thing provides and let users decide if it's worth switching. Side note: some performance numbers on using attribute selectors vs css classes would be interesting. I'd assume it's negligible until tens-of-thousands of selectors, but I'm curious nonetheless!

eyelidlessness 5y ago
I don’t necessarily read it as a passing contest. Sometimes the best way to convey why a thing you built is interesting—especially in a crowded space like styling solutions—is to show how it contrasts with better known solutions.
krsdcbl 5y ago
adding to this that these "downsides" are the actual upsides of tailwind. Getting rid of config in favour of arbitrary numbers kills a lot of the actual utility such frameworks provide
- yurishimo 5y ago
  Not to mention tailwind has had some sort of arbitrary value support since the JIT was introduced.
steve_adams_86 5y ago
I noticed this too. I actually find extending tailwind very intuitive. Rather than finding myself out of context and wasting time I felt grateful that someone designed a tool well and glad to be adopting it in my project.

remorses 5y ago

Antfu is great, I have been following his oss work for the past year and everything he does is great He is also one of the main vite contributors

yakshaving_jgt 5y ago

This approach still seems nonsensical to me, and I've written tens of thousands of lines of CSS. If you're going to be doing things like .m-0 { margin: 0; } Then you may as well just do <div style="margin: 0"></div>

carry_bit 5y ago
The former lets you use media queries to make it responsive, and can help impose a design system versus having a bunch of random sizes and colors.
echelon 5y ago
I suppose in theory it gives you the ability to tweak all styles of a given type together in unison. .color-primary { color: #f00; } Could easily become .color-primary { color: #00f; } But beyond this case, I don't understand it either. It feels like the gravity has moved a long way from CSS Zen Garden and that the web isn't about semantics and documents anymore since the practical usage differs. Any designers that can shed light on this tailwind trend?
- sodapopcan 5y ago
  You're not far off. What people often miss is that this is to be used for creating design systems. `m-0` doesn't necessarily mean `margin is zero`, it means the smallest margin available. You should also call it `m-xs` for example. Or if it does mean margin is 0 then it might be better suited to be called `m-none`. These utility classes play very nicely with component-based design. Just like JSX puts your markup in the same file as your code, this does the same for styling/layout. I wouldn't say it's necessarily "better for all" but it's absolutely a very viable way to work no matter how much some may cry heresy. It saves you from having to figure out what you're going to call everything upfront and let's you break things into components as you go. I haven't personally use it on a big project but I've found it a very clean way to work and have heard good things from folks using it on big projects.
- krsdcbl 5y ago
  That's the thing that speaks for tailwind with the swatch-like config, but applying this principle here would lead to utter chaos. If i need a little more spacing on alk my medium margins, i would end up with something like .m-8 { margin: 10px; } if i start editing these compiled styles

otrahuevada 5y ago

As a full-stack dev on a gigantic codebase, I struggle a lot with understanding the allure of this type of tools, considering the extra baggage they bring with them. I could see myself doing something like .card { @include margin(2); @include borderRadius(10) // etc } and so on, then using class="card" to tie it together, but adding a tree-shaking step, or a pre-crawling (!!) step just strikes me as entirely too hefty a cost for what amounts to parametric variants of a given style token

lytedev 5y ago
Do this with CSS variables and only add new ones once you need them. This has been working great for me.

nickthemagicman 5y ago

I don't know what to think about this style of CSS. I was taught to use classes semantically and style from there. A navbar would be a .navbar class for example and that would be styled in the stylesheet. Istead of a bunch of classes in the html to define the styles for the navbar. I'm old school though and this may be the better more modern way?

mattferderer 5y ago
This might be worth a read or listen to with read aloud - https://adamwathan.me/css-utility-classes-and-separation-of-concerns/ https://adamwathan.me/css-utility-classes-and-separation-of-... He discusses why he changed from this thought process & mentions the old CSS Zen Garden many of us grew up with as the "ideal" way to do CSS. Of course your mileage may vary depending on the type of work/projects you do.
- nickthemagicman 5y ago
  Holy cow have been rabbit holing on all morning on this. I've had to fight my zen garden conditioning the whole time but I have to admit this looks good. Thanks for the link!

conradludgate 5y ago

I'm not really a fan of CSS frameworks. I never get the hang of them. Most of them are really good at getting a consistent style, but any form of customisation often ends up more complicated than just implementing it yourself In my work flows I typically keep my components/layouts small and my CSS scoped. So I write the semantic HTML (or JSX), add a few classes in there and then style the classes (often in the browser rather than in my editor). People often complain about the web no longer being semantic, and I'd argue that CSS should also be semantic. The classes should fit the components. A button component should have a button class. A payment form should have a payment form class.

conradludgate 5y ago
Admittedly, my front end work is a side project for me and not my day job. But I have actively tried to get used to style frameworks, big JS ones like Ant and MUI, or CSS ones like Bootstrap or Tailwind and just never got it