Presentatie on OOCSS for the Joomla!dagen Nederland 2014.
OOCSS borrows concepts from software architecture. By structuring your CSS and abstracting parts for re-use the resulting code is leaner, more scalable and much more maintainable. It introduces a few methods for modular CSS ands shows how you can use some of SASS's new features to implement BEM.
36. Good habits
• Use shallow selectors
• Separate skin and behavior
• Avoid repetition (DRY)
• Avoid context
• Avoid having to rewrite properties
• Comments, comments and comments
41. – J.R.R. Tolkien (& Hugo Giraudel)
“One file to rule them all,
One file to find them,
One file to bring them all,
And in the Sass way merge them.”
42. Partials
• Every component in its own file
• Individual files are pulled in
to create a single stylesheet
• Much easier to maintain
Source: h p://www.sitepoint.com/architecture-sass-project/
48. Sources
• h p://bem.info/
• h p://bradfrostweb.com/blog/post/atomic-web-design/
• h p://clubmate.fi/oocss-acss-bem-smacss-what-are-they-
what-should-i-use/
• h p://coding.smashingmagazine.com/2011/12/12/an-
introduction-to-object-oriented-css-oocss/
• h p://csswizardry.com/2011/09/writing-efficient-css-
selectors/
• h p://csswizardry.com/2013/01/mindbemding-ge ing-
your-head-round-bem-syntax/
• h p://hugogiraudel.com/
• h p://nicoespeon.com/en/2013/05/dive-into-oocss/
• h p://nicolasgallagher.com/about-html-semantics-front-
end-architecture/
• h p://rhodesmill.org/brandon/2011/concentric-css/
• h p://sass-lang.com/
• h p://smacss.com/
• h p://snook.ca/
• h p://www.alwaystwisted.com/post.php?s=2014-02-27-
even-easier-bem-ing-with-sass-33
• h p://www.bre jankord.com/2013/02/09/thoughts-on-
semantic-html-class-names-and-maintainability/
• h p://www.mathayward.com/modular-css-with-sass-
and-bem/
• h p://www.sitepoint.com/architecture-sass-project/
• h p://www.sitepoint.com/css-sass-styleguide/
• h p://www.slideshare.net/maxdesign/css-oocss-and-
smacss
• h ps://github.com/necolas/idiomatic-css
• h ps://github.com/stubbornella/oocss/wiki