Question

Had a question that I’ve often wondered about. Is it better to have multiple CSS classes that you can use in multiple places across you site i.e.

.padding5 {padding:5px;} 
.margin10 {margin:10px;} 
.left {float:left;}
.right {float:right;} 

So you HTML code looks like this

<div class="padding5 left"> ... </div>

Or rather have explicit classes for every element. i.e.

.title-demo {padding:5px; float:left;}

with HTML

<div class="title-demo"> ... </div>

The obvious advantages of the top organisation are that you save yourself having to repeat CSS over and over and over and your CSS stylesheet is much smaller for larger websites.

Just wondering what’s recommended by the gurus out there? My idea is essentially to create a “hybrid” solution which allows common CSS to be included as “padding5” combined with classes etc ?

Answer 1

NO! Css class names should be descriptive and contextual. You are locking yourself in a maintaince disaster the way you are describing it. What if the padding of padding5 become 10px later? Imagine a class named “blue” that you change the color to red of. You’ll end up with a hell of a website to maintain.

I suggest using named parts of your website:

 #Agenda {
 }

 #Agenda .Item {
 }

 #Agenda .Item h1 {
 }

UPDATE after all comments:

what about giving your website parts that have common properties a conceptual name -> SideBarItem, Acticle, ItemFooter, Widget. And then any element in your website gets a class for one of the named parts and some additional class. <div class="Widget WeatherForecast"> and <div class="Widget CurrencyConverter"> class Widget defines the common properties and the other class the specific properties.

.Widget {
 padding: 10px;
 float: left;
 margin: 5px;
}

.WeatherForecast {
 background: red;
 color: white;
}

.CurrencyConverter {
 background: blue;
 color: black;
}