Object Oriented CSS - Joomla!dagen Nederland 2014
7 likes2,904 views
The document discusses the concepts of Object-Oriented CSS (OOCSS) and modular CSS methodologies like BEM and SMACSS, emphasizing the separation of structure and skin as well as the importance of reusability. It highlights best practices for writing efficient CSS and managing stylesheets, including the use of shallow selectors and avoiding repetition. Additionally, it references various resources and tools to support these approaches in web design.
![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!](https://image.slidesharecdn.com/oocss-jdnl14-140315180629-phpapp02/85/Object-Oriented-CSS-Joomla-dagen-Nederland-2014-38-320.jpg)
Object Oriented CSS - Joomla!dagen Nederland 2014
- 1. Joomla!dagen Nederland 2014 OOCSS - Keep it small
- 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 ?
- 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 • …
- 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
- 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