Modular CSS JAB14

A presentation on modular, or object oriented CSS using BEM and SASS.

Transcript

1. J and Beyond 2014, Königstein Germany Modular CSS
2. J and Beyond 2014, Königstein Germany Modular CSS
3. J and Beyond 2014, Königstein Germany Modular CSS
4. Babs Gösgens speakerdeck.com/babsgosgens
5. Babs Gösgens speakerdeck.com/babsgosgens
6. Babs Gösgens speakerdeck.com/babsgosgens @babsgosgens
7. Babs Gösgens speakerdeck.com/babsgosgens @babsgosgens
8. –Hugo Giraudel (@HugoGiraudel ) “CSS has become more interesting and more complicated.” h p://www.sitepoint.com/architecture-sass-project/
9. Facebook • 6498 colour declarations • 548 unique colours • 261 shades of “Facebook” blue • 3668 padding declarations • 511 heading selectors Source: thekmiecs.com
10. Media Object • 5 Lines of CSS • A small HTML snippet
11. Media Object .media { margin:10px; }
 .media, .bd { overflow:hidden; _overflow:visible; zoom:1; }
 .media .img { float:left; margin-right: 10px; }
 .media .img img { display:block; }
 .media .imgExt { float:right; margin-left: 10px; } <div class="media a ribution">
 <a class="img" href="h p://twi er.com/stubbornella">
 <img src="h p://stubbornella.com/profile_image.jpg" alt="me" />
 </a>
 <div class="bd">
 @Stubbornella 14 minutes ago
 </div>
 </div>
12. OOCSS • Separate structure and skin • Separate container and content
 
 
 

13. OOCSS • Separate structure and skin • Separate container and content
 
 
 
 Modular DRY Scalable f + =
14. Modular Methodologies • OOCSS • SMACCS • BEM • Atomic CSS
 

15. less CSS = more work
16. but…
17. less maintenance faster loads
18. 80:20 Rule Source: Harry Roberts (@csswizardry)
19. Methods • Structure • Ordering • Comments • Semantics (for us, not for machines)

20. Good habits • Separate skin and behavior • Avoid repetition (DRY) • Use shallow selectors • Avoid having to rewrite properties • Avoid context
21. Specificity • Universal selectors • Tag (type) selectors • Class selectors • A ribute selectors • Pseudo-classes & Pseudo-elements • ID selectors • Inline styles
22. Specificity • Universal selectors • Tag (type) selectors • Class selectors • A ribute selectors • Pseudo-classes & Pseudo-elements • ID selectors • Inline styles *
23. Specificity • Universal selectors • Tag (type) selectors • Class selectors • A ribute selectors • Pseudo-classes & Pseudo-elements • ID selectors • Inline styles * a, div, article
24. Specificity • Universal selectors • Tag (type) selectors • Class selectors • A ribute selectors • Pseudo-classes & Pseudo-elements • ID selectors • Inline styles * a, div, article .block
25. 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”]
26. 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
27. 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 #mainmenu
28. 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 #mainmenu style=“color: #f00;” bad!
29. Bad habits • Overqualified selectors • Overly specific selectors • Universal selector • ID’s for styling • !important .menu#mainmenu .block > .block__element *
30. Abstract behaviour .btn {
 border: 2px solid #000;
 // and lots of vendor prefixes
 border-radius: 16px;
 text-decoration: none;
 color: inherit;
 }
 .message {
 border: 2px solid #000;
 // and lots of vendor prefixes
 border-radius: 16px;
 } <a class=“btn” href=“index.html”>Click me</a>
 <p class=“message”><i class=“icn icn- -info”></i>information</p>
31. Abstract behaviour .anchor- -incognito {
 text-decoration: none;
 color: inherit;
 }
 .outline {
 border: 2px solid #000;
 }
 .soft {
 // and lots of vendor prefixes
 border-radius: 16px;
 } <a class=“anchor- -incognito outline soft” href=“/index.html”>Click me</a>
 <p class=“soft outline”><i class=“icn icn- -info”></i>information</p>
32. @extend .btn {
 @extend .anchor- -incognito;
 @extend .outline;
 @extend .soft;
 }
 .message {
 @extend .outline;
 @extend .soft;
 } <a class=“btn” href=“index.html”>Click me</a>
 <p class=“message”><i class=“icn icn- -info”></i>information</p>
33. @extend .anchor- -incognito, .btn {
 text-decoration: none;
 color: inherit;
 }
 .outline, .btn {
 border: 2px solid #000;
 }
 .soft, .btn {
 // and lots of vendor prefixes
 border-radius: 16px;
 }
