Se ha denunciado esta presentación.
Utilizamos tu perfil de LinkedIn y tus datos de actividad para personalizar los anuncios y mostrarte publicidad más relevante. Puedes cambiar tus preferencias de publicidad en cualquier momento.

Object Oriented CSS - Joomla!dagen Nederland 2014

2.602 visualizaciones

Publicado el

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.

Publicado en: Tecnología
  • Sé el primero en comentar

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

×