5 ms·

I'm surprised at the lack of semantic meaning in most popular grid frameworks. Years ago, we moved away from layout with tables because <table><tr> is a horrib

by mantasm 12y ago

I'm surprised at the lack of semantic meaning in most popular grid frameworks. Years ago, we moved away from layout with tables because <table><tr> is a horrible way to separate presentation from content but <div class="two-thirds columns"> is just as bad.

currysausage 12y ago
Reminds me of @hsivonen's wonderful "HOWTO Spot a Wannabe Web Standards Advocate": https://hsivonen.fi/wannabe/ https://hsivonen.fi/wannabe/ Edit: Curious why this is being downvoted. Is humor (intelligent humor in this case IMO) really that frowned upon at HN? Or did someone think I was calling the parent commenter a "Wannabe Web Standards Advocate"? (I certainly wasn't. Quite the opposite.)
deleted 12y ago
[deleted]
k__ 12y ago
AFAIK you shouldn't get this problem if you use the sass/less sources of these frameworks directly. But I didn't find any good tutorials on this. Also, I don't know how this should change the html-elements needed by stuff like the bootstrap components.
- smt88 12y ago
  No tutorial needed. 1. Create your HTML using only semantics. If you're tempting to create a class called, say, "column" or "left-container", stop yourself. If you have multiple items that will be presented the same way, give them the same class. For a shopping site, for example, a class might be "product". 2. Use a CSS preprocessor to inherit non-semantic classes from your framework of choice into the classes you created in step 1. You might use the framework's classes as they are or modify them a little.
  - k__ 12y ago
    (didn't down-vote) This may work for simple cases. But what about stuff like the Bootstrap components, which consist of many HTML-elements?
    - true_religion 12y ago
      If you're going this route, then you wouldn't use Bootstrap. You'd dreg up your own semantic/non-semantic styles from scratch. This works really well on projects that have a dedicated design team.
    - smt88 12y ago
      You have two options. A. You can compose components the same way Bootstrap does, but using semantic classes. For example, if Bootstrap is using "thumbnail-container", you could call your class "product-thumb-container". Because of the way HTML works, container classes are often necessary, and they can be semantic. Think about a legal document: at the end of them, you have appendices. An appendix is like a container: it's factored into the overall structure, but it also has a semantic value. You can't move an appendix somewhere else and still call it an appendix. B. You can use only the parts of Bootstrap that you want, so you could leave components out altogether. As mentioned above, this might be a better option for a larger project with fine-grained, custom designs.
  - wodenokoto 12y ago
    This sounds interesting, but I definitely need a tutorial for step 2.
    - smt88 12y ago
      Just look up the syntax for extending classes for the preprocessor of your choice. This is such an important part of the preprocessors that it'll usually be on the landing page for the documentation (sometimes above the fold). I'd recommend SCSS if you're just getting started.
ZeroGravitas 12y ago
Its not as bad because table had another meaning that was being abused because there was nothing else. That's not the case for grids. Also grids are presentation, not semantic.
oneeyedpigeon 12y ago
I share your frustration, but a general purpose css framework can't really avoid using this approach to support layout. What possible alternative semantic classes could they use that would provide the level of flexibility they're catering for?
- mantasm 12y ago
  It's very doable, but Sass or similar is necessary. For example: http://neat.bourbon.io/ http://neat.bourbon.io/
  - psychometry 12y ago
    This is just absurd: div#alpha { @include span-columns(1); } div#beta { @include span-columns(11); } div#gamma { @include span-columns(2); } ... How is this any better than col-xs-2, col-xs-4, etc.? I see absolutely no reason to obsess over semantic markup anymore. We all have work to do and grid frameworks help us actually get things done.
    - framp 12y ago
      In this way the HTML is static and when you have to change a presentation detail (like the width of the columns) you just have to edit the CSS - as it's meant to be.
      - ossreality 12y ago
        I lol'd. Good one. It's kind of hard to explain in a comment box why that idea is brain dead. How about giving it a real, semantic name and doing the same fucking thing?
    - steveax 12y ago
      Until you have a ton of automated tests. Then a markup (class) change breaks all the selectors used in the tests - not fun. I prefer to abstract the styling so I don't have to fix the tests if the styling needs to change.
deleted 12y ago
[deleted]
jordanlev 12y ago
What exactly do you mean by "semantic meaning"? Meaning to who? For what purpose? Classes on elements exist for the purpose of styling via CSS, not for users to see or screen readers to read or googlebots to classify. So if you want your css classes to "mean something" (which is what "being semantic" is), you want them to mean something to the STYLE of your page! Hence, using class="two-thirds columns" is perfectly semantic towards the purpose of visually styling the page. Did you have some other interpretation of "semantic" that you think should apply instead? Perhaps you mean "the structure of the content"? That's not what classes are for -- that's what the elements themselves are for. Or perhaps you mean for visually-impaired folks to be able to easily navigate the content? That's not what classes are for either -- that's what ARIA roles are for. SEO perhaps? It's possible that google uses class names for this, but that's just black magic voodoo that us mere mortals can have no knowledge about (and even if we did, it could change tomorrow). Here's the thing about using tables for layout... the table element actually has a defined meaning in HTML... it is for tabular data. The div element however does not imply any meaning (other than "arbitrary division of the page"). So using a div here with the classes that imply meaning to the CSS is quite "semantic" in this case.
- jonahx 12y 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.
ZeroGravitas 12y ago
Nicolas Gallagher wrote a pretty thorough rebuttal to this popular idea (at least popular in comment sections, as you note none of the frameworks that have taken the web by storm recently pay any attention to it). http://nicolasgallagher.com/about-html-semantics-front-end-architecture/ http://nicolasgallagher.com/about-html-semantics-front-end-a... Conclusion: "When you choose to author HTML and CSS in a way that seeks to reduce the amount of time you spend writing and editing CSS, it involves accepting that you must instead spend more time changing HTML classes on elements if you want to change their styles. This turns out to be fairly practical, both for front-end and back-end developers – anyone can rearrange pre-built “lego blocks”; it turns out that no one can perform CSS-alchemy."
deleted 12y ago
[deleted]
arvinsim 12y ago
I got tired of using CSS frameworks where classes are used to define widths. Now, I much prefer frameworks that support semantic style like Susy. http://susy.oddbird.net/ http://susy.oddbird.net/
- smt88 12y ago
  If you use SCSS or LESS, you can inherit the widths into semantic classes. So Bootstrap can be as semantic as you want it to be.
  - ffn 12y ago
    Just be sure to use @include and not @extend, otherwise you'll wind up blowing through your allowed selector ration and wind up wonky css bugs that you will never be able to resolve without re-writing everything.
jfroma 12y ago
Agree, I really like this one http://semantic.gs/ http://semantic.gs/

by mantasm 12y ago

currysausage 12y ago

Reminds me of @hsivonen's wonderful "HOWTO Spot a Wannabe Web Standards Advocate": https://hsivonen.fi/wannabe/ https://hsivonen.fi/wannabe/ Edit: Curious why this is being downvoted. Is humor (intelligent humor in this case IMO) really that frowned upon at HN? Or did someone think I was calling the parent commenter a "Wannabe Web Standards Advocate"? (I certainly wasn't. Quite the opposite.)

