J and Beyond 2014, Königstein Germany Modular CSS 

J and Beyond 2014, Königstein Germany Modular CSS 

J and Beyond 2014, Königstein Germany Modular CSS 

Babs Gösgens speakerdeck.com/babsgosgens 

Babs Gösgens speakerdeck.com/babsgosgens 

Babs Gösgens speakerdeck.com/babsgosgens @babsgosgens 

Babs Gösgens speakerdeck.com/babsgosgens @babsgosgens 

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

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

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

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; } 

OOCSS • Separate structure and skin • Separate container and content
 
 
 
 

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

Modular Methodologies • OOCSS • SMACCS • BEM • Atomic CSS
 
 

less CSS = more work 

but… 

less maintenance faster loads 

80:20 Rule Source: Harry Roberts (@csswizardry) 

Methods • Structure • Ordering • Comments • Semantics (for us, not for machines)
 

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

Specificity • Universal selectors • Tag (type) selectors • Class selectors • A ribute selectors • Pseudo-classes & Pseudo-elements • ID selectors • Inline styles 

Specificity • Universal selectors • Tag (type) selectors • Class selectors • A ribute selectors • Pseudo-classes & Pseudo-elements • ID selectors • Inline styles * 

Specificity • Universal selectors • Tag (type) selectors • Class selectors • A ribute selectors • Pseudo-classes & Pseudo-elements • ID selectors • Inline styles * a, div, article 

Specificity • Universal selectors • Tag (type) selectors • Class selectors • A ribute selectors • Pseudo-classes & Pseudo-elements • ID selectors • Inline styles * a, div, article .block 

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”] 

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 

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 

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! 

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

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;
 } Click me


information



Abstract behaviour .anchor- -incognito {
 text-decoration: none;
 color: inherit;
 }
 .outline {
 border: 2px solid #000;
 }
 .soft {
 // and lots of vendor prefixes
 border-radius: 16px;
 } Click me


information



@extend .btn {
 @extend .anchor- -incognito;
 @extend .outline;
 @extend .soft;
 }
 .message {
 @extend .outline;
 @extend .soft;
 } Click me


information



@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;
 } 

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

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

BEM Block-Element-Modifier 

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

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

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

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

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; } 

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; } 

Person Object .person { }
 .eye { }
 .female { }
 .female-eye { }
 .left-eye { } .person { }
 .person__eye { }
 .person- -female { }
 .person- -female__eye { }
 .person__eye- -left { } 

Person Object Design: Chiara Alio a (h p://viryagroup.com/etv/ ) 

Person Object .chiara { }
 .chiara__eye { }
 .chiara__eye- -left { }
 .chiara__nose { }
 .chiara__glasses { } Design: Chiara Alio a (h p://viryagroup.com/etv/ ) 

Person Object .marco { }
 .marco__eye { }
 .marco__eye- -left { }
 .marco__nose { }
 .marco__glasses { } Design: Chiara Alio a (h p://viryagroup.com/etv/ ) 

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

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

– 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.” 

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 

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 

SASS & BEM .block {
 &__element { }
 &- -modifier { }
 }
 
 .block { }
 .block__element { }
 .block- -modifier { } 

SASS & BEM .block {
 @at-root {
 .block__element { }
 .block- -modifier { }
 }
 } .block { }
 .block__element { }
 .block- -modifier { } 

Abstraction exercise 

No content

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 

a www.facebook.com/crossinghippos
 h ps://speakerdeck.com/babsgosgens 

a www.facebook.com/crossinghippos
 h ps://speakerdeck.com/babsgosgens 

a www.facebook.com/crossinghippos
 h ps://speakerdeck.com/babsgosgens 

www.crossinghippos.com er @crossinghippos 

www.crossinghippos.com er @crossinghippos 

www.crossinghippos.com er @crossinghippos