34. –W3C “Good names don’t change.” h p://www.w3.org/QA/Tips/goodclassnames
35. Class names • a warning, important, submenu • b border4px, ligh ext, pre ybackground
 
 h p://www.w3.org/QA/Tips/goodclassnames
36. BEM Block-Element-Modifier
37. Block • Independent Entity • Blocks can contain other blocks
 
 
 
 Bron: h p://bem.info/method/definitions/
38. Element • Smallest part of a block • Context-dependent
 
 
 
 Bron: h p://bem.info/method/definitions/
39. Modifier • Extra, or different property • Multiple modifiers
 
 
 
 Bron: h p://bem.info/method/definitions/
40. BEM Classes .block { } .block__element { } .block--modifier { }
41. Media Object .media { margin:10px; }
 .media, .bd { overflow:hidden; _overflow:visible; zoom:1; }
 .media .img { float:left; margin-right: 10px; }
 .media .img img { display:block; }
 .media .imgExt { float:right; margin-left: 10px; } <div class="media a ribution">
 <a class="img" href="h p://twi er.com/stubbornella">
 <img src="h p://stubbornella.com/profile_image.jpg" alt="me" />
 </a>
 <div class="bd">
 @Stubbornella 14 minutes ago
 </div>
 </div>
42. Media Object in BEM .media { margin:10px; }
 .media, .media__body { overflow:hidden; _overflow:visible; zoom:1; }
 .media__image { float:left; margin-right: 10px; }
 .media__img img { display:block; }
 .media__img—rev { float:right; margin-left: 10px; } <div class="media a ribution">
 <a class=“media__img” href="h p://twi er.com/stubbornella">
 <img src="h p://stubbornella.com/profile_image.jpg" alt="me" />
 </a>
 <div class=“media__body”>
 @Stubbornella 14 minutes ago
 </div>
 </div>
43. Person Object .person { }
 .eye { }
 .female { }
 .female-eye { }
 .left-eye { } .person { }
 .person__eye { }
 .person- -female { }
 .person- -female__eye { }
 .person__eye- -left { }
44. Person Object Design: Chiara Alio a (h p://viryagroup.com/etv/ )
45. Person Object .chiara { }
 .chiara__eye { }
 .chiara__eye- -left { }
 .chiara__nose { }
 .chiara__glasses { } Design: Chiara Alio a (h p://viryagroup.com/etv/ )
46. Person Object .marco { }
 .marco__eye { }
 .marco__eye- -left { }
 .marco__nose { }
 .marco__glasses { } Design: Chiara Alio a (h p://viryagroup.com/etv/ )
47. Classisitis • Repeating classes are excellent candidates for compression
 
 Source: h p://www.staceyreid.com
48. CSS Preprocessors • Variables • Functions • Mixins & placeholders • Inheritance • Operators & directives • Maps
49. – 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.”
50. File & Folder structure • Every component in its own file • Individual files are pulled in 
 to create a single stylesheet • Much easier to maintain | - vendor/ | - utilities/ | - settings/ | - behavior/ | - | - base/ | - | - | - reset/normalize | - | - | - layout | - | - | - typography | - | - | - forms | - | - | - list | - | - blocks | - | - page | - | - themes | - | - trumps
51. File & Folder structure • Every component in its own file • Individual files are pulled in 
 to create a single stylesheet • Much easier to maintain • Link to JLayout? | - vendor/ | - utilities/ | - settings/ | - behavior/ | - | - base/ | - | - | - reset/normalize | - | - | - layout | - | - | - typography | - | - | - forms | - | - | - list | - | - blocks! | - | - page | - | - themes | - | - trumps
52. SASS & BEM .block {
 &__element { }
 &- -modifier { }
 }
 
 .block { }
 .block__element { }
 .block- -modifier { }
53. SASS & BEM .block {
 @at-root {
 .block__element { }
 .block- -modifier { }
 }
 } .block { }
 .block__element { }
 .block- -modifier { }
54. Abstraction exercise
56. 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://css-tricks.com/efficiently-rendering-css/ • 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 p://www.stubbornella.org/content/2010/06/25/the- media-object-saves-hundreds-of-lines-of-code/ • h ps://github.com/necolas/idiomatic-css • h ps://github.com/stubbornella/oocss/wiki • h ps://github.com/joomla/coding-standards/tree/gh- pages
57. a www.facebook.com/crossinghippos
 h ps://speakerdeck.com/babsgosgens
58. a www.facebook.com/crossinghippos
 h ps://speakerdeck.com/babsgosgens
59. a www.facebook.com/crossinghippos
 h ps://speakerdeck.com/babsgosgens
60. www.crossinghippos.com er @crossinghippos
61. www.crossinghippos.com er @crossinghippos
62. www.crossinghippos.com er @crossinghippos