What is the Quicker / More Efficient CSS styling

Question

I have been curious as to which method of CSS styling is quicker (rendering wise) and then from simply a best practices perspective which method makes more sense (pretty subjective I would say?).

I can create base classes like:

.rounded-corners-5 { 
   -webkit-border-radius: 5px; 
      -moz-border-radius: 5px; 
           border-radius: 5px; 
 }

OR

I can do the other method of applying styles to multiple IDs/Classes:

#box1, #header, #container, .titles { 
   -webkit-border-radius: 5px; 
      -moz-border-radius: 5px; 
           border-radius: 5px; 
}

Answer 1

I agree with tster: the first one means putting in a visual command into the HTML (always beware of classes with names that describe their look instead of their purpose). If it does have a logical purpose (e.g. .section) then it may be cleaner. Otherwise I would use the second version.

What you are really suffering from is the lack of abstraction in CSS, which means you tend to suffer either from duplication and/or odd groupings to avoid duplication. You might want to look at this article about Sass. The general idea is that you write a Sass document (which is not quite CSS but similar) which is then compiled into a css document which you then deploy.