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

&lt;div class="col col-4-2-1"&gt;&lt;/div&gt;


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

&lt;div class="col col-8-4-2"&gt;&lt;/div&gt;


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%; }
}
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/