|
|
|
|
|
by jonahx
4104 days ago
|
|
"Semantic" in the sense he's complaining about means, roughly, "what the thing is" rather than "how the thing looks". So instead of 'class="one-third column left"' you would write 'class="left-navigation"' or, if you want to be more pure 'class="category-navigation"', which acknowledges that being on the left or right is itself a presentation choice that should be controlled in CSS. Behind the scenes, of course, you can use SASS or similar to apply the styles of left, one-third width, etc, to your semantically-named class, without changing the name "category-navigation" or your markup at all. Markup written this way is, imo, indeed more readable, maintainable, and less likely to change. Whether you agree with that or not, that's the meaning of "semantic" in CSS arguments. The argument here is similar to the argument for writing declarative code, or, in OO, for ensuring that your objects, and their names, match natural domain concepts. The rates of change of such concepts are generally much slower than the rates of change of their concrete manifestations in views. |
|
The way I see it, that thing is a boundary for the grid. In fact, I bet if you narrow your screen, that "thing" changes the way it looks entirely and is no longer a "column" but rather stacks above or below its counterparts within the same grid "row". If you used the class "left-navigation", to me that's describing how it looks even more than saying it's a "grid column" (because the navigation won't be on the "left" on narrow screens)!
Of course your example of class="category-navigation" does not suffer from this problem, but again my point is that sure it's more "pure" from the perspective of describing the element's place in the overall structure of the page, but this is not the purpose of the 'class' attribute! The HTML5 elements are for structuring the content... but classes are hooks for styling the content. As long as the styles themselves are not intermingled within the HTML, I think it's no more or less "semantic" to use words that imply meaning to the css versus the content itself.
Finally, in my experience building tons and tons of CMS-based sites over the years, the "meaning" of the content that exists in a particular location of the page changes a lot more frequently than the visual layout of the page. So I'd argue that it's more likely (in my experience, for the kinds of sites I tend to build) that using "column" as a class name will keep its intended meaning for much longer than using something like "category-navigation" (because one day someone in marketing is going to want to put a CTA button or more social links in that spot that you originally intended to be for "category navigation").