CSS attribute Selector: responsive grid performance

Question

I am looking to create a simple column based responsive framework, and would like to call my classes something like:

<div class="col col-4-2-1"></div>

where the div would display as 4 columns on a desktop browser, 2 columns on a tablet and one column on a phone (these breakpoints are hypothetical).

or

<div class="col col-8-4-2"></div>

where the div would display as 8 columns on a desktop browser, 4 columns on a tablet and 2 columns on a phone.

The easiest way would be to use attribute selectors, but I am not sure if this would be a huge performance hit. Is this a good idea, or should I write out all the permutations of the column structure (720 classes)? Or just do what Bootstrap does, with col-sm-12 col-md-6 col-lg-3

// columns
.col[class|="c-6"] { width: 16.666%; }
.col[class|="c-5"] { width: 20%; }
.col[class|="c-4"] { width: 25%; }
.col[class|="c-3"] { width: 33.333%; }
.col[class|="c-2"] { width: 50%; }
.col[class|="c-1"] { width: 100%; }
@media only screen and (max-width:800px) {
 .col[class*="-6-"] { width: 16.666%; }
 .col[class*="-5-"] { width: 20%; }
 .col[class*="-4-"] { width: 25%; }
 .col[class*="-3-"] { width: 33.333%; }
 .col[class*="-2-"] { width: 50%; }
 .col[class*="-1-"] { width: 100%; }
}
@media only screen and (max-width:600px) {
 .col[class$="-6"] { width: 16.666%; }
 .col[class$="-5"] { width: 20%; }
 .col[class$="-4"] { width: 25%; }
 .col[class$="-3"] { width: 33.333%; }
 .col[class$="-2"] { width: 50%; }
 .col[class$="-1"] { width: 100%; }
}

Answer 1

You should do neither. Not for performance reasons, but for semantic and maintenance reasons. Having class names that reflect what the element looks like is an extremely popular anti-pattern. It's convenient in the here and now, but every single instance of these classes in your markup will need to be changed when your design changes.

Related reading: http://www.kapowaz.net/articles/cargo-cult-css

Furthermore, the concept of phone/tablet/desktop styles is extremely narrow thinking and is rarely appropriate for any design.

Related reading: http://bradfrost.com/blog/post/7-habits-of-highly-effective-media-queries/

• superUntitled: Thanks @cimmanon, I totally agree with you (and Brad) on using the design to determine breakpoints (although this too has it's imperfections). 'these breakpoints are hypothetical'.
• superUntitled: Thank you again @cimmanon for re-affirming the necessity of semantics in html. While I do go back and forth on semantic and presentational class names, my main objective in writing code fro the front end is that it is: accessible (ADA compliant), semantic and maintainable. The first is a non-compete value, but there is a balance between the second two.
• superUntitled: Your answer got me thinking about a third way of going about this. I will use use the bootstrap method as mix-in's for the responsive divs.