Upgrade to PRO for Only $50/Year—Limited-Time Offer! 🔥

Sass 3.2: Silent Classes

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

Dale Sande

June 20, 2012
Tweet

More Decks by Dale Sande

Other Decks in Design

Transcript

  1. 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
  2. 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
  3. 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!
  4. 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.
  5. 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.
  6. 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.
  7. 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.
  8. 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; }
  9. 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
  10. } .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); }
  11. } .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!
  12. } .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.
  13. } .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
  14. } .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
  15. } .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
  16. 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>
  17. 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
  18. 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
  19. 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
  20. 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
  21. 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
  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> Markup with ‘object’ classes here here here here here
  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 here here here here here here
  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 here here here here here & here
  25. 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;
  26. 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.
  27. 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.
  28. PRESENTATIONAL V SEMANTIC looks good and have meaning too CSS

    needs to convey design! CSS needs to have semantic meaning!
  29. 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!
  30. <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
  31. <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
  32. <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
  33. <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
  34. <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
  35. <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
  36. <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
  37. .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
  38. .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!
  39. .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
  40. .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
  41. <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
  42. <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.
  43. <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
  44. <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!
  45. =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 ...
  46. =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.
  47. =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.
  48. =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.
  49. .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
  50. .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?
  51. .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
  52. .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
  53. .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!
  54. .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!
  55. .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!
  56. .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
  57. .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
  58. .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
  59. .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
  60. .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
  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 @extend .default_block h1 @extend .post_header a @extend .button @extend .primary_button OO’S’CSS @extend is pretty awesome ...
  62. .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 ...
  63. .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 ...
  64. .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?
  65. .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
  66. .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
  67. .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
  68. .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
  69. .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
  70. .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
  71. .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
  72. .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
  73. %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!
  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 the way of the future! % is all the magic
  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 the way of the future! % is all the magic None of these ‘silent classes’ will be in the CSS
  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 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.
  77. .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
  78. .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
  79. .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
  80. .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
  81. .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!
  82. .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!
  83. .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!
  84. .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!
  85. .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!
  86. .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
  87. .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!
  88. .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
  89. 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%)
  90. 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
  91. 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
  92. 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
  93. 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
  94. 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
  95. 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
  96. 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
  97. 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
  98. 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
  99. 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.
  100. 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
  101. 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
  102. 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
  103. 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
  104. 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
  105. 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%; ! ! ! ! }
  106. 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.
  107. 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.
  108. 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
  109. 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
  110. 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
  111. 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
  112. 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!
  113. 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!
  114. 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
  115. 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
  116. 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!
  117. 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!
  118. 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.
  119. 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.
  120. 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!
  121. 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