4
\$\begingroup\$

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%; }
}
\$\endgroup\$
1
\$\begingroup\$

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/

\$\endgroup\$
  • \$\begingroup\$ 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'. \$\endgroup\$ – superUntitled Jan 27 '15 at 15:11
  • \$\begingroup\$ 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. \$\endgroup\$ – superUntitled Jan 27 '15 at 15:23
  • \$\begingroup\$ 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. \$\endgroup\$ – superUntitled Jan 27 '15 at 15:25

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.