Why not use semantic class names for the Compass / Blueprint grid?

Question

I recently started work on a large multi-year client project, and the first phase of front-end development creates a library of templates for use in the project. I use Compass and Blueprint for my grid. The @include blueprint-grid component is ideal for this project: it automatically generates semantic class names (i.e. .span5 ) that the rest of the command can reuse on all pages.

However, the compass documentation says:

Best practices hamper the use of this mixing, but it is provided to support legacy websites and check the sass port in the sample project pages.

Why? Why is there a need to use non-semantic classes in modern mesh systems? It seems less DRY to create a new CSS class for different page elements that will use the same grid width. For instance:

 .dashboard__chart { @include column(6); } .dashboard__news { @include column(6); } 

when I could just just have a .span6 class for use in my markup.

This can be situational: non-semantic classes make sense if your entire project has a similar structure (for example, a news site or blog). However, this dashboard / reporting tool has slightly different layouts on each page.

So, back to the first question: why is it better not to use semantic classes and what is the best way to avoid them?

Answer 1

it automatically generates semantic class names (i.e...span5)

I don’t think span5 is a semantic name, since it does not describe the content at all, but it describes the layout in a rather specific way.

_{Of course, the term "semantic" is scattered a lot, but in its purest sense it should have little or nothing to do with the concept.}

Reasons not to use names describing the presentation:

• If the layout changes, the wrong name
• The layout can be adapted for another device for which it is incorrect and / or pointless.
• The markup is less important for everyone who reads it (i.e. your team).
• Layouts can become fragile; a change to one class that has been used in many different places and with many different meanings can break in some places in which it is used.

The biggest drawback of generic classes such as "span6" is that they are abused (I saw this with Bootstrap, which has similar mesh classes). "I need this element to span 2 columns ... great! I'll just remove the" span2 "class and do it!"

This does not mean that you should not seek reuse; but reuse can come from class names associated with content (admittedly, it can bring some effort) and with mixins.

I recently started work on a large multi-year client project, and the first phase of interface development creates a library of templates for use through the project.

Most projects end with exceptions / trade-offs for the sake of practicality, but you have the opportunity to start with an approach with best practice.