3 ms·
If we’re trying to be serious: this is a bit like comparing strings to enums/sum types or sets. The point of atomic/utility CSS is to have a well defined and c
by dgb23 5y ago
If we’re trying to be serious: this is a bit like comparing strings to enums/sum types or sets.
The point of atomic/utility CSS is to have a well defined and composable subset of rules. I suggest you seriously try it. I was surprised after a short while. It’s a very productive approach.
- wwweston 5y agoI can see this potentially working out well if the "atoms" are roughly at the level of design system elements (for example, maybe something like Tachyons). At the level of class-per-CSS-property it just makes no sense to me. CSS properties are a well-defined and composable set of rules too.
- aidos 5y agoIt’s actually more fine grained than that, which is what makes it work. You can add responsive variations and hover styles all in the same place. It’s effectively inline styles on steroids. And actually, today for the first time in ages and ended up having to add “real css” to style an input[range] and it was so weird and disjointed to me to not define it right where I needed it.
- Tade0 5y agoI've tried it and the amount of visual clutter it introduces is matched only by inline CSS.
- zffr 5y agoUsing Tailwind doesn't mean you need to individually list each class every time. You can use PostCSS to define class that compose multiple tailwind classes together (See how @apply is used here: https://tailwindcss.com/docs/using-with-preprocessors https://tailwindcss.com/docs/using-with-preprocessors). My flow is usually to iterate by adding individual classes directly to HTML elements, and when I see a pattern emerge I'll sometimes make a new class with that inherits from multiple tailwind classes.