3 ms·

Why do HTML classes have to be semantic, and by semantic I mean describing the content encapsulated in the element? I never understood this mantra. It's parrote

Why do HTML classes have to be semantic, and by semantic I mean describing the content encapsulated in the element? I never understood this mantra. It's parroted around and followed religiously, often lacking any arguments. It's not for users. Users aren't going to `view source` and say, "Look at all this rich, semantic goodness!" I could see their utility for search engines and vertical web crawlers, but beyond that, I just don't get it. I'm using OOCSS now and have abandoned strict semantic HTML class names. The huge benefit is that the CSS ruleset is small and maintenance is so easy. When you're using a grid system, for example, you don't have to look at the class name, and then reference that in the CSS (inspector helps, I will admit). You already know what's happening. It's a lot less to learn, and updates are much faster in my experience.

wdewind 13y ago
Because when you are refactoring your CSS you want things to be coupled correctly. You want all the things that are similar in content to have the same class so that they look the same. If you don't want this your site is probably not very well designed. It has nothing to do with reading the file, either by humans or robots, it has to do with correctly separating concerns and then coupling them where they should be.
- ahallock 13y ago
  I agree with what you're saying. I just wouldn't follow this dogmatically. To me it boils down to what's DRY, maintainable, and easy to refactor. I do use more abstract class names that have no presentational meaning, but that's only because it's a bundle of styles used in a lot of places, like a heading repeated all over. Or maybe it's a component with a bunch of interrelated elements. But there are one-off situations where I've used <p class="color-offwhite"> or <p class="color-brand font-size-sm">. I also find using grid classes directly is easy to maintain. Using grid classes directly also means you've separated most of your layout concerns. So separating concerns can happen in different contexts. OK, I'm done rambling.
adeaver 13y ago
They actually shouldn't, assuming I'm understanding you properly. class should never describe the content but should instead be generic. So rather that class="big_red_text" it should be class="alert_text" or something
- integraton 13y ago
  FYI, big_red_text is presentational (specifies size and color, while saying nothing about what the role or purpose of the text is) while alert is semantic (describes the content, says nothing about presentation).
larksimian 13y ago
Of all the reasons offered for it I only ever really saw one as legitimate(ish): making it easier for robots to parse your site, whether it's google bot or screen readers for the visually impaired. I think it was a reaction to monolithic, single file, hundreds of divs web development styles(way before my time). I find it much more useful to just use some sort of templating and split my html files into small chunks. At which point it doesn't matter if you code them in divs with decimal code classes, it's still pretty easy to deal with.

wdewind 13y ago

Because when you are refactoring your CSS you want things to be coupled correctly. You want all the things that are similar in content to have the same class so that they look the same. If you don't want this your site is probably not very well designed. It has nothing to do with reading the file, either by humans or robots, it has to do with correctly separating concerns and then coupling them where they should be.

ahallock 13y ago
I agree with what you're saying. I just wouldn't follow this dogmatically. To me it boils down to what's DRY, maintainable, and easy to refactor. I do use more abstract class names that have no presentational meaning, but that's only because it's a bundle of styles used in a lot of places, like a heading repeated all over. Or maybe it's a component with a bunch of interrelated elements. But there are one-off situations where I've used <p class="color-offwhite"> or <p class="color-brand font-size-sm">. I also find using grid classes directly is easy to maintain. Using grid classes directly also means you've separated most of your layout concerns. So separating concerns can happen in different contexts. OK, I'm done rambling.

adeaver 13y ago

They actually shouldn't, assuming I'm understanding you properly. class should never describe the content but should instead be generic. So rather that class="big_red_text" it should be class="alert_text" or something

integraton 13y ago
FYI, big_red_text is presentational (specifies size and color, while saying nothing about what the role or purpose of the text is) while alert is semantic (describes the content, says nothing about presentation).

larksimian 13y ago

Of all the reasons offered for it I only ever really saw one as legitimate(ish): making it easier for robots to parse your site, whether it's google bot or screen readers for the visually impaired. I think it was a reaction to monolithic, single file, hundreds of divs web development styles(way before my time). I find it much more useful to just use some sort of templating and split my html files into small chunks. At which point it doesn't matter if you code them in divs with decimal code classes, it's still pretty easy to deal with.