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.

1. Joomla!dagen Nederland 2014
OOCSS - Keep it small

2. Babs Gösgens
e @babsgosgens
#jd14nl

3. www.crossinghippos.com
er @crossinghippos

4. Joomla!dagen Nederland 2014
Modular CSS

5. –Hugo Giraudel (@HugoGiraudel )
“CSS has become more interesting and more
complicated.”
h p://www.sitepoint.com/architecture-sass-project/

6. WET

7. Be er ?

8. Context

9. Be er ?

10. Re-usability

11. Be er ?

12. (Cross media) Semantics

13. Be er ?

14. Persistent Grid

15. Be er ?

16. Facebook
• 6498 colour declarations
• 548 unique colours
• 261 shades of “Facebook” blue
• 3668 padding declarations
• 511 heading selectors
Source: thekmiecs.com

17. Media Object
• 5 Lines of CSS
• A small HTML snippet

18. Media Object

19. Nicole Sullivan
OOCSS in 2009
(@stubbornella)
Source: Joshua Kulpa via Flickr CC

20. OOCSS
• Separate structure and skin
• Separate container and content
Modular
f
DRY
f
Scalable
f
+ =

21. Small sites can grow big
Source: Harry Roberts (@csswizardry)

22. less CSS = faster site

23. Object
• HTML
• CSS
• JavaScript
• …

24. OOCSS Systemen
• OOCSS
• SMACCS
• BEM
• Atomic CSS
• …

25. BEM
Block-Element-Modifier

26. Block
• Independent Entity
• Blocks can contain other blocks
Bron: h p://bem.info/method/definitions/

27. Element
• Smallest part of a block
• Context-dependent
Bron: h p://bem.info/method/definitions/

28. Modifier
• Extra, or different property
• Multiple modifiers
Bron: h p://bem.info/method/definitions/

29. BEM Classes
.block { }
.block__element { }
.block--modifier { }

30. Person

31. Media Object in BEM

32. Not everything is BEM

33. –W3C
“Good names don’t change.”
h p://www.w3.org/QA/Tips/goodclassnames

34. Class names
• a warning, important, submenu
• b border4px, ligh ext, pre ybackground
h p://www.w3.org/QA/Tips/goodclassnames

35. Classisitis
• Repeating classes are excellent
candidates for compression
Source: h p://www.staceyreid.com

36. Good habits
• Use shallow selectors
• Separate skin and behavior
• Avoid repetition (DRY)
• Avoid context
• Avoid having to rewrite properties
• Comments, comments and comments

37. Bad habits
• Overqualified selectors
• Overly specific selectors
• Universal selector
• ID’s for styling
• !important
.menu#mainmenu.block > .block__element*

38. Specificity
• Universal selectors
• Tag (type) selectors
• Class selectors
• A ribute selectors
• Pseudo-classes & Pseudo-elements
• ID selectors
• Inline styles
*a, div, article.block[type=“checkbox”]:first-child, ::before#mainmenustyle=“color: #f00;”
bad!

39. Methods
• Structure
• Ordering
• Context
• Comments
• Semantics (for us)

40. CSS Preprocessors
• Variables
• Functions
• Mixins & placeholders
• Inheritance
• Operators & directives
• Maps

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/

43. SASS & BEM

44. SASS & BEM

45. Abstraction exercise

47. Abstraction exercise

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

49. a
www.facebook.com/crossinghippos
h p://www.slideshare.net/babsgosgens