Object Oriented CSS - Joomla!dagen Nederland 2014

2,225 views
2,050 views

Published on

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.

Published in: Technology
0 Comments
6 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
2,225
On SlideShare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
20
Comments
0
Likes
6
Embeds 0
No embeds

No notes for slide

Object Oriented CSS - Joomla!dagen Nederland 2014

  1. 1. Joomla!dagen Nederland 2014 OOCSS - Keep it small
  2. 2. Babs Gösgens e @babsgosgens #jd14nl
  3. 3. www.crossinghippos.com er @crossinghippos
  4. 4. Joomla!dagen Nederland 2014 Modular CSS
  5. 5. –Hugo Giraudel (@HugoGiraudel ) “CSS has become more interesting and more complicated.” h p://www.sitepoint.com/architecture-sass-project/
  6. 6. WET
  7. 7. Be er ?
  8. 8. Context
  9. 9. Be er ?
  10. 10. Re-usability
  11. 11. Be er ?
  12. 12. (Cross media) Semantics
  13. 13. Be er ?
  14. 14. Persistent Grid
  15. 15. Be er ?
  16. 16. Facebook • 6498 colour declarations • 548 unique colours • 261 shades of “Facebook” blue • 3668 padding declarations • 511 heading selectors Source: thekmiecs.com
  17. 17. Media Object • 5 Lines of CSS • A small HTML snippet
  18. 18. Media Object
  19. 19. Nicole Sullivan OOCSS in 2009 (@stubbornella) Source: Joshua Kulpa via Flickr CC
  20. 20. OOCSS • Separate structure and skin • Separate container and content
 
 
 
 Modular f DRY f Scalable f + =
  21. 21. Small sites can grow big Source: Harry Roberts (@csswizardry)
  22. 22. less CSS = faster site
  23. 23. Object • HTML • CSS • JavaScript • …
  24. 24. OOCSS Systemen • OOCSS • SMACCS • BEM • Atomic CSS • …
  25. 25. BEM Block-Element-Modifier
  26. 26. Block • Independent Entity • Blocks can contain other blocks
 Bron: h p://bem.info/method/definitions/
  27. 27. Element • Smallest part of a block • Context-dependent Bron: h p://bem.info/method/definitions/
  28. 28. Modifier • Extra, or different property • Multiple modifiers Bron: h p://bem.info/method/definitions/
  29. 29. BEM Classes .block { } .block__element { } .block--modifier { }
  30. 30. Person
  31. 31. Media Object in BEM
  32. 32. Not everything is BEM
  33. 33. –W3C “Good names don’t change.” h p://www.w3.org/QA/Tips/goodclassnames
  34. 34. Class names • a warning, important, submenu • b border4px, ligh ext, pre ybackground
 
 h p://www.w3.org/QA/Tips/goodclassnames
  35. 35. Classisitis • Repeating classes are excellent candidates for compression
 
 Source: h p://www.staceyreid.com
  36. 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. 37. Bad habits • Overqualified selectors • Overly specific selectors • Universal selector • ID’s for styling • !important .menu#mainmenu.block > .block__element*
  38. 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. 39. Methods • Structure • Ordering • Context • Comments • Semantics (for us)
  40. 40. CSS Preprocessors • Variables • Functions • Mixins & placeholders • Inheritance • Operators & directives • Maps
  41. 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. 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. 43. SASS & BEM
  44. 44. SASS & BEM
  45. 45. Abstraction exercise
  46. 46. Abstraction exercise
  47. 47. 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
  48. 48. a www.facebook.com/crossinghippos
 h p://www.slideshare.net/babsgosgens

×