3 ms·
You should check out Bourbon Neat: http://neat.bourbon.io/ http://neat.bourbon.io/, or leverage Sass' @extend directive. Your CSS could easily be shortened to:
by bjornsteffanson 13y ago
You should check out Bourbon Neat: http://neat.bourbon.io/ 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>
- mdular 13y agoVery 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.
- natural219 13y agoSorry, 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.
- bjornsteffanson 13y agoI did misunderstand - apologies.