| Agreed, the templates are not exhibiting how to avoid presentational classes. This may be a case where small-scope examples are poorly suited to real-world implementation, but I'll take a quick stab at moving to more descriptive (dare I say semantic) class names. ------ EXAMPLE: http://foundation.zurb.com/page-templates4/blog.html Line 45: <div class="large-9 columns"> CSS:
.row .large-9 {
position: relative;
width: 75%;
}
.row .columns {
position: relative;
padding-left: 0.9375em;
padding-right: 0.9375em;
float: left;
} ------ With 'the magic of Scss', you could replace multiple presentational classes with a single class that refers to the element's content or purpose, and then use @extend for the above-defined grid classes. So our new HTML would look like: <div class="article-content"> And the Scss: .article-content {
@extend .large-9;
@extend .columns;
} ------ Edit: formatting, also: there are plenty of debates to be had about writing classes this way. The subject merits its own lengthy discussion and (I think) the answer changes depending on what you're trying to do, so I ain't touchin it. |