6 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 11y 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 11y ago
[deleted]
k__ 11y 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 11y 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__ 11y 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 11y 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 11y 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 11y ago
    This sounds interesting, but I definitely need a tutorial for step 2.
    - smt88 11y 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 11y 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 11y 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 11y ago
  It's very doable, but Sass or similar is necessary. For example: http://neat.bourbon.io/ http://neat.bourbon.io/
  - psychometry 11y 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 11y 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 11y 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 11y 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 11y ago
[deleted]
jordanlev 11y 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.
- mantasm 11y ago
  class="two-thirds columns" enforces a strong coupling between the HTML and how it is presented. To change how wide a column is, you change its class. To change how wide an image is, you go into the CSS. To change how wide a column's border is, you go to the CSS. Doesn't changing the class seem a little out of place? In theoretical terms, the class is semantically the category to which the component belongs. a <section class="cart"> is perfectly reasonable, whereas <div class="two-thirds columns"> is not. The <div> and it's children are not tied to the notion of how wide the div is. The fact that a section has class "cart" is important in understanding it's children.
  - jordanlev 11y ago
    I don't see how class="two-thirds columns" enforces coupling any stronger than using a different class name... what if that div only exists for the purposes of the grid layout? As long as the styles themselves are in CSS, how is it any different? I mean, of course if you just arbitrarily named the class with gibberish, that's no good -- but the point I'm trying to make is that the CSS classes exist to impart meaning to the designer (or the developer), not the end-user and not the screen readers and not search engine crawlers... so "two-thirds columns" is perfectly semantic because it is giving meaning to that div whose entire purpose in life is to be a two-thirds column in wide-screen view :) I totally understand your point, and I'm kind of being obtuse for the sake of argument... but I do think the term "semantic" is thrown around without people really thinking about "semantic for whom" or "towards what purpose".
deleted 11y ago
[deleted]
arvinsim 11y 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 11y 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 11y 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 11y ago
Agree, I really like this one http://semantic.gs/ http://semantic.gs/
ZeroGravitas 11y 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."

by mantasm 12y ago

currysausage 11y 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 11y ago

[deleted]

k__ 11y 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 11y 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__ 11y 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 11y 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 11y 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 11y ago
  This sounds interesting, but I definitely need a tutorial for step 2.
  - smt88 11y 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 11y 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 11y 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 11y ago
It's very doable, but Sass or similar is necessary. For example: http://neat.bourbon.io/ http://neat.bourbon.io/
- psychometry 11y 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 11y 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 11y 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 11y 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 11y ago

[deleted]

jordanlev 11y 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.

mantasm 11y ago
class="two-thirds columns" enforces a strong coupling between the HTML and how it is presented. To change how wide a column is, you change its class. To change how wide an image is, you go into the CSS. To change how wide a column's border is, you go to the CSS. Doesn't changing the class seem a little out of place? In theoretical terms, the class is semantically the category to which the component belongs. a <section class="cart"> is perfectly reasonable, whereas <div class="two-thirds columns"> is not. The <div> and it's children are not tied to the notion of how wide the div is. The fact that a section has class "cart" is important in understanding it's children.
- jordanlev 11y ago
  I don't see how class="two-thirds columns" enforces coupling any stronger than using a different class name... what if that div only exists for the purposes of the grid layout? As long as the styles themselves are in CSS, how is it any different? I mean, of course if you just arbitrarily named the class with gibberish, that's no good -- but the point I'm trying to make is that the CSS classes exist to impart meaning to the designer (or the developer), not the end-user and not the screen readers and not search engine crawlers... so "two-thirds columns" is perfectly semantic because it is giving meaning to that div whose entire purpose in life is to be a two-thirds column in wide-screen view :) I totally understand your point, and I'm kind of being obtuse for the sake of argument... but I do think the term "semantic" is thrown around without people really thinking about "semantic for whom" or "towards what purpose".

deleted 11y ago

[deleted]

arvinsim 11y 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 11y 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 11y 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 11y ago

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

ZeroGravitas 11y 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."