▲ | xutopia 4 days ago | |||||||||||||||||||||||||||||||||||||||||||||||||
I can't possibly recommend class based CSS soup anymore. Once you go with utility classes it's hard to go with anything else. It's super intuitive, you don't have to dig through loads of CSS files to figure out where the CSS is and you can simply remove or add classes as you need and see it right there in front of you. | ||||||||||||||||||||||||||||||||||||||||||||||||||
▲ | nailer 4 days ago | parent | next [-] | |||||||||||||||||||||||||||||||||||||||||||||||||
> I can't possibly recommend class based CSS soup anymore. Me neither! > you can simply remove or add classes as you need That sounds like exactly what I was thinking when you said class soup. > you don't have to dig through loads of CSS files to figure out where the CSS is The CSS should be in your components, or in a .css file beside your components at worst. React having bad defaults doesn't need you need to change to adding 20 classes to every HTML element. | ||||||||||||||||||||||||||||||||||||||||||||||||||
| ||||||||||||||||||||||||||||||||||||||||||||||||||
▲ | kbrannigan 4 days ago | parent | prev | next [-] | |||||||||||||||||||||||||||||||||||||||||||||||||
How do you manage the html where you can't even see the tags anymore and it's a spaghetti of utilities in the template for example: <!-- Like his --> <div class="px-4 py-2 bg-blue-500 text-white rounded shadow-md hover:bg-blue-600"> <!-- Instead of this --> <div class="btn-primary"> | ||||||||||||||||||||||||||||||||||||||||||||||||||
| ||||||||||||||||||||||||||||||||||||||||||||||||||
▲ | imiric 4 days ago | parent | prev | next [-] | |||||||||||||||||||||||||||||||||||||||||||||||||
... And end up with elements that have dozens of classes until you need to parse CSS in your head in order to figure out what the element is supposed to look like. This methodology completely misses the point of using classes to begin with. Good class and ID names should be semantic, just like the markup. Don't describe what the CSS does; describe what the element is. Not only that, but it introduces useless abstractions that could've been avoided by just writing CSS directly. How is `.content-center` better than `align-content: center`? Tailwind and its ilk are one of the worst trends to have ever happened in web development. It's making people forget how to use CSS, while being useless in the process. I truly don't understand it. And, yes, I've worked on projects that used it extensively. It's awful. | ||||||||||||||||||||||||||||||||||||||||||||||||||
| ||||||||||||||||||||||||||||||||||||||||||||||||||
▲ | vorador 4 days ago | parent | prev | next [-] | |||||||||||||||||||||||||||||||||||||||||||||||||
It really feels like all these concerns about semantic everything belong to a previous era of the web. I remember arguing with people 20 years ago who believed RDF and the semantic web was going to take over, but the use cases never materialized. | ||||||||||||||||||||||||||||||||||||||||||||||||||
| ||||||||||||||||||||||||||||||||||||||||||||||||||
▲ | mixmastamyk 4 days ago | parent | prev | next [-] | |||||||||||||||||||||||||||||||||||||||||||||||||
This is largely a classless framework. Meaning it typically styles tags themselves. | ||||||||||||||||||||||||||||||||||||||||||||||||||
▲ | giveita 4 days ago | parent | prev | next [-] | |||||||||||||||||||||||||||||||||||||||||||||||||
The hill is pointed at and the soldiers will fight, but obviously it depends what you are doing. Jira wont move to classless, but a blog might. | ||||||||||||||||||||||||||||||||||||||||||||||||||
▲ | crazygringo 4 days ago | parent | prev [-] | |||||||||||||||||||||||||||||||||||||||||||||||||
...and then you need to make all your buttons of a certain type 5px taller or a different color, and you have to go replace the utility class in all 40 buttons. But not any other elements that use the same utility class. Instead of if you'd just given them all the same semantic class ".config-button" or ".sidebar-button" or ".btn-hero" or whatever, you could make that change in a single place. If your CSS has turned into soup, I have to be blunt: you're doing it wrong. And you should never have to "dig through loads of CSS files to figure out where the CSS is", it's 1) literally in your browser inspector when you select the element and 2) your CSS files should be organized so it would be easy anyways. Finding a class is as easy as finding a function definition. Utility classes are for people who want to throw away all the benefits of semantic naming because they don't want to go to the trouble of actually organizing their user interface, even though they see the value in organizing the rest of their code. I honestly don't get it. | ||||||||||||||||||||||||||||||||||||||||||||||||||
|