deleted 12y ago

[deleted]

k__ 12y ago

AFAIK you shouldn't get this problem if you use the sass/less sources of these frameworks directly. But I didn't find any good tutorials on this. Also, I don't know how this should change the html-elements needed by stuff like the bootstrap components.

smt88 12y ago
No tutorial needed. 1. Create your HTML using only semantics. If you're tempting to create a class called, say, "column" or "left-container", stop yourself. If you have multiple items that will be presented the same way, give them the same class. For a shopping site, for example, a class might be "product". 2. Use a CSS preprocessor to inherit non-semantic classes from your framework of choice into the classes you created in step 1. You might use the framework's classes as they are or modify them a little.
- k__ 12y ago
  (didn't down-vote) This may work for simple cases. But what about stuff like the Bootstrap components, which consist of many HTML-elements?
  - true_religion 12y ago
    If you're going this route, then you wouldn't use Bootstrap. You'd dreg up your own semantic/non-semantic styles from scratch. This works really well on projects that have a dedicated design team.
  - smt88 12y ago
    You have two options. A. You can compose components the same way Bootstrap does, but using semantic classes. For example, if Bootstrap is using "thumbnail-container", you could call your class "product-thumb-container". Because of the way HTML works, container classes are often necessary, and they can be semantic. Think about a legal document: at the end of them, you have appendices. An appendix is like a container: it's factored into the overall structure, but it also has a semantic value. You can't move an appendix somewhere else and still call it an appendix. B. You can use only the parts of Bootstrap that you want, so you could leave components out altogether. As mentioned above, this might be a better option for a larger project with fine-grained, custom designs.
- wodenokoto 12y ago
  This sounds interesting, but I definitely need a tutorial for step 2.
  - smt88 12y ago
    Just look up the syntax for extending classes for the preprocessor of your choice. This is such an important part of the preprocessors that it'll usually be on the landing page for the documentation (sometimes above the fold). I'd recommend SCSS if you're just getting started.

ZeroGravitas 12y ago

Its not as bad because table had another meaning that was being abused because there was nothing else. That's not the case for grids. Also grids are presentation, not semantic.

oneeyedpigeon 12y ago

I share your frustration, but a general purpose css framework can't really avoid using this approach to support layout. What possible alternative semantic classes could they use that would provide the level of flexibility they're catering for?

mantasm 12y ago
It's very doable, but Sass or similar is necessary. For example: http://neat.bourbon.io/ http://neat.bourbon.io/
- psychometry 12y ago
  This is just absurd: div#alpha { @include span-columns(1); } div#beta { @include span-columns(11); } div#gamma { @include span-columns(2); } ... How is this any better than col-xs-2, col-xs-4, etc.? I see absolutely no reason to obsess over semantic markup anymore. We all have work to do and grid frameworks help us actually get things done.
  - framp 12y ago
    In this way the HTML is static and when you have to change a presentation detail (like the width of the columns) you just have to edit the CSS - as it's meant to be.
    - ossreality 12y ago
      I lol'd. Good one. It's kind of hard to explain in a comment box why that idea is brain dead. How about giving it a real, semantic name and doing the same fucking thing?
  - steveax 12y ago
    Until you have a ton of automated tests. Then a markup (class) change breaks all the selectors used in the tests - not fun. I prefer to abstract the styling so I don't have to fix the tests if the styling needs to change.

deleted 12y ago

[deleted]

jordanlev 12y ago

What exactly do you mean by "semantic meaning"? Meaning to who? For what purpose? Classes on elements exist for the purpose of styling via CSS, not for users to see or screen readers to read or googlebots to classify. So if you want your css classes to "mean something" (which is what "being semantic" is), you want them to mean something to the STYLE of your page! Hence, using class="two-thirds columns" is perfectly semantic towards the purpose of visually styling the page. Did you have some other interpretation of "semantic" that you think should apply instead? Perhaps you mean "the structure of the content"? That's not what classes are for -- that's what the elements themselves are for. Or perhaps you mean for visually-impaired folks to be able to easily navigate the content? That's not what classes are for either -- that's what ARIA roles are for. SEO perhaps? It's possible that google uses class names for this, but that's just black magic voodoo that us mere mortals can have no knowledge about (and even if we did, it could change tomorrow). Here's the thing about using tables for layout... the table element actually has a defined meaning in HTML... it is for tabular data. The div element however does not imply any meaning (other than "arbitrary division of the page"). So using a div here with the classes that imply meaning to the CSS is quite "semantic" in this case.

jonahx 12y 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.

ZeroGravitas 12y ago

Nicolas Gallagher wrote a pretty thorough rebuttal to this popular idea (at least popular in comment sections, as you note none of the frameworks that have taken the web by storm recently pay any attention to it). http://nicolasgallagher.com/about-html-semantics-front-end-architecture/ http://nicolasgallagher.com/about-html-semantics-front-end-a... Conclusion: "When you choose to author HTML and CSS in a way that seeks to reduce the amount of time you spend writing and editing CSS, it involves accepting that you must instead spend more time changing HTML classes on elements if you want to change their styles. This turns out to be fairly practical, both for front-end and back-end developers – anyone can rearrange pre-built “lego blocks”; it turns out that no one can perform CSS-alchemy."

deleted 12y ago

[deleted]

arvinsim 12y ago

I got tired of using CSS frameworks where classes are used to define widths. Now, I much prefer frameworks that support semantic style like Susy. http://susy.oddbird.net/ http://susy.oddbird.net/

smt88 12y ago
If you use SCSS or LESS, you can inherit the widths into semantic classes. So Bootstrap can be as semantic as you want it to be.
- ffn 12y ago
  Just be sure to use @include and not @extend, otherwise you'll wind up blowing through your allowed selector ration and wind up wonky css bugs that you will never be able to resolve without re-writing everything.

jfroma 12y ago

Agree, I really like this one http://semantic.gs/ http://semantic.gs/