Sass 3.2: Silent Classes

992bbe0cad45fc9f941a4717f9f01642?s=47 Dale Sande
June 20, 2012

Sass 3.2: Silent Classes

One of the frustrations of OOCSS concepts is the amount of presentational classes that need to be created and the method of applying them to the DOM.

Sass has looked to address this issue first with Mixins, then Extends, each with their own issues of duplicated code or creation of unnecessary code.

Sass 3.2 introduces the concept of 'silent classes' whereas standardized presentational classes can be created, but are silent until extended in a class used by the application.

Interested in seeing this presentation live? Check out http://www.youtube.com/watch?v=Ckh_09hi94w&feature=youtu.be

992bbe0cad45fc9f941a4717f9f01642?s=128

Dale Sande

June 20, 2012
Tweet

Transcript

  1. SASS, EXTENDS & PLACEHOLDER CLASSES it’s like ninjas in your

    code
  2. SASS, EXTENDS & PLACEHOLDER CLASSES it’s like ninjas in your

    code
  3. That’s me! I w ork here! S U B S

    T A N T I A L
  4. That’s me! @ANOTHERUIGUY @SASSMEETUP On the Twitters

  5. OOCSS FRAMEWORKS attempts at creating ‘objects’ to streamline application

  6. OOCSS TEACHES US ... create ‘objects’ • Identify reusable objects

    • Be semantic w/HTML • Minimize selectors • Extend your classes • ‘Style’ separate from content • ‘Content’ separate from container
  7. OOCSS TEACHES US ... create ‘objects’ • Identify reusable objects

    • Be semantic w/HTML • Minimize selectors • Extend your classes • ‘Style’ separate from content • ‘Content’ separate from container
  8. OOCSS TEACHES US ... create ‘objects’ • Identify reusable objects

    • Be semantic w/HTML • Minimize selectors • Extend your classes • ‘Style’ separate from content • ‘Content’ separate from container DUH!
  9. OOCSS FRAMEWORKS attempts to automate OOCSS CSS frameworks have been

    using OOCSS methods since inception. Where these fail is the insane amount of CSS selectors that by default are added to the site’s CSS. From grid systems to UI elements, CSS bloat is a real issue.
  10. OOCSS FRAMEWORKS attempts to automate OOCSS CSS frameworks have been

    using OOCSS methods since inception. Where these fail is the insane amount of CSS selectors that by default are added to the site’s CSS. From grid systems to UI elements, CSS bloat is a real issue. Twitter’s bootstrap default includes 4914 lines of CSS.
  11. OOCSS FRAMEWORKS attempts to automate OOCSS CSS frameworks have been

    using OOCSS methods since inception. Where these fail is the insane amount of CSS selectors that by default are added to the site’s CSS. From grid systems to UI elements, CSS bloat is a real issue. Twitter’s bootstrap default includes 4914 lines of CSS.
  12. DRY CODING find the pattern and Don’t Repeat Yourself 9

    out of 10 developers agree that using a DRY method of coding will save your bacon in the long run.
  13. BOOTSTRAP BUTTONS let’s look at some code

  14. OOCSS TEACHES US ... create ‘objects’ .nav-tabs:before, .nav-pills:before, .nav-tabs:after, .nav-pills:after

    { display: table; content: ""; } .nav-tabs:after, .nav-pills:after { clear: both; }
  15. OOCSS TEACHES US ... create ‘objects’ .nav-tabs:before, .nav-pills:before, .nav-tabs:after, .nav-pills:after

    { display: table; content: ""; } .nav-tabs:after, .nav-pills:after { clear: both; } How much CSS can it really be? It’s just for .nav-tabs and .nav-pills
  16. } .nav-tabs .open .dropdown-toggle, .nav-pills .open .dropdown-toggle, .nav > li.dropdown.open.active

    > a:hover { color: #ffffff; background-color: #999999; border-color: #999999; } .nav li.dropdown.open .caret, .nav li.dropdown.open.active .caret, .nav li.dropdown.open a:hover .caret { border-top-color: #ffffff; border-bottom-color: #ffffff; opacity: 1; filter: alpha(opacity=100); }
  17. } .nav-tabs .open .dropdown-toggle, .nav-pills .open .dropdown-toggle, .nav > li.dropdown.open.active

    > a:hover { color: #ffffff; background-color: #999999; border-color: #999999; } .nav li.dropdown.open .caret, .nav li.dropdown.open.active .caret, .nav li.dropdown.open a:hover .caret { border-top-color: #ffffff; border-bottom-color: #ffffff; opacity: 1; filter: alpha(opacity=100); } Dude, that’s a lot of code!
  18. } .nav-tabs .open .dropdown-toggle, .nav-pills .open .dropdown-toggle, .nav > li.dropdown.open.active

    > a:hover { color: #ffffff; background-color: #999999; border-color: #999999; } .nav li.dropdown.open .caret, .nav li.dropdown.open.active .caret, .nav li.dropdown.open a:hover .caret { border-top-color: #ffffff; border-bottom-color: #ffffff; opacity: 1; filter: alpha(opacity=100); } Dude, that’s a lot of code! That’s line 169 right there.
  19. } .nav-tabs .open .dropdown-toggle, .nav-pills .open .dropdown-toggle, .nav > li.dropdown.open.active

    > a:hover { color: #ffffff; background-color: #999999; border-color: #999999; } .nav li.dropdown.open .caret, .nav li.dropdown.open.active .caret, .nav li.dropdown.open a:hover .caret { border-top-color: #ffffff; border-bottom-color: #ffffff; opacity: 1; filter: alpha(opacity=100); } Dude, that’s a lot of code! That’s line 169 right there. This makes baby kitties cry
  20. } .nav-tabs .open .dropdown-toggle, .nav-pills .open .dropdown-toggle, .nav > li.dropdown.open.active

    > a:hover { color: #ffffff; background-color: #999999; border-color: #999999; } .nav li.dropdown.open .caret, .nav li.dropdown.open.active .caret, .nav li.dropdown.open a:hover .caret { border-top-color: #ffffff; border-bottom-color: #ffffff; opacity: 1; filter: alpha(opacity=100); } Dude, that’s a lot of code! That’s line 169 right there. Face it, CSS is NOT DRY! This makes baby kitties cry
  21. } .nav-tabs .open .dropdown-toggle, .nav-pills .open .dropdown-toggle, .nav > li.dropdown.open.active

    > a:hover { color: #ffffff; background-color: #999999; border-color: #999999; } .nav li.dropdown.open .caret, .nav li.dropdown.open.active .caret, .nav li.dropdown.open a:hover .caret { border-top-color: #ffffff; border-bottom-color: #ffffff; opacity: 1; filter: alpha(opacity=100); } Dude, that’s a lot of code! That’s line 169 right there. Face it, CSS is NOT DRY! 10 references of #ffffff in this example alone This makes baby kitties cry
  22. OOCSS TEACHES US ... create CSS ‘objects’ & apply/extend in

    the DOM <ul class="nav nav-pills"> <li class="dropdown"> <a class="dropdown-toggle" data-toggle="dropdown" href="#"> Dropdown <b class="caret"></b> </a> <ul class="dropdown-menu"> <!-- links --> </ul> </li> </ul>
  23. OOCSS TEACHES US ... create CSS ‘objects’ & apply/extend in

    the DOM <ul class="nav nav-pills"> <li class="dropdown"> <a class="dropdown-toggle" data-toggle="dropdown" href="#"> Dropdown <b class="caret"></b> </a> <ul class="dropdown-menu"> <!-- links --> </ul> </li> </ul> Markup with ‘object’ classes
  24. OOCSS TEACHES US ... create CSS ‘objects’ & apply/extend in

    the DOM <ul class="nav nav-pills"> <li class="dropdown"> <a class="dropdown-toggle" data-toggle="dropdown" href="#"> Dropdown <b class="caret"></b> </a> <ul class="dropdown-menu"> <!-- links --> </ul> </li> </ul> Markup with ‘object’ classes here
  25. OOCSS TEACHES US ... create CSS ‘objects’ & apply/extend in

    the DOM <ul class="nav nav-pills"> <li class="dropdown"> <a class="dropdown-toggle" data-toggle="dropdown" href="#"> Dropdown <b class="caret"></b> </a> <ul class="dropdown-menu"> <!-- links --> </ul> </li> </ul> Markup with ‘object’ classes here here
  26. OOCSS TEACHES US ... create CSS ‘objects’ & apply/extend in

    the DOM <ul class="nav nav-pills"> <li class="dropdown"> <a class="dropdown-toggle" data-toggle="dropdown" href="#"> Dropdown <b class="caret"></b> </a> <ul class="dropdown-menu"> <!-- links --> </ul> </li> </ul> Markup with ‘object’ classes here here here
  27. OOCSS TEACHES US ... create CSS ‘objects’ & apply/extend in

    the DOM <ul class="nav nav-pills"> <li class="dropdown"> <a class="dropdown-toggle" data-toggle="dropdown" href="#"> Dropdown <b class="caret"></b> </a> <ul class="dropdown-menu"> <!-- links --> </ul> </li> </ul> Markup with ‘object’ classes here here here here
  28. OOCSS TEACHES US ... create CSS ‘objects’ & apply/extend in

    the DOM <ul class="nav nav-pills"> <li class="dropdown"> <a class="dropdown-toggle" data-toggle="dropdown" href="#"> Dropdown <b class="caret"></b> </a> <ul class="dropdown-menu"> <!-- links --> </ul> </li> </ul> Markup with ‘object’ classes here here here here here
  29. OOCSS TEACHES US ... create CSS ‘objects’ & apply/extend in

    the DOM <ul class="nav nav-pills"> <li class="dropdown"> <a class="dropdown-toggle" data-toggle="dropdown" href="#"> Dropdown <b class="caret"></b> </a> <ul class="dropdown-menu"> <!-- links --> </ul> </li> </ul> Markup with ‘object’ classes here here here here here here
  30. OOCSS TEACHES US ... create CSS ‘objects’ & apply/extend in

    the DOM <ul class="nav nav-pills"> <li class="dropdown"> <a class="dropdown-toggle" data-toggle="dropdown" href="#"> Dropdown <b class="caret"></b> </a> <ul class="dropdown-menu"> <!-- links --> </ul> </li> </ul> Markup with ‘object’ classes here here here here here here & here
  31. OOCSS BUTTONS twitter bootstrap classes for buttons .btn { display:

    inline-block; *display: inline; padding: 4px 10px 4px; margin-bottom: 0; *margin-left: .3em; font-size: 13px; line-height: 18px; *line-height: 20px; color: #333333; text-align: center; text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75); vertical-align: middle; cursor: pointer; background-color: #f5f5f5; *background-color: #e6e6e6; background-image: -ms- linear-gradient(top, #ffffff, #e6e6e6); background-image: -webkit- gradient(linear, 0 0, 0 100%, from(#ffffff), to(#e6e6e6)); background-image: -webkit- linear-gradient(top, #ffffff, #e6e6e6); background-image: -o-linear- gradient(top, #ffffff, #e6e6e6); background-image: linear- gradient(top, #ffffff, #e6e6e6); background-image: -moz- linear-gradient(top, #ffffff, .btn:hover { color: #333333; text-decoration: none; background-color: #e6e6e6; *background-color: #d9d9d9; /* Buttons in IE7 don't get borders, so darken on hover */ background-position: 0 -15px; -webkit-transition: background-position 0.1s linear; -moz-transition: background- position 0.1s linear; -ms-transition: background- position 0.1s linear; -o-transition: background- position 0.1s linear; transition: background- position 0.1s linear; } .btn:focus { outline: thin dotted #333; outline: 5px auto -webkit- focus-ring-color; outline-offset: -2px; } .btn.active, .btn:active { .btn-mini { padding: 2px 6px; font-size: 11px; line-height: 14px; } .btn-primary, .btn-primary:hover, .btn-warning, .btn-warning:hover, .btn-danger, .btn-danger:hover, .btn-success, .btn-success:hover, .btn-info, .btn-info:hover, .btn-inverse, .btn-inverse:hover { color: #ffffff; text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25); } .btn-primary.active, .btn-warning.active, .btn-danger.active, .btn-success.active, .btn-info.active, .btn-inverse.active { color: rgba(255, 255, 255, 0.75); } filter: progid:dximagetransform.micro soft.gradient(startColorstr='#62 c462', endColorstr='#51a351', GradientType=0); filter: progid:dximagetransform.micro soft.gradient(enabled=false); } .btn-success:hover, .btn-success:active, .btn-success.active, .btn-success.disabled, .btn-success[disabled] { background-color: #51a351; *background-color: #499249; } .btn-success:active, .btn-success.active { background-color: #408140 \9; } // ----------------------------------- .btn-large { padding: 9px 14px; font-size: 15px; line-height: normal; -webkit-border-radius: 5px; -moz-border-radius: 5px;
  32. border-bottom-color: #b3b3b3; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; filter: progid:dximagetransform.micro

    soft.gradient(startColorstr='#fffff f', endColorstr='#e6e6e6', GradientType=0); filter: progid:dximagetransform.micro soft.gradient(enabled=false); *zoom: 1; -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05); -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05); } .btn:hover, .btn:active, .btn.active, .btn.disabled, .btn[disabled] { background-color: #e6e6e6; *background-color: #d9d9d9; } .btn:active, .btn.active { background-color: #cccccc \9; } .btn:first-child { *margin-left: 0; } 1px 2px rgba(0, 0, 0, 0.05); box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05); } .btn.disabled, .btn[disabled] { cursor: default; background-color: #e6e6e6; background-image: none; opacity: 0.65; filter: alpha(opacity=65); -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; } .btn-large { padding: 9px 14px; font-size: 15px; line-height: normal; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; } .btn-large [class^="icon-"] { margin-top: 1px; } .btn-small { padding: 5px 9px; font-size: 11px; line-height: 16px; } .btn-small [class^="icon-"] { margin-top: -1px; } .btn-success, .btn-success:hover { color: #ffffff; text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25); } .btn-success.active { color: rgba(255, 255, 255, 0.75); } .btn-success { background-color: #5bb75b; *background-color: #51a351; background-image: -ms- linear-gradient(top, #62c462, #51a351); background-image: -webkit- gradient(linear, 0 0, 0 100%, from(#62c462), to(#51a351)); background-image: -webkit- linear-gradient(top, #62c462, #51a351); background-image: -o-linear- gradient(top, #62c462, #51a351); background-image: -moz- linear-gradient(top, #62c462, #51a351); background-image: linear- gradient(top, #62c462, #51a351); background-repeat: repeat-x; border-color: #51a351 #51a351 #387038; border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25); large { *padding-top: 7px; *padding-bottom: 7px; } .btn-group > .btn- large.dropdown-toggle { padding-right: 12px; padding-left: 12px; } .btn-large .caret { margin-top: 6px; border-top-width: 5px; border-right-width: 5px; border-left-width: 5px; } .dropup .btn-large .caret { border-top: 0; border-bottom: 5px solid #000000; } // ------------------------------------- .icon-white { background-image: url("../img/ glyphicons-halflings- white.png"); } .icon-off { background-position: -384px 0; } I’ve decided to update all the buttons.
  33. border-bottom-color: #b3b3b3; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; filter: progid:dximagetransform.micro

    soft.gradient(startColorstr='#fffff f', endColorstr='#e6e6e6', GradientType=0); filter: progid:dximagetransform.micro soft.gradient(enabled=false); *zoom: 1; -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05); -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05); } .btn:hover, .btn:active, .btn.active, .btn.disabled, .btn[disabled] { background-color: #e6e6e6; *background-color: #d9d9d9; } .btn:active, .btn.active { background-color: #cccccc \9; } .btn:first-child { *margin-left: 0; } 1px 2px rgba(0, 0, 0, 0.05); box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05); } .btn.disabled, .btn[disabled] { cursor: default; background-color: #e6e6e6; background-image: none; opacity: 0.65; filter: alpha(opacity=65); -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; } .btn-large { padding: 9px 14px; font-size: 15px; line-height: normal; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; } .btn-large [class^="icon-"] { margin-top: 1px; } .btn-small { padding: 5px 9px; font-size: 11px; line-height: 16px; } .btn-small [class^="icon-"] { margin-top: -1px; } .btn-success, .btn-success:hover { color: #ffffff; text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25); } .btn-success.active { color: rgba(255, 255, 255, 0.75); } .btn-success { background-color: #5bb75b; *background-color: #51a351; background-image: -ms- linear-gradient(top, #62c462, #51a351); background-image: -webkit- gradient(linear, 0 0, 0 100%, from(#62c462), to(#51a351)); background-image: -webkit- linear-gradient(top, #62c462, #51a351); background-image: -o-linear- gradient(top, #62c462, #51a351); background-image: -moz- linear-gradient(top, #62c462, #51a351); background-image: linear- gradient(top, #62c462, #51a351); background-repeat: repeat-x; border-color: #51a351 #51a351 #387038; border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25); large { *padding-top: 7px; *padding-bottom: 7px; } .btn-group > .btn- large.dropdown-toggle { padding-right: 12px; padding-left: 12px; } .btn-large .caret { margin-top: 6px; border-top-width: 5px; border-right-width: 5px; border-left-width: 5px; } .dropup .btn-large .caret { border-top: 0; border-bottom: 5px solid #000000; } // ------------------------------------- .icon-white { background-image: url("../img/ glyphicons-halflings- white.png"); } .icon-off { background-position: -384px 0; } I’ve decided to update all the buttons.
  34. WE WANT OUR CAKE and eat it too

  35. PRESENTATIONAL V SEMANTIC looks good and have meaning too

  36. PRESENTATIONAL V SEMANTIC looks good and have meaning too CSS

    needs to convey design!
  37. PRESENTATIONAL V SEMANTIC looks good and have meaning too CSS

    needs to convey design! CSS needs to have semantic meaning!
  38. PRESENTATIONAL V SEMANTIC looks good and have meaning too Managing

    presentational and semantic classes with vanilla CSS ... about as realistic as Ice Man getting a top 10 hit. That’s why I remodel homes YO! No, really. Google it! sass sass baby Toooo cold!
  39. OOCSS

  40. let’s look at a real ‘object’ solution OO CSS S

  41. PLACEHOLDER CLASSES take everything you know and set it on

    fire!
  42. None
  43. <div class="main_content"> ! <article class="post_summary post_border"> ! ! <h1 class="post_header

    ">Article header</h1> ! ! <p>Pariatur Austin adipisicing, biodiesel voluptate beard four loko vegan sapiente retro readymade labore wes anderson irony. PBR cillum sriracha dolor, beard irony shoreditch laborum. Wayfarers gastropub nihil stumptown kogi. Artisan wolf aute cred. Readymade esse in four loko swag. Thundercats mlkshk dolor sriracha, semiotics gentrify authentic sustainable bicycle rights delectus typewriter esse tofu deserunt ethnic. Tattooed VHS sunt adipisicing qui, viral typewriter artisan pitchfork ad bicycle rights gentrify pork belly aliquip.</p> ! ! <a href="#" class="post_button primary_post_button">Read more</a> ! </article>! </div> OOCSS that’s a lot of classes :0
  44. <div class="main_content"> ! <article class="post_summary post_border"> ! ! <h1 class="post_header

    ">Article header</h1> ! ! <p>Pariatur Austin adipisicing, biodiesel voluptate beard four loko vegan sapiente retro readymade labore wes anderson irony. PBR cillum sriracha dolor, beard irony shoreditch laborum. Wayfarers gastropub nihil stumptown kogi. Artisan wolf aute cred. Readymade esse in four loko swag. Thundercats mlkshk dolor sriracha, semiotics gentrify authentic sustainable bicycle rights delectus typewriter esse tofu deserunt ethnic. Tattooed VHS sunt adipisicing qui, viral typewriter artisan pitchfork ad bicycle rights gentrify pork belly aliquip.</p> ! ! <a href="#" class="post_button primary_post_button">Read more</a> ! </article>! </div> OOCSS that’s a lot of classes :0 1
  45. <div class="main_content"> ! <article class="post_summary post_border"> ! ! <h1 class="post_header

    ">Article header</h1> ! ! <p>Pariatur Austin adipisicing, biodiesel voluptate beard four loko vegan sapiente retro readymade labore wes anderson irony. PBR cillum sriracha dolor, beard irony shoreditch laborum. Wayfarers gastropub nihil stumptown kogi. Artisan wolf aute cred. Readymade esse in four loko swag. Thundercats mlkshk dolor sriracha, semiotics gentrify authentic sustainable bicycle rights delectus typewriter esse tofu deserunt ethnic. Tattooed VHS sunt adipisicing qui, viral typewriter artisan pitchfork ad bicycle rights gentrify pork belly aliquip.</p> ! ! <a href="#" class="post_button primary_post_button">Read more</a> ! </article>! </div> OOCSS that’s a lot of classes :0 1 2
  46. <div class="main_content"> ! <article class="post_summary post_border"> ! ! <h1 class="post_header

    ">Article header</h1> ! ! <p>Pariatur Austin adipisicing, biodiesel voluptate beard four loko vegan sapiente retro readymade labore wes anderson irony. PBR cillum sriracha dolor, beard irony shoreditch laborum. Wayfarers gastropub nihil stumptown kogi. Artisan wolf aute cred. Readymade esse in four loko swag. Thundercats mlkshk dolor sriracha, semiotics gentrify authentic sustainable bicycle rights delectus typewriter esse tofu deserunt ethnic. Tattooed VHS sunt adipisicing qui, viral typewriter artisan pitchfork ad bicycle rights gentrify pork belly aliquip.</p> ! ! <a href="#" class="post_button primary_post_button">Read more</a> ! </article>! </div> OOCSS that’s a lot of classes :0 1 2 3
  47. <div class="main_content"> ! <article class="post_summary post_border"> ! ! <h1 class="post_header

    ">Article header</h1> ! ! <p>Pariatur Austin adipisicing, biodiesel voluptate beard four loko vegan sapiente retro readymade labore wes anderson irony. PBR cillum sriracha dolor, beard irony shoreditch laborum. Wayfarers gastropub nihil stumptown kogi. Artisan wolf aute cred. Readymade esse in four loko swag. Thundercats mlkshk dolor sriracha, semiotics gentrify authentic sustainable bicycle rights delectus typewriter esse tofu deserunt ethnic. Tattooed VHS sunt adipisicing qui, viral typewriter artisan pitchfork ad bicycle rights gentrify pork belly aliquip.</p> ! ! <a href="#" class="post_button primary_post_button">Read more</a> ! </article>! </div> OOCSS that’s a lot of classes :0 1 2 3 4
  48. <div class="main_content"> ! <article class="post_summary post_border"> ! ! <h1 class="post_header

    ">Article header</h1> ! ! <p>Pariatur Austin adipisicing, biodiesel voluptate beard four loko vegan sapiente retro readymade labore wes anderson irony. PBR cillum sriracha dolor, beard irony shoreditch laborum. Wayfarers gastropub nihil stumptown kogi. Artisan wolf aute cred. Readymade esse in four loko swag. Thundercats mlkshk dolor sriracha, semiotics gentrify authentic sustainable bicycle rights delectus typewriter esse tofu deserunt ethnic. Tattooed VHS sunt adipisicing qui, viral typewriter artisan pitchfork ad bicycle rights gentrify pork belly aliquip.</p> ! ! <a href="#" class="post_button primary_post_button">Read more</a> ! </article>! </div> OOCSS that’s a lot of classes :0 1 2 3 4 5
  49. <div class="main_content"> ! <article class="post_summary post_border"> ! ! <h1 class="post_header

    ">Article header</h1> ! ! <p>Pariatur Austin adipisicing, biodiesel voluptate beard four loko vegan sapiente retro readymade labore wes anderson irony. PBR cillum sriracha dolor, beard irony shoreditch laborum. Wayfarers gastropub nihil stumptown kogi. Artisan wolf aute cred. Readymade esse in four loko swag. Thundercats mlkshk dolor sriracha, semiotics gentrify authentic sustainable bicycle rights delectus typewriter esse tofu deserunt ethnic. Tattooed VHS sunt adipisicing qui, viral typewriter artisan pitchfork ad bicycle rights gentrify pork belly aliquip.</p> ! ! <a href="#" class="post_button primary_post_button">Read more</a> ! </article>! </div> OOCSS that’s a lot of classes :0 1 2 3 4 5 6
  50. .post_summary { ! width: 480 / 12 * 1em; !

    box-sizing: border-box; ! padding: 2em; ! margin: 1em 10 / 16 * 1em 1em 0; ! box-shadow: 0 0 30px transparentize(#000, 0.5); } .post_border { ! border: 2px solid transparentize(#000, 0.7); ! border-radius: 15 / 16 * 1em; } .post_header { ! font-family: "Arial Narrow"; ! font-weight: lighter; } .post_button { ! font-size: 1.5em; ! display: inline-block; ! font-weight: bold; ! color: white; ! text-shadow: 0 0 3px transparentize(#000, 0.5); ! padding: 10px; ! border-radius: 5px; ! border: 1px solid darken(#cdeb8e, 50%); ! text-decoration: none; } .primary_post_button { ! background: -webkit-linear-gradient(top, #cdeb8e 0%,#a5c956 100%); ! &:hover { ! ! background: -webkit-linear-gradient(top, lighten(#cdeb8e, 10%) 0%,lighten(#a5c956, 10%) 100%); ! } ! &:active { ! ! background: -webkit-linear-gradient(top, #a5c956 0%,#cdeb8e 100%); ! } } OOCSS mixing presentational and semantic CSS
  51. .post_summary { ! width: 480 / 12 * 1em; !

    box-sizing: border-box; ! padding: 2em; ! margin: 1em 10 / 16 * 1em 1em 0; ! box-shadow: 0 0 30px transparentize(#000, 0.5); } .post_border { ! border: 2px solid transparentize(#000, 0.7); ! border-radius: 15 / 16 * 1em; } .post_header { ! font-family: "Arial Narrow"; ! font-weight: lighter; } .post_button { ! font-size: 1.5em; ! display: inline-block; ! font-weight: bold; ! color: white; ! text-shadow: 0 0 3px transparentize(#000, 0.5); ! padding: 10px; ! border-radius: 5px; ! border: 1px solid darken(#cdeb8e, 50%); ! text-decoration: none; } .primary_post_button { ! background: -webkit-linear-gradient(top, #cdeb8e 0%,#a5c956 100%); ! &:hover { ! ! background: -webkit-linear-gradient(top, lighten(#cdeb8e, 10%) 0%,lighten(#a5c956, 10%) 100%); ! } ! &:active { ! ! background: -webkit-linear-gradient(top, #a5c956 0%,#cdeb8e 100%); ! } } OOCSS mixing presentational and semantic CSS Manually extending in vanilla CSS is really confusing!
  52. .post_summary { ! width: 480 / 12 * 1em; !

    box-sizing: border-box; ! padding: 2em; ! margin: 1em 10 / 16 * 1em 1em 0; ! box-shadow: 0 0 30px transparentize(#000, 0.5); } .post_border { ! border: 2px solid transparentize(#000, 0.7); ! border-radius: 15 / 16 * 1em; } .post_header { ! font-family: "Arial Narrow"; ! font-weight: lighter; } .post_button { ! font-size: 1.5em; ! display: inline-block; ! font-weight: bold; ! color: white; ! text-shadow: 0 0 3px transparentize(#000, 0.5); ! padding: 10px; ! border-radius: 5px; ! border: 1px solid darken(#cdeb8e, 50%); ! text-decoration: none; } .primary_post_button { ! background: -webkit-linear-gradient(top, #cdeb8e 0%,#a5c956 100%); ! &:hover { ! ! background: -webkit-linear-gradient(top, lighten(#cdeb8e, 10%) 0%,lighten(#a5c956, 10%) 100%); ! } ! &:active { ! ! background: -webkit-linear-gradient(top, #a5c956 0%,#cdeb8e 100%); ! } } OOCSS mixing presentational and semantic CSS Manually extending in vanilla CSS is really confusing! Especially when there are 1419 line of code :0
  53. .post_summary { ! width: 480 / 12 * 1em; !

    box-sizing: border-box; ! padding: 2em; ! margin: 1em 10 / 16 * 1em 1em 0; ! box-shadow: 0 0 30px transparentize(#000, 0.5); } .post_border { ! border: 2px solid transparentize(#000, 0.7); ! border-radius: 15 / 16 * 1em; } .post_header { ! font-family: "Arial Narrow"; ! font-weight: lighter; } .post_button { ! font-size: 1.5em; ! display: inline-block; ! font-weight: bold; ! color: white; ! text-shadow: 0 0 3px transparentize(#000, 0.5); ! padding: 10px; ! border-radius: 5px; ! border: 1px solid darken(#cdeb8e, 50%); ! text-decoration: none; } .primary_post_button { ! background: -webkit-linear-gradient(top, #cdeb8e 0%,#a5c956 100%); ! &:hover { ! ! background: -webkit-linear-gradient(top, lighten(#cdeb8e, 10%) 0%,lighten(#a5c956, 10%) 100%); ! } ! &:active { ! ! background: -webkit-linear-gradient(top, #a5c956 0%,#cdeb8e 100%); ! } } OOCSS mixing presentational and semantic CSS Manually extending in vanilla CSS is really confusing! IMHO, extending classes like this in the DOM sucks! Especially when there are 1419 line of code :0
  54. <section class="main_content"> ! <article class="post_summary”> ! ! <h1>Article header</h1> !

    ! <p>Pariatur Austin adipisicing, biodiesel voluptate beard four loko vegan sapiente retro readymade labore wes anderson irony. PBR cillum sriracha dolor, beard irony shoreditch laborum. Wayfarers gastropub nihil stumptown kogi. Artisan wolf aute cred. Readymade esse in four loko swag. Thundercats mlkshk dolor sriracha, semiotics gentrify authentic sustainable bicycle rights delectus typewriter esse tofu deserunt ethnic. Tattooed VHS sunt adipisicing qui, viral typewriter artisan pitchfork ad bicycle rights gentrify pork belly aliquip.</p> ! ! <a href="#">Read more</a> ! </article>! </section> OO’S’CSS using semantic classes on the block
  55. <section class="main_content"> ! <article class="post_summary”> ! ! <h1>Article header</h1> !

    ! <p>Pariatur Austin adipisicing, biodiesel voluptate beard four loko vegan sapiente retro readymade labore wes anderson irony. PBR cillum sriracha dolor, beard irony shoreditch laborum. Wayfarers gastropub nihil stumptown kogi. Artisan wolf aute cred. Readymade esse in four loko swag. Thundercats mlkshk dolor sriracha, semiotics gentrify authentic sustainable bicycle rights delectus typewriter esse tofu deserunt ethnic. Tattooed VHS sunt adipisicing qui, viral typewriter artisan pitchfork ad bicycle rights gentrify pork belly aliquip.</p> ! ! <a href="#">Read more</a> ! </article>! </section> OO’S’CSS using semantic classes on the block Conveys simple meaning about the block.
  56. <section class="main_content"> ! <article class="post_summary”> ! ! <h1>Article header</h1> !

    ! <p>Pariatur Austin adipisicing, biodiesel voluptate beard four loko vegan sapiente retro readymade labore wes anderson irony. PBR cillum sriracha dolor, beard irony shoreditch laborum. Wayfarers gastropub nihil stumptown kogi. Artisan wolf aute cred. Readymade esse in four loko swag. Thundercats mlkshk dolor sriracha, semiotics gentrify authentic sustainable bicycle rights delectus typewriter esse tofu deserunt ethnic. Tattooed VHS sunt adipisicing qui, viral typewriter artisan pitchfork ad bicycle rights gentrify pork belly aliquip.</p> ! ! <a href="#">Read more</a> ! </article>! </section> OO’S’CSS using semantic classes on the block Conveys simple meaning about the block. Any redesign hinges off of editing one class in the CSS
  57. <section class="main_content"> ! <article class="post_summary”> ! ! <h1>Article header</h1> !

    ! <p>Pariatur Austin adipisicing, biodiesel voluptate beard four loko vegan sapiente retro readymade labore wes anderson irony. PBR cillum sriracha dolor, beard irony shoreditch laborum. Wayfarers gastropub nihil stumptown kogi. Artisan wolf aute cred. Readymade esse in four loko swag. Thundercats mlkshk dolor sriracha, semiotics gentrify authentic sustainable bicycle rights delectus typewriter esse tofu deserunt ethnic. Tattooed VHS sunt adipisicing qui, viral typewriter artisan pitchfork ad bicycle rights gentrify pork belly aliquip.</p> ! ! <a href="#">Read more</a> ! </article>! </section> OO’S’CSS using semantic classes on the block Conveys simple meaning about the block. Any redesign hinges off of editing one class in the CSS No need to edit the markup. That’s cool!
  58. =default_block width: 480 / 12 * 1em box-sizing: border-box padding:

    2em margin: 1em 10 / 16 * 1em 1em 0 box-shadow: 0 0 30px transparentize(black, 0.5) @extend %default_border =default_border border: 2px solid transparentize(black, 0.7) border-radius: 15 / 16 * 1em =post_header font-family: "Arial Narrow" font-weight: lighter =button font-size: 1.5em display: inline-block font-weight: bold color: white text-shadow: 0 0 3px transparentize(black, 0.5) padding: 10px border-radius: 5px border: 1px solid darken(#cdeb8e, 50%) text-decoration: none =primary_button background: -webkit-linear- gradient(top, #cdeb8e 0%, #a5c956 100%) &:hover background: -webkit-linear- gradient(top, lighten(#cdeb8e, 10%) 0%, lighten(#a5c956, 10%) 100%) &:active background: -webkit-linear- gradient(top, #a5c956 0%, #cdeb8e 100%) .post_summary +default_block h1 +post_header a +button +primary_button OO’S’CSS @mixin is a cool tool ...
  59. =default_block width: 480 / 12 * 1em box-sizing: border-box padding:

    2em margin: 1em 10 / 16 * 1em 1em 0 box-shadow: 0 0 30px transparentize(black, 0.5) @extend %default_border =default_border border: 2px solid transparentize(black, 0.7) border-radius: 15 / 16 * 1em =post_header font-family: "Arial Narrow" font-weight: lighter =button font-size: 1.5em display: inline-block font-weight: bold color: white text-shadow: 0 0 3px transparentize(black, 0.5) padding: 10px border-radius: 5px border: 1px solid darken(#cdeb8e, 50%) text-decoration: none =primary_button background: -webkit-linear- gradient(top, #cdeb8e 0%, #a5c956 100%) &:hover background: -webkit-linear- gradient(top, lighten(#cdeb8e, 10%) 0%, lighten(#a5c956, 10%) 100%) &:active background: -webkit-linear- gradient(top, #a5c956 0%, #cdeb8e 100%) .post_summary +default_block h1 +post_header a +button +primary_button OO’S’CSS @mixin is a cool tool ... Mixins are never processed into CSS until used.
  60. =default_block width: 480 / 12 * 1em box-sizing: border-box padding:

    2em margin: 1em 10 / 16 * 1em 1em 0 box-shadow: 0 0 30px transparentize(black, 0.5) @extend %default_border =default_border border: 2px solid transparentize(black, 0.7) border-radius: 15 / 16 * 1em =post_header font-family: "Arial Narrow" font-weight: lighter =button font-size: 1.5em display: inline-block font-weight: bold color: white text-shadow: 0 0 3px transparentize(black, 0.5) padding: 10px border-radius: 5px border: 1px solid darken(#cdeb8e, 50%) text-decoration: none =primary_button background: -webkit-linear- gradient(top, #cdeb8e 0%, #a5c956 100%) &:hover background: -webkit-linear- gradient(top, lighten(#cdeb8e, 10%) 0%, lighten(#a5c956, 10%) 100%) &:active background: -webkit-linear- gradient(top, #a5c956 0%, #cdeb8e 100%) .post_summary +default_block h1 +post_header a +button +primary_button OO’S’CSS @mixin is a cool tool ... Mixins are never processed into CSS until used. Mixins are MUCH EASIER to reuse then standard CSS.
  61. =default_block width: 480 / 12 * 1em box-sizing: border-box padding:

    2em margin: 1em 10 / 16 * 1em 1em 0 box-shadow: 0 0 30px transparentize(black, 0.5) @extend %default_border =default_border border: 2px solid transparentize(black, 0.7) border-radius: 15 / 16 * 1em =post_header font-family: "Arial Narrow" font-weight: lighter =button font-size: 1.5em display: inline-block font-weight: bold color: white text-shadow: 0 0 3px transparentize(black, 0.5) padding: 10px border-radius: 5px border: 1px solid darken(#cdeb8e, 50%) text-decoration: none =primary_button background: -webkit-linear- gradient(top, #cdeb8e 0%, #a5c956 100%) &:hover background: -webkit-linear- gradient(top, lighten(#cdeb8e, 10%) 0%, lighten(#a5c956, 10%) 100%) &:active background: -webkit-linear- gradient(top, #a5c956 0%, #cdeb8e 100%) .post_summary +default_block h1 +post_header a +button +primary_button OO’S’CSS @mixin is a cool tool ... We have combined all these ‘object’ mixins into a nice module. Mixins are never processed into CSS until used. Mixins are MUCH EASIER to reuse then standard CSS.
  62. .post_summary { width: 40em; box-sizing: border-box; padding: 2em; margin: 1em

    0.625em 1em 0; box-shadow: 0 0 30px rgba(0, 0, 0, 0.5); } .post_summary h1 { ! font-family: "Arial Narrow"; ! font-weight: lighter; } .post_summary a { ! font-size: 1.5em; ! display: inline-block; ! font-weight: bold; ! color: white; ! text-shadow: 0 0 3px rgba(0, 0, 0, 0.5); ! padding: 10px; ! border-radius: 5px; ! border: 1px solid #4c6812; ! text-decoration: none; ! background: -webkit-linear- gradient(top, #cdeb8e 0%, #a5c956 100%); } .post_summary a:hover { ! background: -webkit-linear- gradient(top, #e0f3b9 0%, #bad57d 100%); } .post_summary a:active { ! background: -webkit-linear- gradient(top, #a5c956 0%, #cdeb8e 100%); } OO’S’CSS the robot will copy and paste
  63. .post_summary { width: 40em; box-sizing: border-box; padding: 2em; margin: 1em

    0.625em 1em 0; box-shadow: 0 0 30px rgba(0, 0, 0, 0.5); } .post_summary h1 { ! font-family: "Arial Narrow"; ! font-weight: lighter; } .post_summary a { ! font-size: 1.5em; ! display: inline-block; ! font-weight: bold; ! color: white; ! text-shadow: 0 0 3px rgba(0, 0, 0, 0.5); ! padding: 10px; ! border-radius: 5px; ! border: 1px solid #4c6812; ! text-decoration: none; ! background: -webkit-linear- gradient(top, #cdeb8e 0%, #a5c956 100%); } .post_summary a:hover { ! background: -webkit-linear- gradient(top, #e0f3b9 0%, #bad57d 100%); } .post_summary a:active { ! background: -webkit-linear- gradient(top, #a5c956 0%, #cdeb8e 100%); } OO’S’CSS the robot will copy and paste This is really clean and looks awesome right?
  64. .post_summary { width: 40em; box-sizing: border-box; padding: 2em; margin: 1em

    0.625em 1em 0; box-shadow: 0 0 30px rgba(0, 0, 0, 0.5); } .post_summary h1 { ! font-family: "Arial Narrow"; ! font-weight: lighter; } .post_summary a { ! font-size: 1.5em; ! display: inline-block; ! font-weight: bold; ! color: white; ! text-shadow: 0 0 3px rgba(0, 0, 0, 0.5); ! padding: 10px; ! border-radius: 5px; ! border: 1px solid #4c6812; ! text-decoration: none; ! background: -webkit-linear- gradient(top, #cdeb8e 0%, #a5c956 100%); } .post_summary a:hover { ! background: -webkit-linear- gradient(top, #e0f3b9 0%, #bad57d 100%); } .post_summary a:active { ! background: -webkit-linear- gradient(top, #a5c956 0%, #cdeb8e 100%); } OO’S’CSS the robot will copy and paste This is really clean and looks awesome right? But for reuse, this method will 100% duplicate all the CSS under a new selector
  65. .post_summary { @include default_block; h1 { @include post_header; } a

    { @include button; @include primary_button; } } .main_article { @include default_block; h3 { @include post_header; } } button { @include button; @include primary_button; } OO’S’CSS the robot will copy and paste
  66. .post_summary { @include default_block; h1 { @include post_header; } a

    { @include button; @include primary_button; } } .main_article { @include default_block; h3 { @include post_header; } } button { @include button; @include primary_button; } OO’S’CSS the robot will copy and paste THIS IS GREAT!
  67. .post_summary { @include default_block; h1 { @include post_header; } a

    { @include button; @include primary_button; } } .main_article { @include default_block; h3 { @include post_header; } } button { @include button; @include primary_button; } OO’S’CSS the robot will copy and paste THIS IS GREAT! REALLY REUSING SOME CODE!
  68. .post_summary { @include default_block; h1 { @include post_header; } a

    { @include button; @include primary_button; } } .main_article { @include default_block; h3 { @include post_header; } } button { @include button; @include primary_button; } OO’S’CSS the robot will copy and paste THIS IS GREAT! REALLY REUSING SOME CODE! OH MAN! THIS IS SOOOO DRY!
  69. .post_summary { width: 40em; box-sizing: border-box; padding: 2em; margin: 1em

    0.625em 1em 0; box-shadow: 0 0 30px rgba(0, 0, 0, 0.5); } .post_summary h1 { font-family: "Arial Narrow"; font-weight: lighter; } .post_summary a { font-size: 1.5em; display: inline-block; font-weight: bold; color: white; text-shadow: 0 0 3px rgba(0, 0, 0, 0.5); padding: 10px; border-radius: 5px; border: 1px solid #4c6812; text-decoration: none; background: -webkit-linear-gradient(top, #cdeb8e 0%, #a5c956 100%); } .post_summary a:hover { background: -webkit-linear-gradient(top, #e0f3b9 0%, #bad57d 100%); } .post_summary a:active { background: -webkit-linear-gradient(top, #a5c956 0%, #cdeb8e 100%); } .main_article { width: 40em; box-sizing: border-box; padding: 2em; margin: 1em 0.625em 1em 0; box-shadow: 0 0 30px rgba(0, 0, 0, 0.5); } .main_article h3 { font-family: "Arial Narrow"; font-weight: lighter; } button { font-size: 1.5em; display: inline-block; font-weight: bold; color: white; text-shadow: 0 0 3px rgba(0, 0, 0, 0.5); padding: 10px; border-radius: 5px; border: 1px solid #4c6812; text-decoration: none; background: -webkit-linear-gradient(top, #cdeb8e 0%, #a5c956 100%); } button:hover { background: -webkit-linear-gradient(top, #e0f3b9 0%, #bad57d 100%); } button:active { background: -webkit-linear-gradient(top, #a5c956 0%, #cdeb8e 100%); } OO’S’CSS the robot will copy and paste
  70. .post_summary { width: 40em; box-sizing: border-box; padding: 2em; margin: 1em

    0.625em 1em 0; box-shadow: 0 0 30px rgba(0, 0, 0, 0.5); } .post_summary h1 { font-family: "Arial Narrow"; font-weight: lighter; } .post_summary a { font-size: 1.5em; display: inline-block; font-weight: bold; color: white; text-shadow: 0 0 3px rgba(0, 0, 0, 0.5); padding: 10px; border-radius: 5px; border: 1px solid #4c6812; text-decoration: none; background: -webkit-linear-gradient(top, #cdeb8e 0%, #a5c956 100%); } .post_summary a:hover { background: -webkit-linear-gradient(top, #e0f3b9 0%, #bad57d 100%); } .post_summary a:active { background: -webkit-linear-gradient(top, #a5c956 0%, #cdeb8e 100%); } .main_article { width: 40em; box-sizing: border-box; padding: 2em; margin: 1em 0.625em 1em 0; box-shadow: 0 0 30px rgba(0, 0, 0, 0.5); } .main_article h3 { font-family: "Arial Narrow"; font-weight: lighter; } button { font-size: 1.5em; display: inline-block; font-weight: bold; color: white; text-shadow: 0 0 3px rgba(0, 0, 0, 0.5); padding: 10px; border-radius: 5px; border: 1px solid #4c6812; text-decoration: none; background: -webkit-linear-gradient(top, #cdeb8e 0%, #a5c956 100%); } button:hover { background: -webkit-linear-gradient(top, #e0f3b9 0%, #bad57d 100%); } button:active { background: -webkit-linear-gradient(top, #a5c956 0%, #cdeb8e 100%); } OO’S’CSS the robot will copy and paste
  71. .post_summary { width: 40em; box-sizing: border-box; padding: 2em; margin: 1em

    0.625em 1em 0; box-shadow: 0 0 30px rgba(0, 0, 0, 0.5); } .post_summary h1 { font-family: "Arial Narrow"; font-weight: lighter; } .post_summary a { font-size: 1.5em; display: inline-block; font-weight: bold; color: white; text-shadow: 0 0 3px rgba(0, 0, 0, 0.5); padding: 10px; border-radius: 5px; border: 1px solid #4c6812; text-decoration: none; background: -webkit-linear-gradient(top, #cdeb8e 0%, #a5c956 100%); } .post_summary a:hover { background: -webkit-linear-gradient(top, #e0f3b9 0%, #bad57d 100%); } .post_summary a:active { background: -webkit-linear-gradient(top, #a5c956 0%, #cdeb8e 100%); } .main_article { width: 40em; box-sizing: border-box; padding: 2em; margin: 1em 0.625em 1em 0; box-shadow: 0 0 30px rgba(0, 0, 0, 0.5); } .main_article h3 { font-family: "Arial Narrow"; font-weight: lighter; } button { font-size: 1.5em; display: inline-block; font-weight: bold; color: white; text-shadow: 0 0 3px rgba(0, 0, 0, 0.5); padding: 10px; border-radius: 5px; border: 1px solid #4c6812; text-decoration: none; background: -webkit-linear-gradient(top, #cdeb8e 0%, #a5c956 100%); } button:hover { background: -webkit-linear-gradient(top, #e0f3b9 0%, #bad57d 100%); } button:active { background: -webkit-linear-gradient(top, #a5c956 0%, #cdeb8e 100%); } OO’S’CSS the robot will copy and paste
  72. .post_summary { width: 40em; box-sizing: border-box; padding: 2em; margin: 1em

    0.625em 1em 0; box-shadow: 0 0 30px rgba(0, 0, 0, 0.5); } .post_summary h1 { font-family: "Arial Narrow"; font-weight: lighter; } .post_summary a { font-size: 1.5em; display: inline-block; font-weight: bold; color: white; text-shadow: 0 0 3px rgba(0, 0, 0, 0.5); padding: 10px; border-radius: 5px; border: 1px solid #4c6812; text-decoration: none; background: -webkit-linear-gradient(top, #cdeb8e 0%, #a5c956 100%); } .post_summary a:hover { background: -webkit-linear-gradient(top, #e0f3b9 0%, #bad57d 100%); } .post_summary a:active { background: -webkit-linear-gradient(top, #a5c956 0%, #cdeb8e 100%); } .main_article { width: 40em; box-sizing: border-box; padding: 2em; margin: 1em 0.625em 1em 0; box-shadow: 0 0 30px rgba(0, 0, 0, 0.5); } .main_article h3 { font-family: "Arial Narrow"; font-weight: lighter; } button { font-size: 1.5em; display: inline-block; font-weight: bold; color: white; text-shadow: 0 0 3px rgba(0, 0, 0, 0.5); padding: 10px; border-radius: 5px; border: 1px solid #4c6812; text-decoration: none; background: -webkit-linear-gradient(top, #cdeb8e 0%, #a5c956 100%); } button:hover { background: -webkit-linear-gradient(top, #e0f3b9 0%, #bad57d 100%); } button:active { background: -webkit-linear-gradient(top, #a5c956 0%, #cdeb8e 100%); } OO’S’CSS the robot will copy and paste
  73. .post_summary { width: 40em; box-sizing: border-box; padding: 2em; margin: 1em

    0.625em 1em 0; box-shadow: 0 0 30px rgba(0, 0, 0, 0.5); } .post_summary h1 { font-family: "Arial Narrow"; font-weight: lighter; } .post_summary a { font-size: 1.5em; display: inline-block; font-weight: bold; color: white; text-shadow: 0 0 3px rgba(0, 0, 0, 0.5); padding: 10px; border-radius: 5px; border: 1px solid #4c6812; text-decoration: none; background: -webkit-linear-gradient(top, #cdeb8e 0%, #a5c956 100%); } .post_summary a:hover { background: -webkit-linear-gradient(top, #e0f3b9 0%, #bad57d 100%); } .post_summary a:active { background: -webkit-linear-gradient(top, #a5c956 0%, #cdeb8e 100%); } .main_article { width: 40em; box-sizing: border-box; padding: 2em; margin: 1em 0.625em 1em 0; box-shadow: 0 0 30px rgba(0, 0, 0, 0.5); } .main_article h3 { font-family: "Arial Narrow"; font-weight: lighter; } button { font-size: 1.5em; display: inline-block; font-weight: bold; color: white; text-shadow: 0 0 3px rgba(0, 0, 0, 0.5); padding: 10px; border-radius: 5px; border: 1px solid #4c6812; text-decoration: none; background: -webkit-linear-gradient(top, #cdeb8e 0%, #a5c956 100%); } button:hover { background: -webkit-linear-gradient(top, #e0f3b9 0%, #bad57d 100%); } button:active { background: -webkit-linear-gradient(top, #a5c956 0%, #cdeb8e 100%); } OO’S’CSS the robot will copy and paste
  74. .default_block width: 480 / 12 * 1em box-sizing: border-box padding:

    2em margin: 1em 10 / 16 * 1em 1em 0 box-shadow: 0 0 30px transparentize(black, 0.5) @extend .default_border .default_border border: 2px solid transparentize(black, 0.7) border-radius: 15 / 16 * 1em .post_header font-family: "Arial Narrow" font-weight: lighter .button font-size: 1.5em display: inline-block font-weight: bold color: white text-shadow: 0 0 3px transparentize(black, 0.5) padding: 10px border-radius: 5px border: 1px solid darken(#cdeb8e, 50%) text-decoration: none .primary_button background: -webkit-linear- gradient(top, #cdeb8e 0%, #a5c956 100%) &:hover background: -webkit-linear- gradient(top, lighten(#cdeb8e, 10%) 0%, lighten(#a5c956, 10%) 100%) &:active background: -webkit-linear- gradient(top, #a5c956 0%, #cdeb8e 100%) .post_summary @extend .default_block h1 @extend .post_header a @extend .button @extend .primary_button OO’S’CSS @extend is pretty awesome ...
  75. .default_block width: 480 / 12 * 1em box-sizing: border-box padding:

    2em margin: 1em 10 / 16 * 1em 1em 0 box-shadow: 0 0 30px transparentize(black, 0.5) @extend .default_border .default_border border: 2px solid transparentize(black, 0.7) border-radius: 15 / 16 * 1em .post_header font-family: "Arial Narrow" font-weight: lighter .button font-size: 1.5em display: inline-block font-weight: bold color: white text-shadow: 0 0 3px transparentize(black, 0.5) padding: 10px border-radius: 5px border: 1px solid darken(#cdeb8e, 50%) text-decoration: none .primary_button background: -webkit-linear- gradient(top, #cdeb8e 0%, #a5c956 100%) &:hover background: -webkit-linear- gradient(top, lighten(#cdeb8e, 10%) 0%, lighten(#a5c956, 10%) 100%) &:active background: -webkit-linear- gradient(top, #a5c956 0%, #cdeb8e 100%) .post_summary @extend .default_block h1 @extend .post_header a @extend .button @extend .primary_button OO’S’CSS @extend is pretty awesome ... We have combined all these ‘object’ classes into a nice module ...
  76. .default_block width: 480 / 12 * 1em box-sizing: border-box padding:

    2em margin: 1em 10 / 16 * 1em 1em 0 box-shadow: 0 0 30px transparentize(black, 0.5) @extend .default_border .default_border border: 2px solid transparentize(black, 0.7) border-radius: 15 / 16 * 1em .post_header font-family: "Arial Narrow" font-weight: lighter .button font-size: 1.5em display: inline-block font-weight: bold color: white text-shadow: 0 0 3px transparentize(black, 0.5) padding: 10px border-radius: 5px border: 1px solid darken(#cdeb8e, 50%) text-decoration: none .primary_button background: -webkit-linear- gradient(top, #cdeb8e 0%, #a5c956 100%) &:hover background: -webkit-linear- gradient(top, lighten(#cdeb8e, 10%) 0%, lighten(#a5c956, 10%) 100%) &:active background: -webkit-linear- gradient(top, #a5c956 0%, #cdeb8e 100%) .post_summary @extend .default_block h1 @extend .post_header a @extend .button @extend .primary_button OO’S’CSS @extend is pretty awesome ... ... but all these classes will get processed into the CSS? We have combined all these ‘object’ classes into a nice module ...
  77. .default_block width: 480 / 12 * 1em box-sizing: border-box padding:

    2em margin: 1em 10 / 16 * 1em 1em 0 box-shadow: 0 0 30px transparentize(black, 0.5) @extend .default_border .default_border border: 2px solid transparentize(black, 0.7) border-radius: 15 / 16 * 1em .post_header font-family: "Arial Narrow" font-weight: lighter .button font-size: 1.5em display: inline-block font-weight: bold color: white text-shadow: 0 0 3px transparentize(black, 0.5) padding: 10px border-radius: 5px border: 1px solid darken(#cdeb8e, 50%) text-decoration: none .primary_button background: -webkit-linear- gradient(top, #cdeb8e 0%, #a5c956 100%) &:hover background: -webkit-linear- gradient(top, lighten(#cdeb8e, 10%) 0%, lighten(#a5c956, 10%) 100%) &:active background: -webkit-linear- gradient(top, #a5c956 0%, #cdeb8e 100%) .post_summary @extend .default_block h1 @extend .post_header a @extend .button @extend .primary_button OO’S’CSS @extend is pretty awesome ... ... but all these classes will get processed into the CSS? We have combined all these ‘object’ classes into a nice module ... so we have presentational classes for no reason but to be extended by semantic ones?
  78. .default_block, .post_summary { width: 40em; box-sizing: border-box; padding: 2em; margin:

    1em 0.625em 1em 0; box-shadow: 0 0 30px rgba(0, 0, 0, 0.5); } .default_border, .default_block, .post_summary { border: 2px solid rgba(0, 0, 0, 0.3); border-radius: 0.9375em; } .post_header, .post_summary h1 { font-family: "Arial Narrow"; font-weight: lighter; } .button, .post_summary a { font-size: 1.5em; display: inline-block; font-weight: bold; color: white; text-shadow: 0 0 3px rgba(0, 0, 0, 0.5); padding: 10px; border-radius: 5px; border: 1px solid #4c6812; text-decoration: none; } .primary_button, .post_summary a { background: -webkit-linear- gradient(top, #cdeb8e 0%, #a5c956 100%); } .primary_button:hover, .post_summary a:hover { background: -webkit-linear- gradient(top, #e0f3b9 0%, #bad57d 100%); } .primary_button:active, .post_summary a:active { background: -webkit-linear- gradient(top, #a5c956 0%, #cdeb8e 100%); } OO’S’CSS our processed CSS
  79. .default_block, .post_summary { width: 40em; box-sizing: border-box; padding: 2em; margin:

    1em 0.625em 1em 0; box-shadow: 0 0 30px rgba(0, 0, 0, 0.5); } .default_border, .default_block, .post_summary { border: 2px solid rgba(0, 0, 0, 0.3); border-radius: 0.9375em; } .post_header, .post_summary h1 { font-family: "Arial Narrow"; font-weight: lighter; } .button, .post_summary a { font-size: 1.5em; display: inline-block; font-weight: bold; color: white; text-shadow: 0 0 3px rgba(0, 0, 0, 0.5); padding: 10px; border-radius: 5px; border: 1px solid #4c6812; text-decoration: none; } .primary_button, .post_summary a { background: -webkit-linear- gradient(top, #cdeb8e 0%, #a5c956 100%); } .primary_button:hover, .post_summary a:hover { background: -webkit-linear- gradient(top, #e0f3b9 0%, #bad57d 100%); } .primary_button:active, .post_summary a:active { background: -webkit-linear- gradient(top, #a5c956 0%, #cdeb8e 100%); } OO’S’CSS our processed CSS OOCSS class
  80. .default_block, .post_summary { width: 40em; box-sizing: border-box; padding: 2em; margin:

    1em 0.625em 1em 0; box-shadow: 0 0 30px rgba(0, 0, 0, 0.5); } .default_border, .default_block, .post_summary { border: 2px solid rgba(0, 0, 0, 0.3); border-radius: 0.9375em; } .post_header, .post_summary h1 { font-family: "Arial Narrow"; font-weight: lighter; } .button, .post_summary a { font-size: 1.5em; display: inline-block; font-weight: bold; color: white; text-shadow: 0 0 3px rgba(0, 0, 0, 0.5); padding: 10px; border-radius: 5px; border: 1px solid #4c6812; text-decoration: none; } .primary_button, .post_summary a { background: -webkit-linear- gradient(top, #cdeb8e 0%, #a5c956 100%); } .primary_button:hover, .post_summary a:hover { background: -webkit-linear- gradient(top, #e0f3b9 0%, #bad57d 100%); } .primary_button:active, .post_summary a:active { background: -webkit-linear- gradient(top, #a5c956 0%, #cdeb8e 100%); } OO’S’CSS our processed CSS OOCSS class Semantic class
  81. .default_block, .post_summary { width: 40em; box-sizing: border-box; padding: 2em; margin:

    1em 0.625em 1em 0; box-shadow: 0 0 30px rgba(0, 0, 0, 0.5); } .default_border, .default_block, .post_summary { border: 2px solid rgba(0, 0, 0, 0.3); border-radius: 0.9375em; } .post_header, .post_summary h1 { font-family: "Arial Narrow"; font-weight: lighter; } .button, .post_summary a { font-size: 1.5em; display: inline-block; font-weight: bold; color: white; text-shadow: 0 0 3px rgba(0, 0, 0, 0.5); padding: 10px; border-radius: 5px; border: 1px solid #4c6812; text-decoration: none; } .primary_button, .post_summary a { background: -webkit-linear- gradient(top, #cdeb8e 0%, #a5c956 100%); } .primary_button:hover, .post_summary a:hover { background: -webkit-linear- gradient(top, #e0f3b9 0%, #bad57d 100%); } .primary_button:active, .post_summary a:active { background: -webkit-linear- gradient(top, #a5c956 0%, #cdeb8e 100%); } OO’S’CSS our processed CSS OOCSS class Semantic class OOCSS class
  82. .default_block, .post_summary { width: 40em; box-sizing: border-box; padding: 2em; margin:

    1em 0.625em 1em 0; box-shadow: 0 0 30px rgba(0, 0, 0, 0.5); } .default_border, .default_block, .post_summary { border: 2px solid rgba(0, 0, 0, 0.3); border-radius: 0.9375em; } .post_header, .post_summary h1 { font-family: "Arial Narrow"; font-weight: lighter; } .button, .post_summary a { font-size: 1.5em; display: inline-block; font-weight: bold; color: white; text-shadow: 0 0 3px rgba(0, 0, 0, 0.5); padding: 10px; border-radius: 5px; border: 1px solid #4c6812; text-decoration: none; } .primary_button, .post_summary a { background: -webkit-linear- gradient(top, #cdeb8e 0%, #a5c956 100%); } .primary_button:hover, .post_summary a:hover { background: -webkit-linear- gradient(top, #e0f3b9 0%, #bad57d 100%); } .primary_button:active, .post_summary a:active { background: -webkit-linear- gradient(top, #a5c956 0%, #cdeb8e 100%); } OO’S’CSS our processed CSS OOCSS class Semantic class OOCSS class Semantic class
  83. .default_block, .post_summary { width: 40em; box-sizing: border-box; padding: 2em; margin:

    1em 0.625em 1em 0; box-shadow: 0 0 30px rgba(0, 0, 0, 0.5); } .default_border, .default_block, .post_summary { border: 2px solid rgba(0, 0, 0, 0.3); border-radius: 0.9375em; } .post_header, .post_summary h1 { font-family: "Arial Narrow"; font-weight: lighter; } .button, .post_summary a { font-size: 1.5em; display: inline-block; font-weight: bold; color: white; text-shadow: 0 0 3px rgba(0, 0, 0, 0.5); padding: 10px; border-radius: 5px; border: 1px solid #4c6812; text-decoration: none; } .primary_button, .post_summary a { background: -webkit-linear- gradient(top, #cdeb8e 0%, #a5c956 100%); } .primary_button:hover, .post_summary a:hover { background: -webkit-linear- gradient(top, #e0f3b9 0%, #bad57d 100%); } .primary_button:active, .post_summary a:active { background: -webkit-linear- gradient(top, #a5c956 0%, #cdeb8e 100%); } OO’S’CSS our processed CSS OOCSS class Semantic class OOCSS class Semantic class OOCSS class
  84. .default_block, .post_summary { width: 40em; box-sizing: border-box; padding: 2em; margin:

    1em 0.625em 1em 0; box-shadow: 0 0 30px rgba(0, 0, 0, 0.5); } .default_border, .default_block, .post_summary { border: 2px solid rgba(0, 0, 0, 0.3); border-radius: 0.9375em; } .post_header, .post_summary h1 { font-family: "Arial Narrow"; font-weight: lighter; } .button, .post_summary a { font-size: 1.5em; display: inline-block; font-weight: bold; color: white; text-shadow: 0 0 3px rgba(0, 0, 0, 0.5); padding: 10px; border-radius: 5px; border: 1px solid #4c6812; text-decoration: none; } .primary_button, .post_summary a { background: -webkit-linear- gradient(top, #cdeb8e 0%, #a5c956 100%); } .primary_button:hover, .post_summary a:hover { background: -webkit-linear- gradient(top, #e0f3b9 0%, #bad57d 100%); } .primary_button:active, .post_summary a:active { background: -webkit-linear- gradient(top, #a5c956 0%, #cdeb8e 100%); } OO’S’CSS our processed CSS OOCSS class Semantic class OOCSS class Semantic class OOCSS class Semantic class
  85. .default_block, .post_summary { width: 40em; box-sizing: border-box; padding: 2em; margin:

    1em 0.625em 1em 0; box-shadow: 0 0 30px rgba(0, 0, 0, 0.5); } .default_border, .default_block, .post_summary { border: 2px solid rgba(0, 0, 0, 0.3); border-radius: 0.9375em; } .post_header, .post_summary h1 { font-family: "Arial Narrow"; font-weight: lighter; } .button, .post_summary a { font-size: 1.5em; display: inline-block; font-weight: bold; color: white; text-shadow: 0 0 3px rgba(0, 0, 0, 0.5); padding: 10px; border-radius: 5px; border: 1px solid #4c6812; text-decoration: none; } .primary_button, .post_summary a { background: -webkit-linear- gradient(top, #cdeb8e 0%, #a5c956 100%); } .primary_button:hover, .post_summary a:hover { background: -webkit-linear- gradient(top, #e0f3b9 0%, #bad57d 100%); } .primary_button:active, .post_summary a:active { background: -webkit-linear- gradient(top, #a5c956 0%, #cdeb8e 100%); } OO’S’CSS our processed CSS OOCSS class Semantic class OOCSS class Semantic class OOCSS class Semantic class
  86. #1 COMPLAINT all these classes, they exist even if I

    don’t use them ;(
  87. W/PLACEHOLDER CLASSES they don’t exist until you want them to

  88. %default_block width: 480 / 12 * 1em box-sizing: border-box padding:

    2em margin: 1em 10 / 16 * 1em 1em 0 box-shadow: 0 0 30px transparentize(black, 0.5) @extend %default_border %default_border border: 2px solid transparentize(black, 0.7) border-radius: 15 / 16 * 1em %post_header font-family: "Arial Narrow" font-weight: lighter %button font-size: 1.5em display: inline-block font-weight: bold color: white text-shadow: 0 0 3px transparentize(black, 0.5) padding: 10px border-radius: 5px border: 1px solid darken(#cdeb8e, 50%) text-decoration: none %primary_button background: -webkit-linear- gradient(top, #cdeb8e 0%, #a5c956 100%) &:hover background: -webkit-linear- gradient(top, lighten(#cdeb8e, 10%) 0%, lighten(#a5c956, 10%) 100%) &:active background: -webkit-linear- gradient(top, #a5c956 0%, #cdeb8e 100%) .post_summary @extend %default_block h1 @extend %post_header a @extend %button @extend %primary_button OO’S’CSS the way of the future!
  89. %default_block width: 480 / 12 * 1em box-sizing: border-box padding:

    2em margin: 1em 10 / 16 * 1em 1em 0 box-shadow: 0 0 30px transparentize(black, 0.5) @extend %default_border %default_border border: 2px solid transparentize(black, 0.7) border-radius: 15 / 16 * 1em %post_header font-family: "Arial Narrow" font-weight: lighter %button font-size: 1.5em display: inline-block font-weight: bold color: white text-shadow: 0 0 3px transparentize(black, 0.5) padding: 10px border-radius: 5px border: 1px solid darken(#cdeb8e, 50%) text-decoration: none %primary_button background: -webkit-linear- gradient(top, #cdeb8e 0%, #a5c956 100%) &:hover background: -webkit-linear- gradient(top, lighten(#cdeb8e, 10%) 0%, lighten(#a5c956, 10%) 100%) &:active background: -webkit-linear- gradient(top, #a5c956 0%, #cdeb8e 100%) .post_summary @extend %default_block h1 @extend %post_header a @extend %button @extend %primary_button OO’S’CSS the way of the future! % is all the magic
  90. %default_block width: 480 / 12 * 1em box-sizing: border-box padding:

    2em margin: 1em 10 / 16 * 1em 1em 0 box-shadow: 0 0 30px transparentize(black, 0.5) @extend %default_border %default_border border: 2px solid transparentize(black, 0.7) border-radius: 15 / 16 * 1em %post_header font-family: "Arial Narrow" font-weight: lighter %button font-size: 1.5em display: inline-block font-weight: bold color: white text-shadow: 0 0 3px transparentize(black, 0.5) padding: 10px border-radius: 5px border: 1px solid darken(#cdeb8e, 50%) text-decoration: none %primary_button background: -webkit-linear- gradient(top, #cdeb8e 0%, #a5c956 100%) &:hover background: -webkit-linear- gradient(top, lighten(#cdeb8e, 10%) 0%, lighten(#a5c956, 10%) 100%) &:active background: -webkit-linear- gradient(top, #a5c956 0%, #cdeb8e 100%) .post_summary @extend %default_block h1 @extend %post_header a @extend %button @extend %primary_button OO’S’CSS the way of the future! % is all the magic None of these ‘silent classes’ will be in the CSS
  91. %default_block width: 480 / 12 * 1em box-sizing: border-box padding:

    2em margin: 1em 10 / 16 * 1em 1em 0 box-shadow: 0 0 30px transparentize(black, 0.5) @extend %default_border %default_border border: 2px solid transparentize(black, 0.7) border-radius: 15 / 16 * 1em %post_header font-family: "Arial Narrow" font-weight: lighter %button font-size: 1.5em display: inline-block font-weight: bold color: white text-shadow: 0 0 3px transparentize(black, 0.5) padding: 10px border-radius: 5px border: 1px solid darken(#cdeb8e, 50%) text-decoration: none %primary_button background: -webkit-linear- gradient(top, #cdeb8e 0%, #a5c956 100%) &:hover background: -webkit-linear- gradient(top, lighten(#cdeb8e, 10%) 0%, lighten(#a5c956, 10%) 100%) &:active background: -webkit-linear- gradient(top, #a5c956 0%, #cdeb8e 100%) .post_summary @extend %default_block h1 @extend %post_header a @extend %button @extend %primary_button OO’S’CSS the way of the future! % is all the magic None of these ‘silent classes’ will be in the CSS We have combined all these ‘object’ classes into a nice module.
  92. .post_summary { width: 40em; box-sizing: border-box; padding: 2em; margin: 1em

    0.625em 1em 0; box-shadow: 0 0 30px rgba(0, 0, 0, 0.5); } .post_summary { border: 2px solid rgba(0, 0, 0, 0.3); border-radius: 0.9375em; } .post_summary h1 { font-family: "Arial Narrow"; font-weight: lighter; } .post_summary a { font-size: 1.5em; display: inline-block; font-weight: bold; color: white; text-shadow: 0 0 3px rgba(0, 0, 0, 0.5); padding: 10px; border-radius: 5px; border: 1px solid #4c6812; text-decoration: none; } .post_summary a { background: -webkit-linear- gradient(top, #cdeb8e 0%, #a5c956 100%); } .post_summary a:hover { background: -webkit-linear- gradient(top, #e0f3b9 0%, #bad57d 100%); } .post_summary a:active { background: -webkit-linear- gradient(top, #a5c956 0%, #cdeb8e 100%); } OO’S’CSS silent classes processed
  93. .post_summary { width: 40em; box-sizing: border-box; padding: 2em; margin: 1em

    0.625em 1em 0; box-shadow: 0 0 30px rgba(0, 0, 0, 0.5); } .post_summary { border: 2px solid rgba(0, 0, 0, 0.3); border-radius: 0.9375em; } .post_summary h1 { font-family: "Arial Narrow"; font-weight: lighter; } .post_summary a { font-size: 1.5em; display: inline-block; font-weight: bold; color: white; text-shadow: 0 0 3px rgba(0, 0, 0, 0.5); padding: 10px; border-radius: 5px; border: 1px solid #4c6812; text-decoration: none; } .post_summary a { background: -webkit-linear- gradient(top, #cdeb8e 0%, #a5c956 100%); } .post_summary a:hover { background: -webkit-linear- gradient(top, #e0f3b9 0%, #bad57d 100%); } .post_summary a:active { background: -webkit-linear- gradient(top, #a5c956 0%, #cdeb8e 100%); } OO’S’CSS silent classes processed looks much like the Mixin solution, but no styles will be duplicated
  94. .post_summary { width: 40em; box-sizing: border-box; padding: 2em; margin: 1em

    0.625em 1em 0; box-shadow: 0 0 30px rgba(0, 0, 0, 0.5); } .post_summary { border: 2px solid rgba(0, 0, 0, 0.3); border-radius: 0.9375em; } .post_summary h1 { font-family: "Arial Narrow"; font-weight: lighter; } .post_summary a { font-size: 1.5em; display: inline-block; font-weight: bold; color: white; text-shadow: 0 0 3px rgba(0, 0, 0, 0.5); padding: 10px; border-radius: 5px; border: 1px solid #4c6812; text-decoration: none; } .post_summary a { background: -webkit-linear- gradient(top, #cdeb8e 0%, #a5c956 100%); } .post_summary a:hover { background: -webkit-linear- gradient(top, #e0f3b9 0%, #bad57d 100%); } .post_summary a:active { background: -webkit-linear- gradient(top, #a5c956 0%, #cdeb8e 100%); } OO’S’CSS silent classes processed looks much like the Mixin solution, but no styles will be duplicated as styles are reused, they will be properly extended in the CSS
  95. .post_summary { width: 40em; box-sizing: border-box; padding: 2em; margin: 1em

    0.625em 1em 0; box-shadow: 0 0 30px rgba(0, 0, 0, 0.5); } .post_summary { border: 2px solid rgba(0, 0, 0, 0.3); border-radius: 0.9375em; } .post_summary h1 { font-family: "Arial Narrow"; font-weight: lighter; } .post_summary a { font-size: 1.5em; display: inline-block; font-weight: bold; color: white; text-shadow: 0 0 3px rgba(0, 0, 0, 0.5); padding: 10px; border-radius: 5px; border: 1px solid #4c6812; text-decoration: none; } .post_summary a { background: -webkit-linear- gradient(top, #cdeb8e 0%, #a5c956 100%); } .post_summary a:hover { background: -webkit-linear- gradient(top, #e0f3b9 0%, #bad57d 100%); } .post_summary a:active { background: -webkit-linear- gradient(top, #a5c956 0%, #cdeb8e 100%); } OO’S’CSS silent classes processed looks much like the Mixin solution, but no styles will be duplicated as styles are reused, they will be properly extended in the CSS no unsightly presentational classes created
  96. .post_summary { width: 40em; box-sizing: border-box; padding: 2em; margin: 1em

    0.625em 1em 0; box-shadow: 0 0 30px rgba(0, 0, 0, 0.5); } .post_summary { border: 2px solid rgba(0, 0, 0, 0.3); border-radius: 0.9375em; } .post_summary h1 { font-family: "Arial Narrow"; font-weight: lighter; } .post_summary a { font-size: 1.5em; display: inline-block; font-weight: bold; color: white; text-shadow: 0 0 3px rgba(0, 0, 0, 0.5); padding: 10px; border-radius: 5px; border: 1px solid #4c6812; text-decoration: none; } .post_summary a { background: -webkit-linear- gradient(top, #cdeb8e 0%, #a5c956 100%); } .post_summary a:hover { background: -webkit-linear- gradient(top, #e0f3b9 0%, #bad57d 100%); } .post_summary a:active { background: -webkit-linear- gradient(top, #a5c956 0%, #cdeb8e 100%); } OO’S’CSS silent classes processed looks much like the Mixin solution, but no styles will be duplicated as styles are reused, they will be properly extended in the CSS no unsightly presentational classes created elegant extendible solution from the CSS, not in the markup!
  97. .post_summary { @extend %default_block; h1 { @extend %post_header; } a

    { @extend %button; @extend %primary_button; } } .main_article { @extend %default_block; h3 { @extend %post_header; } } button { @extend %button; @extend %primary_button; } OO’S’CSS the robot will make us all happy!
  98. .post_summary { @extend %default_block; h1 { @extend %post_header; } a

    { @extend %button; @extend %primary_button; } } .main_article { @extend %default_block; h3 { @extend %post_header; } } button { @extend %button; @extend %primary_button; } OO’S’CSS the robot will make us all happy! THIS IS GREAT!
  99. .post_summary { @extend %default_block; h1 { @extend %post_header; } a

    { @extend %button; @extend %primary_button; } } .main_article { @extend %default_block; h3 { @extend %post_header; } } button { @extend %button; @extend %primary_button; } OO’S’CSS the robot will make us all happy! THIS IS GREAT! REALLY REUSING SOME CODE!
  100. .post_summary { @extend %default_block; h1 { @extend %post_header; } a

    { @extend %button; @extend %primary_button; } } .main_article { @extend %default_block; h3 { @extend %post_header; } } button { @extend %button; @extend %primary_button; } OO’S’CSS the robot will make us all happy! THIS IS GREAT! REALLY REUSING SOME CODE! OH MAN! THIS IS SOOOO DRY!
  101. .post_summary, .main_article { width: 40em; box-sizing: border-box; padding: 2em; margin:

    1em 0.625em 1em 0; box-shadow: 0 0 30px rgba(0, 0, 0, 0.5); } .post_summary, .main_article { border: 2px solid rgba(0, 0, 0, 0.3); border-radius: 0.9375em; } .post_summary h1, .main_article h1 { font-family: "Arial Narrow"; font-weight: lighter; } .post_summary a, .main_article a { font-size: 1.5em; display: inline-block; font-weight: bold; color: white; text-shadow: 0 0 3px rgba(0, 0, 0, 0.5); padding: 10px; border-radius: 5px; border: 1px solid #4c6812; text-decoration: none; } .post_summary a, .main_article a { background: -webkit-linear- gradient(top, #cdeb8e 0%, #a5c956 100%); } .post_summary a:hover, .main_article a:hover { background: -webkit-linear- gradient(top, #e0f3b9 0%, #bad57d 100%); } .post_summary a:active, .main_article a:active { background: -webkit-linear- gradient(top, #a5c956 0%, #cdeb8e 100%); } OO’S’CSS silent classes processed
  102. .post_summary, .main_article { width: 40em; box-sizing: border-box; padding: 2em; margin:

    1em 0.625em 1em 0; box-shadow: 0 0 30px rgba(0, 0, 0, 0.5); } .post_summary, .main_article { border: 2px solid rgba(0, 0, 0, 0.3); border-radius: 0.9375em; } .post_summary h1, .main_article h1 { font-family: "Arial Narrow"; font-weight: lighter; } .post_summary a, .main_article a { font-size: 1.5em; display: inline-block; font-weight: bold; color: white; text-shadow: 0 0 3px rgba(0, 0, 0, 0.5); padding: 10px; border-radius: 5px; border: 1px solid #4c6812; text-decoration: none; } .post_summary a, .main_article a { background: -webkit-linear- gradient(top, #cdeb8e 0%, #a5c956 100%); } .post_summary a:hover, .main_article a:hover { background: -webkit-linear- gradient(top, #e0f3b9 0%, #bad57d 100%); } .post_summary a:active, .main_article a:active { background: -webkit-linear- gradient(top, #a5c956 0%, #cdeb8e 100%); } OO’S’CSS silent classes processed REUSE w/o DUPLICATION!
  103. .post_summary, .main_article { width: 40em; box-sizing: border-box; padding: 2em; margin:

    1em 0.625em 1em 0; box-shadow: 0 0 30px rgba(0, 0, 0, 0.5); } .post_summary, .main_article { border: 2px solid rgba(0, 0, 0, 0.3); border-radius: 0.9375em; } .post_summary h1, .main_article h1 { font-family: "Arial Narrow"; font-weight: lighter; } .post_summary a, .main_article a { font-size: 1.5em; display: inline-block; font-weight: bold; color: white; text-shadow: 0 0 3px rgba(0, 0, 0, 0.5); padding: 10px; border-radius: 5px; border: 1px solid #4c6812; text-decoration: none; } .post_summary a, .main_article a { background: -webkit-linear- gradient(top, #cdeb8e 0%, #a5c956 100%); } .post_summary a:hover, .main_article a:hover { background: -webkit-linear- gradient(top, #e0f3b9 0%, #bad57d 100%); } .post_summary a:active, .main_article a:active { background: -webkit-linear- gradient(top, #a5c956 0%, #cdeb8e 100%); } OO’S’CSS silent classes processed REUSE w/o DUPLICATION! Freebird
  104. BEST PRACTICES the DOs and DON’Ts of silent placeholders

  105. BEST PRACTICES DON’T: Intermingle selector types .default_block width: 480 /

    12 * 1em box-sizing: border-box padding: 2em margin: 1em 10 / 16 * 1em 1em 0 box-shadow: 0 0 30px transparentize(black, 0.5) @extend %default_border %default_border border: 2px solid transparentize(black, 0.7) border-radius: 15 / 16 * 1em .post_header font-family: "Arial Narrow" font-weight: lighter %button font-size: 1.5em display: inline-block font-weight: bold color: white text-shadow: 0 0 3px transparentize(black, 0.5) padding: 10px border-radius: 5px border: 1px solid darken(#cdeb8e, 50%) text-decoration: none %primary_button background: -webkit-linear- gradient(top, #cdeb8e 0%, #a5c956 100%) &:hover background: -webkit-linear- gradient(top, lighten(#cdeb8e, 10%) 0%, lighten(#a5c956, 10%) 100%) &:active background: -webkit-linear- gradient(top, #a5c956 0%, #cdeb8e 100%)
  106. BEST PRACTICES DON’T: Intermingle selector types .default_block width: 480 /

    12 * 1em box-sizing: border-box padding: 2em margin: 1em 10 / 16 * 1em 1em 0 box-shadow: 0 0 30px transparentize(black, 0.5) @extend %default_border %default_border border: 2px solid transparentize(black, 0.7) border-radius: 15 / 16 * 1em .post_header font-family: "Arial Narrow" font-weight: lighter %button font-size: 1.5em display: inline-block font-weight: bold color: white text-shadow: 0 0 3px transparentize(black, 0.5) padding: 10px border-radius: 5px border: 1px solid darken(#cdeb8e, 50%) text-decoration: none %primary_button background: -webkit-linear- gradient(top, #cdeb8e 0%, #a5c956 100%) &:hover background: -webkit-linear- gradient(top, lighten(#cdeb8e, 10%) 0%, lighten(#a5c956, 10%) 100%) &:active background: -webkit-linear- gradient(top, #a5c956 0%, #cdeb8e 100%) Presentational
  107. BEST PRACTICES DON’T: Intermingle selector types .default_block width: 480 /

    12 * 1em box-sizing: border-box padding: 2em margin: 1em 10 / 16 * 1em 1em 0 box-shadow: 0 0 30px transparentize(black, 0.5) @extend %default_border %default_border border: 2px solid transparentize(black, 0.7) border-radius: 15 / 16 * 1em .post_header font-family: "Arial Narrow" font-weight: lighter %button font-size: 1.5em display: inline-block font-weight: bold color: white text-shadow: 0 0 3px transparentize(black, 0.5) padding: 10px border-radius: 5px border: 1px solid darken(#cdeb8e, 50%) text-decoration: none %primary_button background: -webkit-linear- gradient(top, #cdeb8e 0%, #a5c956 100%) &:hover background: -webkit-linear- gradient(top, lighten(#cdeb8e, 10%) 0%, lighten(#a5c956, 10%) 100%) &:active background: -webkit-linear- gradient(top, #a5c956 0%, #cdeb8e 100%) Presentational Functional
  108. BEST PRACTICES DON’T: Intermingle selector types .default_block width: 480 /

    12 * 1em box-sizing: border-box padding: 2em margin: 1em 10 / 16 * 1em 1em 0 box-shadow: 0 0 30px transparentize(black, 0.5) @extend %default_border %default_border border: 2px solid transparentize(black, 0.7) border-radius: 15 / 16 * 1em .post_header font-family: "Arial Narrow" font-weight: lighter %button font-size: 1.5em display: inline-block font-weight: bold color: white text-shadow: 0 0 3px transparentize(black, 0.5) padding: 10px border-radius: 5px border: 1px solid darken(#cdeb8e, 50%) text-decoration: none %primary_button background: -webkit-linear- gradient(top, #cdeb8e 0%, #a5c956 100%) &:hover background: -webkit-linear- gradient(top, lighten(#cdeb8e, 10%) 0%, lighten(#a5c956, 10%) 100%) &:active background: -webkit-linear- gradient(top, #a5c956 0%, #cdeb8e 100%) Presentational Functional
  109. BEST PRACTICES DON’T: Intermingle selector types .default_block width: 480 /

    12 * 1em box-sizing: border-box padding: 2em margin: 1em 10 / 16 * 1em 1em 0 box-shadow: 0 0 30px transparentize(black, 0.5) @extend %default_border %default_border border: 2px solid transparentize(black, 0.7) border-radius: 15 / 16 * 1em .post_header font-family: "Arial Narrow" font-weight: lighter %button font-size: 1.5em display: inline-block font-weight: bold color: white text-shadow: 0 0 3px transparentize(black, 0.5) padding: 10px border-radius: 5px border: 1px solid darken(#cdeb8e, 50%) text-decoration: none %primary_button background: -webkit-linear- gradient(top, #cdeb8e 0%, #a5c956 100%) &:hover background: -webkit-linear- gradient(top, lighten(#cdeb8e, 10%) 0%, lighten(#a5c956, 10%) 100%) &:active background: -webkit-linear- gradient(top, #a5c956 0%, #cdeb8e 100%) Presentational Functional * Reduces read-ability * Reduces find-ability * Reduces import-ability
  110. BEST PRACTICES DO: Keep a clean separation of concerns buttons/

    _mixins.scss _extends.scss _buttons.scss // Custom button extends and mixins // ----------------------------------- @import "buttons/mixins" @import "buttons/extends" // buttons // ----------------------------------- button, a.button, input[type=button], input[type=submit] +flat-default font-style: italic margin-right: 1em &:hover text-decoration: none &[disabled], &.disabled @extend %disabled-button &:hover @extend %disabled-button @media #{$mobile} margin-right: 0
  111. BEST PRACTICES DO: Keep a clean separation of concerns buttons/

    _mixins.scss _extends.scss _buttons.scss // Custom button extends and mixins // ----------------------------------- @import "buttons/mixins" @import "buttons/extends" // buttons // ----------------------------------- button, a.button, input[type=button], input[type=submit] +flat-default font-style: italic margin-right: 1em &:hover text-decoration: none &[disabled], &.disabled @extend %disabled-button &:hover @extend %disabled-button @media #{$mobile} margin-right: 0 Presentational
  112. BEST PRACTICES DO: Keep a clean separation of concerns buttons/

    _mixins.scss _extends.scss _buttons.scss // Custom button extends and mixins // ----------------------------------- @import "buttons/mixins" @import "buttons/extends" // buttons // ----------------------------------- button, a.button, input[type=button], input[type=submit] +flat-default font-style: italic margin-right: 1em &:hover text-decoration: none &[disabled], &.disabled @extend %disabled-button &:hover @extend %disabled-button @media #{$mobile} margin-right: 0 Presentational Functional
  113. BEST PRACTICES DO: Keep a clean separation of concerns buttons/

    _mixins.scss _extends.scss _buttons.scss // Custom button extends and mixins // ----------------------------------- @import "buttons/mixins" @import "buttons/extends" // buttons // ----------------------------------- button, a.button, input[type=button], input[type=submit] +flat-default font-style: italic margin-right: 1em &:hover text-decoration: none &[disabled], &.disabled @extend %disabled-button &:hover @extend %disabled-button @media #{$mobile} margin-right: 0 Presentational Functional
  114. BEST PRACTICES DON’T: Extend Native HTML Selectors .banner-header ! ...

    h1, h2, h3 @extend h1 .episode-header !... h1 color: $white margin: 0 line-height: 1em float: left
  115. BEST PRACTICES DON’T: Extend Native HTML Selectors .banner-header ! ...

    h1, h2, h3 @extend h1 .episode-header !... h1 color: $white margin: 0 line-height: 1em float: left @extend works by inserting the extending selector (e.g. h1) anywhere in the stylesheet that the extended selector (.e.g h1) appears. Later on, when you want to edit the style of the `h1`, Sass will loop through all the possible `h1` combinations.
  116. BEST PRACTICES DON’T: Extend Native HTML Selectors .episode-header h1, .season-header

    h1, .episode-header .banner- header h1, .banner-header .episode-header h1, .season- header .banner-header h1, .banner-header .season-header h1, .episode-header .banner-header h2, .banner-header .episode- header h2, .season-header .banner-header h2, .banner- header .season-header h2, .episode-header .banner-header h3, .banner-header .episode-header h3, .season-header .banner- header h3, .banner-header .season-header h3, .episode- header .banner-header .cart-total-container .cart-total span, .banner-header .cart-total-container .cart-total .episode- header span, .season-header .banner-header .cart-total- container .cart-total span, .banner-header .cart-total- container .cart-total .season-header span, .episode-header .cart- total-container .cart-total .banner-header span, .cart-total- container .cart-total .banner-header .episode-header span, .season-header .cart-total-container .cart-total .banner- header span, .cart-total-container .cart-total .banner- header .season-header span, .episode-header .banner-header .order- total-container .cart-total span, .banner-header .order-total- container .cart-total .episode-header span, .season- header .banner-header .order-total-container .cart-total span, .banner-header .order-total-container .cart-total .season- header span, .episode-header .order-total-container .cart- total .banner-header span, .order-total-container .cart- total .banner-header .episode-header span, .season-header .order- total-container .cart-total .banner-header span, .order-total- container .cart-total .banner-header .season-header span, .episode-header .purchase-item-container .price, .purchase- item-container .episode-header .price, .season-header .purchase- item-container .price, .purchase-item-container .season- header .price, .episode-header .call-to-action .tel, .call-to- action .episode-header .tel, .season-header .call-to- action .tel, .call-to-action .season-header .tel { color: white; margin: 0; line-height: 1em; float: left; } .banner-header ! ... h1, h2, h3 @extend h1 .episode-header !... h1 color: $white margin: 0 line-height: 1em float: left
  117. BEST PRACTICES DON’T: Extend Native HTML Selectors .episode-header h1, .season-header

    h1, .episode-header .banner- header h1, .banner-header .episode-header h1, .season- header .banner-header h1, .banner-header .season-header h1, .episode-header .banner-header h2, .banner-header .episode- header h2, .season-header .banner-header h2, .banner- header .season-header h2, .episode-header .banner-header h3, .banner-header .episode-header h3, .season-header .banner- header h3, .banner-header .season-header h3, .episode- header .banner-header .cart-total-container .cart-total span, .banner-header .cart-total-container .cart-total .episode- header span, .season-header .banner-header .cart-total- container .cart-total span, .banner-header .cart-total- container .cart-total .season-header span, .episode-header .cart- total-container .cart-total .banner-header span, .cart-total- container .cart-total .banner-header .episode-header span, .season-header .cart-total-container .cart-total .banner- header span, .cart-total-container .cart-total .banner- header .season-header span, .episode-header .banner-header .order- total-container .cart-total span, .banner-header .order-total- container .cart-total .episode-header span, .season- header .banner-header .order-total-container .cart-total span, .banner-header .order-total-container .cart-total .season- header span, .episode-header .order-total-container .cart- total .banner-header span, .order-total-container .cart- total .banner-header .episode-header span, .season-header .order- total-container .cart-total .banner-header span, .order-total- container .cart-total .banner-header .season-header span, .episode-header .purchase-item-container .price, .purchase- item-container .episode-header .price, .season-header .purchase- item-container .price, .purchase-item-container .season- header .price, .episode-header .call-to-action .tel, .call-to- action .episode-header .tel, .season-header .call-to- action .tel, .call-to-action .season-header .tel { color: white; margin: 0; line-height: 1em; float: left; } .banner-header ! ... h1, h2, h3 @extend h1 .episode-header !... h1 color: $white margin: 0 line-height: 1em float: left
  118. BEST PRACTICES DO: Extend Silent Placeholders .banner-header ! ... h1,

    h2, h3 @extend %headings_1 @extend %upcase_heading .episode-header ! ... h1 color: $white margin: 0 line-height: 1em float: left Replacing the native selector with placeholder selectors, we will eliminate the unnecessary Sass loop
  119. BEST PRACTICES DO: Extend Silent Placeholders .episode-header h1, .season-header h1,

    .episode-header .purchase-item- container .price, .purchase-item- container .episode- header .price, .season- header .purchase-item- container .price, .purchase-item- container .season- header .price, .episode- header .call-to-action .tel, .call- to-action .episode- header .tel, .season-header .call- to-action .tel, .call-to- action .season-header .tel { color: white; margin: 0; line-height: 1em; float: left; } .banner-header ! ... h1, h2, h3 @extend %headings_1 @extend %upcase_heading .episode-header ! ... h1 color: $white margin: 0 line-height: 1em float: left
  120. BEST PRACTICES DO: Extend Silent Placeholders .episode-header h1, .season-header h1,

    .episode-header .purchase-item- container .price, .purchase-item- container .episode- header .price, .season- header .purchase-item- container .price, .purchase-item- container .season- header .price, .episode- header .call-to-action .tel, .call- to-action .episode- header .tel, .season-header .call- to-action .tel, .call-to- action .season-header .tel { color: white; margin: 0; line-height: 1em; float: left; } .banner-header ! ... h1, h2, h3 @extend %headings_1 @extend %upcase_heading .episode-header ! ... h1 color: $white margin: 0 line-height: 1em float: left
  121. ADVANCED this is almost meta programming man!

  122. ADVANCED PLACEHOLDERS functions, mixins and placeholders ... oh my! @function

    gcd($n, $d) $num: if($n < $d, $d, $n) $denom: if($n < $d, $n, $d) $rem: $num $last_rem: $num @while $rem != 0 $last_rem: $rem $rem: $denom % $num $denom: $num $num: $rem @return $last_rem =grid-setup($ns: grid, $grid_columns: 24) $ns: if($ns == "", $ns, "#{$ns}-") @for $d from 1 through $grid_columns @for $n from 1 through $d $gcd: gcd($n, $d) $x: $n / $gcd %#{$ns}#{$n}of#{$d} @if $x < $n @extend %#{$ns}#{$x}of#{$d / $gcd} @else width: $n / $d * 100% +grid-setup .foo @extend %grid-5of5 .bar @extend %grid-1of8 .baz @extend %grid-2of9 .crypto @extend %grid-2of9 ! ! ! ! .foo { ! ! ! ! width: 100%; ! ! ! ! } ! ! ! ! ! ! ! ! .bar { ! ! ! ! width: 12.5%; ! ! ! ! } ! ! ! ! ! ! ! ! .baz, .crypto { ! ! ! ! width: 22.22222%; ! ! ! ! }
  123. ADVANCED PLACEHOLDERS functions, mixins and placeholders ... oh my! @function

    gcd($n, $d) $num: if($n < $d, $d, $n) $denom: if($n < $d, $n, $d) $rem: $num $last_rem: $num @while $rem != 0 $last_rem: $rem $rem: $denom % $num $denom: $num $num: $rem @return $last_rem =grid-setup($ns: grid, $grid_columns: 24) $ns: if($ns == "", $ns, "#{$ns}-") @for $d from 1 through $grid_columns @for $n from 1 through $d $gcd: gcd($n, $d) $x: $n / $gcd %#{$ns}#{$n}of#{$d} @if $x < $n @extend %#{$ns}#{$x}of#{$d / $gcd} @else width: $n / $d * 100% +grid-setup .foo @extend %grid-5of5 .bar @extend %grid-1of8 .baz @extend %grid-2of9 .crypto @extend %grid-2of9 ! ! ! ! .foo { ! ! ! ! width: 100%; ! ! ! ! } ! ! ! ! ! ! ! ! .bar { ! ! ! ! width: 12.5%; ! ! ! ! } ! ! ! ! ! ! ! ! .baz, .crypto { ! ! ! ! width: 22.22222%; ! ! ! ! } Function to loop through column variable.
  124. ADVANCED PLACEHOLDERS functions, mixins and placeholders ... oh my! @function

    gcd($n, $d) $num: if($n < $d, $d, $n) $denom: if($n < $d, $n, $d) $rem: $num $last_rem: $num @while $rem != 0 $last_rem: $rem $rem: $denom % $num $denom: $num $num: $rem @return $last_rem =grid-setup($ns: grid, $grid_columns: 24) $ns: if($ns == "", $ns, "#{$ns}-") @for $d from 1 through $grid_columns @for $n from 1 through $d $gcd: gcd($n, $d) $x: $n / $gcd %#{$ns}#{$n}of#{$d} @if $x < $n @extend %#{$ns}#{$x}of#{$d / $gcd} @else width: $n / $d * 100% +grid-setup .foo @extend %grid-5of5 .bar @extend %grid-1of8 .baz @extend %grid-2of9 .crypto @extend %grid-2of9 ! ! ! ! .foo { ! ! ! ! width: 100%; ! ! ! ! } ! ! ! ! ! ! ! ! .bar { ! ! ! ! width: 12.5%; ! ! ! ! } ! ! ! ! ! ! ! ! .baz, .crypto { ! ! ! ! width: 22.22222%; ! ! ! ! } Function to loop through column variable. Returned value used as variable in mixin.
  125. ADVANCED PLACEHOLDERS functions, mixins and placeholders ... oh my! @function

    gcd($n, $d) $num: if($n < $d, $d, $n) $denom: if($n < $d, $n, $d) $rem: $num $last_rem: $num @while $rem != 0 $last_rem: $rem $rem: $denom % $num $denom: $num $num: $rem @return $last_rem =grid-setup($ns: grid, $grid_columns: 24) $ns: if($ns == "", $ns, "#{$ns}-") @for $d from 1 through $grid_columns @for $n from 1 through $d $gcd: gcd($n, $d) $x: $n / $gcd %#{$ns}#{$n}of#{$d} @if $x < $n @extend %#{$ns}#{$x}of#{$d / $gcd} @else width: $n / $d * 100% +grid-setup .foo @extend %grid-5of5 .bar @extend %grid-1of8 .baz @extend %grid-2of9 .crypto @extend %grid-2of9 ! ! ! ! .foo { ! ! ! ! width: 100%; ! ! ! ! } ! ! ! ! ! ! ! ! .bar { ! ! ! ! width: 12.5%; ! ! ! ! } ! ! ! ! ! ! ! ! .baz, .crypto { ! ! ! ! width: 22.22222%; ! ! ! ! } Function to loop through column variable. Returned value used as variable in mixin. Primary placeholder selector
  126. ADVANCED PLACEHOLDERS functions, mixins and placeholders ... oh my! @function

    gcd($n, $d) $num: if($n < $d, $d, $n) $denom: if($n < $d, $n, $d) $rem: $num $last_rem: $num @while $rem != 0 $last_rem: $rem $rem: $denom % $num $denom: $num $num: $rem @return $last_rem =grid-setup($ns: grid, $grid_columns: 24) $ns: if($ns == "", $ns, "#{$ns}-") @for $d from 1 through $grid_columns @for $n from 1 through $d $gcd: gcd($n, $d) $x: $n / $gcd %#{$ns}#{$n}of#{$d} @if $x < $n @extend %#{$ns}#{$x}of#{$d / $gcd} @else width: $n / $d * 100% +grid-setup .foo @extend %grid-5of5 .bar @extend %grid-1of8 .baz @extend %grid-2of9 .crypto @extend %grid-2of9 ! ! ! ! .foo { ! ! ! ! width: 100%; ! ! ! ! } ! ! ! ! ! ! ! ! .bar { ! ! ! ! width: 12.5%; ! ! ! ! } ! ! ! ! ! ! ! ! .baz, .crypto { ! ! ! ! width: 22.22222%; ! ! ! ! } Function to loop through column variable. Returned value used as variable in mixin. Primary placeholder selector Extended placeholder selector
  127. ADVANCED PLACEHOLDERS functions, mixins and placeholders ... oh my! @function

    gcd($n, $d) $num: if($n < $d, $d, $n) $denom: if($n < $d, $n, $d) $rem: $num $last_rem: $num @while $rem != 0 $last_rem: $rem $rem: $denom % $num $denom: $num $num: $rem @return $last_rem =grid-setup($ns: grid, $grid_columns: 24) $ns: if($ns == "", $ns, "#{$ns}-") @for $d from 1 through $grid_columns @for $n from 1 through $d $gcd: gcd($n, $d) $x: $n / $gcd %#{$ns}#{$n}of#{$d} @if $x < $n @extend %#{$ns}#{$x}of#{$d / $gcd} @else width: $n / $d * 100% +grid-setup .foo @extend %grid-5of5 .bar @extend %grid-1of8 .baz @extend %grid-2of9 .crypto @extend %grid-2of9 ! ! ! ! .foo { ! ! ! ! width: 100%; ! ! ! ! } ! ! ! ! ! ! ! ! .bar { ! ! ! ! width: 12.5%; ! ! ! ! } ! ! ! ! ! ! ! ! .baz, .crypto { ! ! ! ! width: 22.22222%; ! ! ! ! } Function to loop through column variable. Returned value used as variable in mixin. Primary placeholder selector Extended placeholder selector Include the mixin
  128. ADVANCED PLACEHOLDERS functions, mixins and placeholders ... oh my! @function

    gcd($n, $d) $num: if($n < $d, $d, $n) $denom: if($n < $d, $n, $d) $rem: $num $last_rem: $num @while $rem != 0 $last_rem: $rem $rem: $denom % $num $denom: $num $num: $rem @return $last_rem =grid-setup($ns: grid, $grid_columns: 24) $ns: if($ns == "", $ns, "#{$ns}-") @for $d from 1 through $grid_columns @for $n from 1 through $d $gcd: gcd($n, $d) $x: $n / $gcd %#{$ns}#{$n}of#{$d} @if $x < $n @extend %#{$ns}#{$x}of#{$d / $gcd} @else width: $n / $d * 100% +grid-setup .foo @extend %grid-5of5 .bar @extend %grid-1of8 .baz @extend %grid-2of9 .crypto @extend %grid-2of9 ! ! ! ! .foo { ! ! ! ! width: 100%; ! ! ! ! } ! ! ! ! ! ! ! ! .bar { ! ! ! ! width: 12.5%; ! ! ! ! } ! ! ! ! ! ! ! ! .baz, .crypto { ! ! ! ! width: 22.22222%; ! ! ! ! } Function to loop through column variable. Returned value used as variable in mixin. Primary placeholder selector Extended placeholder selector Include the mixin Create semantic selectors that extend on variations created from the mixin
  129. ADVANCED PLACEHOLDERS functions, mixins and placeholders ... oh my! @function

    gcd($n, $d) $num: if($n < $d, $d, $n) $denom: if($n < $d, $n, $d) $rem: $num $last_rem: $num @while $rem != 0 $last_rem: $rem $rem: $denom % $num $denom: $num $num: $rem @return $last_rem =grid-setup($ns: grid, $grid_columns: 24) $ns: if($ns == "", $ns, "#{$ns}-") @for $d from 1 through $grid_columns @for $n from 1 through $d $gcd: gcd($n, $d) $x: $n / $gcd %#{$ns}#{$n}of#{$d} @if $x < $n @extend %#{$ns}#{$x}of#{$d / $gcd} @else width: $n / $d * 100% +grid-setup .foo @extend %grid-5of5 .bar @extend %grid-1of8 .baz @extend %grid-2of9 .crypto @extend %grid-2of9 ! ! ! ! .foo { ! ! ! ! width: 100%; ! ! ! ! } ! ! ! ! ! ! ! ! .bar { ! ! ! ! width: 12.5%; ! ! ! ! } ! ! ! ! ! ! ! ! .baz, .crypto { ! ! ! ! width: 22.22222%; ! ! ! ! } Function to loop through column variable. Returned value used as variable in mixin. Primary placeholder selector Extended placeholder selector Include the mixin Create semantic selectors that extend on variations created from the mixin PROFIT!
  130. ADVANCED PLACEHOLDERS functions, mixins and placeholders ... oh my! @function

    gcd($n, $d) $num: if($n < $d, $d, $n) $denom: if($n < $d, $n, $d) $rem: $num $last_rem: $num @while $rem != 0 $last_rem: $rem $rem: $denom % $num $denom: $num $num: $rem @return $last_rem =grid-setup($ns: grid, $grid_columns: 24) $ns: if($ns == "", $ns, "#{$ns}-") @for $d from 1 through $grid_columns @for $n from 1 through $d $gcd: gcd($n, $d) $x: $n / $gcd %#{$ns}#{$n}of#{$d} @if $x < $n @extend %#{$ns}#{$x}of#{$d / $gcd} @else width: $n / $d * 100% +grid-setup .foo @extend %grid-5of5 .bar @extend %grid-1of8 .baz @extend %grid-2of9 .crypto @extend %grid-2of9 ! ! ! ! .foo { ! ! ! ! width: 100%; ! ! ! ! } ! ! ! ! ! ! ! ! .bar { ! ! ! ! width: 12.5%; ! ! ! ! } ! ! ! ! ! ! ! ! .baz, .crypto { ! ! ! ! width: 22.22222%; ! ! ! ! } Function to loop through column variable. Returned value used as variable in mixin. Primary placeholder selector Extended placeholder selector Include the mixin Create semantic selectors that extend on variations created from the mixin PROFIT! I’m Lu Nelson, I inspired this code!
  131. ADVANCED PLACEHOLDERS functions, mixins and placeholders ... oh my! @function

    gcd($n, $d) $num: if($n < $d, $d, $n) $denom: if($n < $d, $n, $d) $rem: $num $last_rem: $num @while $rem != 0 $last_rem: $rem $rem: $denom % $num $denom: $num $num: $rem @return $last_rem =grid-setup($ns: grid, $grid_columns: 24) $ns: if($ns == "", $ns, "#{$ns}-") @for $d from 1 through $grid_columns @for $n from 1 through $d $gcd: gcd($n, $d) $x: $n / $gcd %#{$ns}#{$n}of#{$d} @if $x < $n @extend %#{$ns}#{$x}of#{$d / $gcd} @else width: $n / $d * 100% +grid-setup .foo @extend %grid-5of5 .bar @extend %grid-1of8 .baz @extend %grid-2of9 .crypto @extend %grid-2of9 ! ! ! ! .foo { ! ! ! ! width: 100%; ! ! ! ! } ! ! ! ! ! ! ! ! .bar { ! ! ! ! width: 12.5%; ! ! ! ! } ! ! ! ! ! ! ! ! .baz, .crypto { ! ! ! ! width: 22.22222%; ! ! ! ! } Function to loop through column variable. Returned value used as variable in mixin. Primary placeholder selector Extended placeholder selector Include the mixin Create semantic selectors that extend on variations created from the mixin PROFIT! I’m Lu Nelson, I inspired this code! https:// github.com/ lunelson
  132. SUMMARY what have we learned?

  133. SUMMARY what have we learned? OOCSS UI frameworks can add

    some serious CSS bloat
  134. SUMMARY what have we learned? OOCSS UI frameworks can add

    some serious CSS bloat Managing presentational CSS extending in the DOM has it’s issues
  135. SUMMARY what have we learned? OOCSS UI frameworks can add

    some serious CSS bloat Managing presentational CSS extending in the DOM has it’s issues Extending classes with 4914 lines of presentational CSS makes my brain hurt A LOT!
  136. SUMMARY what have we learned? OOCSS UI frameworks can add

    some serious CSS bloat Managing presentational CSS extending in the DOM has it’s issues Extending classes with 4914 lines of presentational CSS makes my brain hurt A LOT! OO’S’CSS using a CSS processor will change your life!
  137. SUMMARY what have we learned? OOCSS UI frameworks can add

    some serious CSS bloat Managing presentational CSS extending in the DOM has it’s issues Extending classes with 4914 lines of presentational CSS makes my brain hurt A LOT! OO’S’CSS using a CSS processor will change your life! @mixin was a great start, but we can do it better.
  138. SUMMARY what have we learned? OOCSS UI frameworks can add

    some serious CSS bloat Managing presentational CSS extending in the DOM has it’s issues Extending classes with 4914 lines of presentational CSS makes my brain hurt A LOT! OO’S’CSS using a CSS processor will change your life! @mixin was a great start, but we can do it better. @extend is awesome, but we can do it better.
  139. SUMMARY what have we learned? OOCSS UI frameworks can add

    some serious CSS bloat Managing presentational CSS extending in the DOM has it’s issues Extending classes with 4914 lines of presentational CSS makes my brain hurt A LOT! OO’S’CSS using a CSS processor will change your life! @mixin was a great start, but we can do it better. @extend is awesome, but we can do it better. Take everything you know AND SET IT ON FIRE!
  140. SUMMARY what have we learned? OOCSS UI frameworks can add

    some serious CSS bloat Managing presentational CSS extending in the DOM has it’s issues Extending classes with 4914 lines of presentational CSS makes my brain hurt A LOT! OO’S’CSS using a CSS processor will change your life! @mixin was a great start, but we can do it better. @extend is awesome, but we can do it better. Take everything you know AND SET IT ON FIRE! %foo
  141. QUESTIONS? you, in the front ...