

A classless class—on using more classes in your HTML - spacestronaut
http://csswizardry.com/2012/10/a-classless-class-on-using-more-classes-in-your-html/

======
ollysb
Genuine question, what's the difference between semantic markup and OOCSS. My
understanding of semantic markup is that you only use classes when you're
referring to trees of markup e.g. .section p{} as opposed to just p{}. What's
the practical difference when using OOCSS?

~~~
isleyaardvark
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/>) 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-
obj...](http://www.stubbornella.org/content/2010/06/25/the-media-object-saves-
hundreds-of-lines-of-code/)) 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.

