There's a worrying trend in modern web development, where developers are throwing away decades of carefully wrought systems for a bit of perceived convenience. Tools such as Tailwind CSS seem to be spreading like wildfire, with very few people ever willing to acknowledge the regression they bring to our field. And I'm getting tired of it
I’ve always preferred CSS preprocessing with tools like SASS over frameworks like Tailwind.
They work extremely well with JS frameworks like React since they’re both pretty much just syntactic upgrades of existing systems rather than an obfuscation of systems that abuse modularity.
That being said, CSS frameworks are still wonderful, used right they can save a lot of time during early development by outsourcing the majority of design to the framework devs.
That being said, CSS frameworks are still wonderful, used right they can save a lot of time during early development by outsourcing the majority of design to the framework devs.
That’s actually my intent with using a CSS framework. A personal project of mine reached minimum viable product statud status (phones…) recently, I included bulma, and used some of its components for stuff like menus and modals. It was definitely faster than writing everything by hand early on. But I also ended up writing my own CSS anyway, especially with the grid, which is the foundation on which my app works on (it’s a grid-based colour mixing app).
I agree, I think CSS frameworks have a place for prototyping and we shouldn’t rely on them as a project moves towards a proper release 🤔
Then again, some people might think the obfuscation in 20+ classes is somehow a good thing…frankly, I think it’s worse than inline styles. It’s basically obfuscated inline styles!
Then again, some people might think the obfuscation in 20+ classes is somehow a good thing…
I’d argue that CSS is itself an obfuscation (read: abstraction), and isn’t even implemented consistently across browsers. If the abstraction results in less duplication, more consistency across the website, and higher productivity, then I don’t think that’s a bad thing. (Of course, the flip side is that if using the abstraction results in the same learning curve with less transparency, then the benefits might not outweigh the cost.)
Having never used tailwind, I can’t give a personal opinion on that, but I find it hard to work on any decently sized project without SCSS. Sure I can write pure CSS, but SCSS provides so many QoL features over raw CSS that it’s hard to pass it up, and it’s easy enough to get setup.
I mentioned some of this in another comment in this thread[1], but CSS has gotten tremendously better since Sass was first introduced in the 00s. Many features we used are now native to CSS, and can be used in your browser, today. Some of them are even better than their sass variants, or at least have special abilities sass doesn’t. calc() comes to mind, as it can mix and match units in a way a preprocessor just cant. You can do calc(100% - 10px), which is good for all sorts of stupid corner cases.
And native CSS nesting is basically 1:1 with how Sass does it:
I still use Sass or Stylus[2] on virtually all of my projects, but its nice to not have to when you just need to get something out or write a userstyle or something.
Not sure how to provide an instance agnostic link, the few things I’ve seen people attempt didn’t work, but here’s the lemdro.id link↩︎
I’m largely giving up on Stylus, its sadly unmaintained. My favorite preprocessor though; takes .sass (indented) style to a whole new level on what you can omit ↩︎
I’ve always preferred CSS preprocessing with tools like SASS over frameworks like Tailwind.
They work extremely well with JS frameworks like React since they’re both pretty much just syntactic upgrades of existing systems rather than an obfuscation of systems that abuse modularity.
That being said, CSS frameworks are still wonderful, used right they can save a lot of time during early development by outsourcing the majority of design to the framework devs.
That’s actually my intent with using a CSS framework. A personal project of mine reached minimum viable product
statudstatus (phones…) recently, I included bulma, and used some of its components for stuff like menus and modals. It was definitely faster than writing everything by hand early on. But I also ended up writing my own CSS anyway, especially with the grid, which is the foundation on which my app works on (it’s a grid-based colour mixing app).I agree, I think CSS frameworks have a place for prototyping and we shouldn’t rely on them as a project moves towards a proper release 🤔
Then again, some people might think the obfuscation in 20+ classes is somehow a good thing…frankly, I think it’s worse than inline styles. It’s basically obfuscated inline styles!
I’d argue that CSS is itself an obfuscation (read: abstraction), and isn’t even implemented consistently across browsers. If the abstraction results in less duplication, more consistency across the website, and higher productivity, then I don’t think that’s a bad thing. (Of course, the flip side is that if using the abstraction results in the same learning curve with less transparency, then the benefits might not outweigh the cost.)
Having never used tailwind, I can’t give a personal opinion on that, but I find it hard to work on any decently sized project without SCSS. Sure I can write pure CSS, but SCSS provides so many QoL features over raw CSS that it’s hard to pass it up, and it’s easy enough to get setup.
I mentioned some of this in another comment in this thread[1], but CSS has gotten tremendously better since Sass was first introduced in the 00s. Many features we used are now native to CSS, and can be used in your browser, today. Some of them are even better than their sass variants, or at least have special abilities sass doesn’t.
calc()comes to mind, as it can mix and match units in a way a preprocessor just cant. You can docalc(100% - 10px), which is good for all sorts of stupid corner cases.And native CSS nesting is basically 1:1 with how Sass does it:
.parent { font-weight: 600; &:hover { background: purple; } .child { font-weight: 900; } @media screen and (max-width: 800px) { display: none; } }I still use Sass or Stylus[2] on virtually all of my projects, but its nice to not have to when you just need to get something out or write a userstyle or something.
Not sure how to provide an instance agnostic link, the few things I’ve seen people attempt didn’t work, but here’s the lemdro.id link ↩︎
I’m largely giving up on Stylus, its sadly unmaintained. My favorite preprocessor though; takes
.sass(indented) style to a whole new level on what you can omit ↩︎