Hacker News Reader

Comment by ville | Hacker News Reader

I agree with all the points you listed and that CSS layout is superior. However every time I use a CSS grid I find myself thinking whether the content and design are really separated. If I add classes like .col-1-4, .span3 or .three.columns to an element in the markup, doesn't that mix details specific to a certain design (or even one particular screen size in responsive design) with the content?

View on HN

I agree. Frameworks like:

  <div class="table">
    <div class="tr">
      <div class="td">...</div>
      <div class="td">...</div>
    </div>
  </div>

remind me of tables too. They tend to add a few unneeded or non-semantic div's. And they don't really separate content and design. It is a lesser-of-two-evils thing for me, because sometimes grids/frameworks can save me a lot of time. Ideally you'd use semantic-sounding classnames and don't include unnecessary div's.

I agree completely, which is why I'd say the solution is to use a grid framework based on Sass or LESS instead of vanilla CSS (I'm partial to Orbital[1], but I'm biased because I wrote it :P). If your column sizing can be applied via preprocessor mixins instead of CSS classes, it's easy to keep your HTML free from nasty non-semantic classes. If you hunt around on GitHub, many popular CSS grids have unofficial LESS/Sass ports as well.

[1]: https://github.com/lorelabs/orbital

Reply on news.ycombinator.com