Writing semantic markup (CSS/ HTML)

Question

From what I have understood so far, the following conventions apply for styling webpages:

• Use classes for re-usable elements and id's for unique elements
• Do not use unsemantic classes or id's (for example .float {float: left;})
• Instead, name your selectors according to the elements' roles, not their style.

I actually have 2 questions:

1. When is an element considered unsemantic? Is a naming like .col3 unsemantic? - Imo, it defines a structural property of the element and not only its style?
2. How should we write CSS according to these rules? Suppose I had this, and needed to set float properties on both the container and boxes:

 <div id="container">
   <div class="box"></div>
   <div class="box"></div>
   <div class="box"></div>
   <div class="box"></div>
 </div>
 ----------------------- <!-- Now which CSS is best practice? //-->
 <style id="style_1">
   .box, #container { 
      float: left; 
   }
   #container { 
      other props... 
   }
 </style>

 <style id="style_2">
   .box { 
      float: left;
   }
   #container { 
      float: left;
      other props...
   }
 </style>

 <style id="style_3">
   .<commonclass for both divs, to be added to both> { 
      float: left;
   }
   .box { 
      float: left;
   }
   #container { 
      other properties....
   }
 </style>

Which style is best practice?

Answer 1

I would consider names that are semantic are ones that describe the content you are building rather than those that describe how the content looks for example. In your example, you use a class of col3. In my opinion that's fine, as it describes a piece of content rather than how it looks. Let's say for example we have an article and we want the first paragraph (standfirst) to be styled slightly differently:

<article>
  <h1>Article title</h1>
  <p>Introductory paragraph</p>
  <p>Next paragraph</p>
<article>

We could add a class to that first paragraph so we can set some CSS values. A semantic class name in this instance would possibly be "standfirst" as it decribes the content.

An un-semantic class name would possibly be "big-blue-text" as it describes its presentation. Also, we may at some point want to change the style of the standfirst to be green. Now we'd have a class name of "big-blue-text" that is actually now green. For more on semantics I'd suggest reading this article http://css-tricks.com/semantic-class-names/

For your CSS question your approach in the first example is the way forward - set your shared styles first by grouping your selectors (container and box). Your container is the parent element so I'd set its unique styles on that next, followed by unique styles for the child element (box in this case)

#container,
.box {
  float: left;
}
#container {
  styles
}
.box {
  styles
}