Comment by natural219 | Hacker News Reader

Comment by natural219 | Hacker News Reader

Even with less or sass, a basic, modern grid will have at least three levels of DOM-level logic that determines presentation, so you have things like this:

  <div class="container">
    <nav class="row nav-header">
      <div class="col-sm-2 my-logo">
        <!-- your stuff -->
      </div>
    </div>
  </div>

that you could perhaps use mixins to replace some of the elements with (you could mix-in "row" to "nav-header", and "col-sm-2" to "my-logo"), but regardless, you still need three DOM nodes, and trying to fit those into a purely semantic separate-structure-from-presentation box can get extremely tiresome.

I definitely don't like this. That said, the speed and flexibility of frameworks like Foundation/Bootstrap are just so vital for my front-end speed that I can't imagine giving these things up.

One other advantage is that, if you're working with other front-end developers who have used your same framework, there is a lot of knowledge sharing that happens automatically (knowing when and where to use containers, for example, can save a lot of headache when two devs are working on the same front-end layout).

You should check out Bourbon Neat: http://neat.bourbon.io/, or leverage Sass' @extend directive.

Your CSS could easily be shortened to:

  .body {
    @extend .container;
  }

  .nav-header {
    @extend .row;
  }

  .my-logo {
    @extend .col-sm-2;
  }

And your markup could be much cleaner:

  <body>
    <nav class="nav-header">
      <div class="my-logo">
        <!-- your stuff -->
      </div>
    </nav>
  </body>

Very much this. By wrapping your mind around the new possibilities the whole 'seperate style from content' becomes much more trivial (and so much more maintainable) that the discussion mostly ends at this point.

Sorry, I don't think you understood my comment. First of all, container isn't used like that (you don't want to wrap your entire content in one container -- maybe you want a different full-width background for your header vs your body, for example). Secondly, this technique is exactly what I was describing -- using mixins (or @extend) in your CSS to eliminate the redundant classes.

Still, your final output produces three levels of DOM, which was exactly what my point was. No matter how much you try to export your grid code into your CSS (and you should try!), you will always run into situations where you need that <div class="row"> and there will be no way to semantically handle that.

Furthermore, there are some limitations even when combining semantic elements that cause issues. For instance, I often write this code:

  <div class="row well">

To find that the exact margin/padding values I want for my well interfere with the default padding/margin values provided by row defaults. In those cases, I almost always have to add an additional DOM level and separate my classes to achieve my effect.

I did misunderstand - apologies.

I have the same conflicting feelings about it. One the one hand, yes the HTML should be semantic and not have things in it like "col-2". My thinking is that it's not so terrible as long as it's classnames. The tags and IDs can be more semantic and the classnames I kinda allow the cheating in my mind, considering it to be meta-data.

At a certain point we do actually have to produce a site or an app. If I mange to get the product released while keeping the code clean, organized and consistent then I feel like I'm doing OK.

No, you don't need all this, there are tools to help. Look at Susy for example. God knows how many times I deleted '<div class="row">' out of markup templates.

Reply on news.ycombinator.com