Reusable CSS Classes or Lots?

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 开发者_StackOverflow中文版?

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

Definitely the later. a class like .padding5 really defeats the purpose of moving style declarations into a style sheet.

Using CSS the way you suggest is similar to inline styling (actually you're just wrapping the inline styles in a CSS class). So the short answer is: do not use it like that.

Like BoltClock says, there's no harm in defining padding in a few meaningful classes. The best practice is to move common styles to their own classes, but you should be reasonable when defining these common styles: only a definition of padding shouldn't exist as a class on its own.

Your second proposal is definitely the way to go.

One place where style-based class names can be useful is if you have a fairly complicated set of styles that you want to apply to a lot of different things.

CSS grid systems (e.g. http://960.gs) do this, because their styles are reasonably complicated (especially when fixes for Internet Explorer are taken into account), and they’re designed to be applied to a lot of different elements.

If they didn’t use style-based class names, you’d need to either repeat the style rules from the class in several different places in your stylesheet, or stack all the selectors for the elements that want to use that style above it, neither of which are particularly easy to work with, maintenance-wise.

But in general, CSS styles are designed to be simple enough that you don’t need to encapsulate a set of them.