They're different approaches to managing the connection between presentation and the page. Mainly it's whether you're handling changes to the presentation prima

They're different approaches to managing the connection between presentation and the page. Mainly it's whether you're handling changes to the presentation primarily through the CSS or through the HTML. -Semantic markup stresses using classes on DOM elements that describe what they are rather than how they look. Example: instead of using span class="red", use span class="error", to avoid the ridiculousness of having .red {color:blue;} in your CSS if you want to change it. - OOCSS is an attempt to use reusable components for presentation to manage the complexity of maintaining large amounts of stylesheets. In the previous example, you'd probably still run into exceptions - if you had one error that you wanted to be blue, but keep the rest red, you'd have to add more specificity to do it: .thisoneexception .error {color: blue;} Now you're dealing with specificity wars (http://numiko.com/labs/2011/css-specificity-wars/ http://numiko.com/labs/2011/css-specificity-wars/) and maintainability issues. The benefit of OOCSS is in simplifying things to make your life easier by reusing code. For example Nicole Sullivan's media object (http://www.stubbornella.org/content/2010/06/25/the-media-object-saves-hundreds-of-lines-of-code/ http://www.stubbornella.org/content/2010/06/25/the-media-obj...) This is a type of layout that shows up all over the web. Instead of rewriting the css to achieve that layout for every individual semantic element, you just use those classes to get that layout. A downside to this approach is that presentational info tends to creep into your HTML, which can get awkward. But at the end of the day, you have to tie the presentation with the DOM somehow. There are pluses and minuses to both approaches.