5 ms·

Cool! I've been wanting to try a framework like Tailwind, but I get the feeling I'd like something like Atomic CSS [1] better. It generates classes based on wha

Cool! I've been wanting to try a framework like Tailwind, but I get the feeling I'd like something like Atomic CSS [1] better. It generates classes based on what you use, as opposed to Tailwind, which supplies thousands of classes that you may need and leaves it up to you to strip out the ones you don't use (I think?). I dunno, it just seems like Tailwind has it backwards to me, but am I misunderstanding something? Does anyone have experience with both (or some other micro class framework) who can tell me how they compare? [1] https://acss.io/ https://acss.io/

thijsvandien 7y ago
I have no experience with Atomic CSS, but I think an important part of Tailwind is that it simultaneously serves as a design system. By having relatively limited options for, let's say, font sizes, you don't spend a lot of time making micro adjustments. The author of Tailwind also co-authored the Refactoring UI book that pretty much explains this philosophy that the framework was built to support. Of course, in the end you can add as much custom CSS as you want, written as utilities or not, but the point is to quickly get to a reasonable design.
- dmix 7y ago
  You have to strike a balance between reusability + a central base of the design/theme which defines the consistent look and feel on one hand with the composable LEGO style building blocks which Basscss https://basscss.com/ https://basscss.com/ and Tachyons http://tachyons.io/ http://tachyons.io/ and other similar functional css frameworks made popular. The problem with the latter is you’ve coupled the styles to names embedded in the HTML which means a whole lot of grep and replace when things change. Taking that further with actual custom values being applied in the class names in the view the way Atomic sounds like it’s taking that idea too far. Those values should be constrained the way it’s done in https://rebassjs.org/ https://rebassjs.org/ where customization of base values is handled with CSS in JS. The removal of unused classes can be achieved using tools like PurgeCSS https://www.purgecss.com/ https://www.purgecss.com/ Ultimately I’ve found Tailwind to have the best balance between a composable utility class base approach, with consistent base values, and a mature and good looking parent framework. Otherwise I’d go with one of the smaller utility kits mentioned above for simple projects.
oskarp 7y ago
This is what I use to remove unused CSS from Tailwind, works great! https://tailwindcss.com/docs/controlling-file-size/ https://tailwindcss.com/docs/controlling-file-size/
HEHENE 7y ago
We use PurgeCSS[0] as part of our build process to remove all of the Tailwind classes that weren't used. That gives our developers the freedom to work/experiment with everything Tailwind has to offer while spitting out super tiny and optimized CSS files. I just checked one of our more recent projects and the resulting CSS is 2.4KB, about half of which is actually an SVG that's used in a background. [0] https://www.purgecss.com/ https://www.purgecss.com/
leeoniya 7y ago
shameless plug: https://github.com/leeoniya/dropcss https://github.com/leeoniya/dropcss faster and more thorough than PurgeCSS (and all others). specifically for handling TailWind's weird classnames: https://github.com/leeoniya/dropcss#special--escaped-sequences https://github.com/leeoniya/dropcss#special--escaped-sequenc...

thijsvandien 7y ago

I have no experience with Atomic CSS, but I think an important part of Tailwind is that it simultaneously serves as a design system. By having relatively limited options for, let's say, font sizes, you don't spend a lot of time making micro adjustments. The author of Tailwind also co-authored the Refactoring UI book that pretty much explains this philosophy that the framework was built to support. Of course, in the end you can add as much custom CSS as you want, written as utilities or not, but the point is to quickly get to a reasonable design.

dmix 7y ago
You have to strike a balance between reusability + a central base of the design/theme which defines the consistent look and feel on one hand with the composable LEGO style building blocks which Basscss https://basscss.com/ https://basscss.com/ and Tachyons http://tachyons.io/ http://tachyons.io/ and other similar functional css frameworks made popular. The problem with the latter is you’ve coupled the styles to names embedded in the HTML which means a whole lot of grep and replace when things change. Taking that further with actual custom values being applied in the class names in the view the way Atomic sounds like it’s taking that idea too far. Those values should be constrained the way it’s done in https://rebassjs.org/ https://rebassjs.org/ where customization of base values is handled with CSS in JS. The removal of unused classes can be achieved using tools like PurgeCSS https://www.purgecss.com/ https://www.purgecss.com/ Ultimately I’ve found Tailwind to have the best balance between a composable utility class base approach, with consistent base values, and a mature and good looking parent framework. Otherwise I’d go with one of the smaller utility kits mentioned above for simple projects.

oskarp 7y ago

This is what I use to remove unused CSS from Tailwind, works great! https://tailwindcss.com/docs/controlling-file-size/ https://tailwindcss.com/docs/controlling-file-size/

HEHENE 7y ago

We use PurgeCSS[0] as part of our build process to remove all of the Tailwind classes that weren't used. That gives our developers the freedom to work/experiment with everything Tailwind has to offer while spitting out super tiny and optimized CSS files. I just checked one of our more recent projects and the resulting CSS is 2.4KB, about half of which is actually an SVG that's used in a background. [0] https://www.purgecss.com/ https://www.purgecss.com/

leeoniya 7y ago

shameless plug: https://github.com/leeoniya/dropcss https://github.com/leeoniya/dropcss faster and more thorough than PurgeCSS (and all others). specifically for handling TailWind's weird classnames: https://github.com/leeoniya/dropcss#special--escaped-sequences https://github.com/leeoniya/dropcss#special--escaped-sequenc...