5 ms·

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 h

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 1y ago
> 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.
- librasteve 1y ago
  this is exactly correct … Gnat CSS is a great way to police encapsulation imo
- tym0 1y ago
  I've stopped doing frontend several years ago but it doesn't really feel like the trade off of the newer styling solutions vs just CSS Components for scoping are worth it.
vorador 1y ago
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.
- wvbdmp 1y ago
  The use cases are perfectly material, but unfortunately the ad business depends on shitty, ever-changing HTML and scripting shenanigans.
  - vorador 1y ago
    What did you/do you use the semantic web for?
    - wvbdmp 1y ago
      Not much, since we’ve never really had it, but yes, I would love to consume hypertext like a stable API, have user-styles and block elements I don’t like. I do these things now, too, but in a better world they could be less of a hassle technically and less niche socially, then I’d do them even more. Here’s a uBlock Origin style I use for hackernews, for example: news.ycombinator.com##.comment:style(max-width: 40em !important;)
- fleebee 1y ago
  Semantic web is a bit different from semantic HTML. As I understand it, the main point of semantic web is making the web machine readable, often using languages specifically designed for that task that are not HTML. Semantic HTML is more concerned with writing standardized HTML that leverages browser capabilities and respects users who use assistive technology to browse the web. Frankly, I don't see what this framework has to do with either. I was curious about how they implemented the dropdown menus, and they're specially styled <details> elements, which are normally used for accordions. That seems a bit strange to me, because the obvious choice for a dropdown is the <select> element.
imiric 1y ago
... 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.
- deleted 1y ago
  [deleted]
- ChocolateGod 1y ago
  > I truly don't understand it Quick iteration and good relative spacing for margins, paddings, dimensions etc. A lot of people combine Tailwind with something like Vite so they're getting instant previews and don't need to swap focus to a style sheet to style their component. I swapped to Tailwind and honestly could never swap back.
- vehemenz 1y ago
  I appreciate strong opinions, but I appreciate good arguments even more. And there's just nothing here. You're raising a bunch of meyerweb talking points from 2003, except why? WHY does markup need to be "semantic" in the sense that you mean? Actually, WHY? Provide a supporting argument that it makes a difference to developers or end users. Remember, we've all been doing it that way for years, and we switched to Tailwind. You need to have something more compelling to developers who have already made up their minds. > 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`? There are several reasons, but media queries would be reason 1. Why is it useless, again? Remember, we can't tell what your high-level abstractions do without opening at least two files, plus we have to understand any inherited/cascading rules on top of that. If that complexity doesn't matter, then it's argument time again. > It's making people forget how to use CSS Tailwind relies on CSS for its class names. How would one use it without knowing CSS in the first place? Secondly, why would it be bad (argument time again)? The reasons for Tailwind are well understood. It's way faster, trivial to pick up, and easier to maintain longterm, especially in a team environment, than bespoke CSS/DOM abstractions that have layers of hidden complexity. Now, what does your way of doing CSS offer? Remember, tons of people switched from older methodologies to Tailwind and have already priced in the benefits, small as they were.
giveita 1y ago
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.
kbrannigan 1y ago
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:  <div class="px-4 py-2 bg-blue-500 text-white rounded shadow-md hover:bg-blue-600">  <div class="btn-primary">
- pwdisswordfishz 1y ago
  Or just <button>…
- j45 1y ago
  You don’t edit it much after it’s done. You get used to reading any code the more you read it.
mixmastamyk 1y ago
This is largely a classless framework. Meaning it typically styles tags themselves.
crazygringo 1y ago
...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.
- handsclean 1y ago
  The big missing piece for me was that these strategies are meant to be used with React or some other framework. So, in your example, you actually only edit in one place, a SidebarButton component.

nailer 1y ago

> 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.

librasteve 1y ago
this is exactly correct … Gnat CSS is a great way to police encapsulation imo
tym0 1y ago
I've stopped doing frontend several years ago but it doesn't really feel like the trade off of the newer styling solutions vs just CSS Components for scoping are worth it.

vorador 1y ago

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.

wvbdmp 1y ago
The use cases are perfectly material, but unfortunately the ad business depends on shitty, ever-changing HTML and scripting shenanigans.
- vorador 1y ago
  What did you/do you use the semantic web for?
  - wvbdmp 1y ago
    Not much, since we’ve never really had it, but yes, I would love to consume hypertext like a stable API, have user-styles and block elements I don’t like. I do these things now, too, but in a better world they could be less of a hassle technically and less niche socially, then I’d do them even more. Here’s a uBlock Origin style I use for hackernews, for example: news.ycombinator.com##.comment:style(max-width: 40em !important;)
fleebee 1y ago
Semantic web is a bit different from semantic HTML. As I understand it, the main point of semantic web is making the web machine readable, often using languages specifically designed for that task that are not HTML. Semantic HTML is more concerned with writing standardized HTML that leverages browser capabilities and respects users who use assistive technology to browse the web. Frankly, I don't see what this framework has to do with either. I was curious about how they implemented the dropdown menus, and they're specially styled <details> elements, which are normally used for accordions. That seems a bit strange to me, because the obvious choice for a dropdown is the <select> element.

imiric 1y ago

... 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.

deleted 1y ago
[deleted]
ChocolateGod 1y ago
> I truly don't understand it Quick iteration and good relative spacing for margins, paddings, dimensions etc. A lot of people combine Tailwind with something like Vite so they're getting instant previews and don't need to swap focus to a style sheet to style their component. I swapped to Tailwind and honestly could never swap back.
vehemenz 1y ago
I appreciate strong opinions, but I appreciate good arguments even more. And there's just nothing here. You're raising a bunch of meyerweb talking points from 2003, except why? WHY does markup need to be "semantic" in the sense that you mean? Actually, WHY? Provide a supporting argument that it makes a difference to developers or end users. Remember, we've all been doing it that way for years, and we switched to Tailwind. You need to have something more compelling to developers who have already made up their minds. > 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`? There are several reasons, but media queries would be reason 1. Why is it useless, again? Remember, we can't tell what your high-level abstractions do without opening at least two files, plus we have to understand any inherited/cascading rules on top of that. If that complexity doesn't matter, then it's argument time again. > It's making people forget how to use CSS Tailwind relies on CSS for its class names. How would one use it without knowing CSS in the first place? Secondly, why would it be bad (argument time again)? The reasons for Tailwind are well understood. It's way faster, trivial to pick up, and easier to maintain longterm, especially in a team environment, than bespoke CSS/DOM abstractions that have layers of hidden complexity. Now, what does your way of doing CSS offer? Remember, tons of people switched from older methodologies to Tailwind and have already priced in the benefits, small as they were.

giveita 1y ago

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.

kbrannigan 1y ago

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:  <div class="px-4 py-2 bg-blue-500 text-white rounded shadow-md hover:bg-blue-600">  <div class="btn-primary">

pwdisswordfishz 1y ago
Or just <button>…
j45 1y ago
You don’t edit it much after it’s done. You get used to reading any code the more you read it.

mixmastamyk 1y ago

This is largely a classless framework. Meaning it typically styles tags themselves.

crazygringo 1y ago

...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.

handsclean 1y ago
The big missing piece for me was that these strategies are meant to be used with React or some other framework. So, in your example, you actually only edit in one place, a SidebarButton component.