3 ms·

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 referrin

by ollysb 14y ago

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?

ehutch79 14y ago
Semantic markup means a lot of different things to different people. It depends on how much a jerk the person you're talking to is, and what they actually work on. There are people who say you should NEVER, EVER, for anyreason, have classes or IDs in your html, it's not semantic, and everytime you type class="" god kills a kitten. These people build brochure-ware sites. Static documents (though they're probably wordpress templates for a site that will never have content updates) that at max have 5 pages, and have 0 interaction done in js. These people are jerks. Their homepages also tend to be #999 colored text on a #777 background.
isleyaardvark 14y ago
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.

by ollysb 14y ago

ehutch79 14y ago

Semantic markup means a lot of different things to different people. It depends on how much a jerk the person you're talking to is, and what they actually work on. There are people who say you should NEVER, EVER, for anyreason, have classes or IDs in your html, it's not semantic, and everytime you type class="" god kills a kitten. These people build brochure-ware sites. Static documents (though they're probably wordpress templates for a site that will never have content updates) that at max have 5 pages, and have 0 interaction done in js. These people are jerks. Their homepages also tend to be #999 colored text on a #777 background.

isleyaardvark 14y ago

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.