Building a CSS Foundation

Building a CSS Foundation

Code duplication, bloat and specificity battles are very common problems when sites grow, and they can spell disaster for site performance. In this session we will cover code organization and naming conventions to help your site grow. Attendees will learn how to build sites with the most reusable CSS possible.

E4df4a30f000a225df7114e4940944e7?s=128

jakefolio

March 01, 2013
Tweet

Transcript

  1. 4.
  2. 8.
  3. 10.

    /** * You wouldn't do this */ div { color:

    #ccc; padding: 1em 2em; }
  4. 11.

    /** * You wouldn't do this */ div { color:

    #ccc; padding: 1em 2em; } /** * So why would you do this */ header { color: #ccc; padding: 1em 2em; }
  5. 12.

    /** * Better solutions */ #header {} .header {} body

    > header {} /** * You wouldn't do this */ div { color: #ccc; padding: 1em 2em; } /** * So why would you do this */ header { color: #ccc; padding: 1em 2em; }
  6. 14.

    /** * Well... */ #header ul { color: #ccc; padding:

    1em 2em; } /** * What?? */ #sidebar div { border-bottom: 1px; }
  7. 15.

    /** * WAT */ .content p { font-size: 14px; }

    /** * Well... */ #header ul { color: #ccc; padding: 1em 2em; } /** * What?? */ #sidebar div { border-bottom: 1px; }
  8. 21.

    #sidebar div {} h2 span {} header ul {} GUESS

    THAT ELEMENT! .promo-box {} .nav-main {}
  9. 22.

    #sidebar div {} h2 span {} header ul {} GUESS

    THAT ELEMENT! .promo-box {} .nav-main {} .tagline {}
  10. 33.

    .media { display: block; @extend .cf; } .media-img { float:

    left; margin-right: $base-spacing-unit; } /** * Reversed image location (right instead of left). */ .media-img--rev { float: right; margin-left: $base-spacing-unit; } .media-img img, .media-img--rev img { display: block; } .media-body { overflow: hidden; } .media .media--rev https://github.com/csswizardry/inuit.css/blob/master/inuit.css/objects/_media.scss
  11. 34.
  12. 37.

    /** * Base Button Object * @tags ^button * @format

    * <a href="#" class="btn">Register</a> * <button class="btn">Register</button> * <input type="submit" class="btn" value="Register"> */ .btn { border: none; display: inline-block; margin: 0; padding: 0.5em; cursor: pointer; font: inherit; line-height: 1; } .btn, .btn:hover { text-decoration: none; }
  13. 39.

    /** * Button Sizes * @tags ^button * @extends btn

    */ .btn-small { font-size: 1.25em; } .btn-medium { font-size: 1.5em; } .btn-large { font-size: 2em; } .btn-xlarge { font-size: 2.5em; } /** * Primary Button Style * @tags ^button * @extends btn */ .btn-primary { box-shadow: 3px 3px 0 rgba(0,0,0,0.25); background: #403731; color: #fff; font-family: $fontButtonFamily; font-weight: 300; letter-spacing: 1px; text-transform: uppercase; -webkit-transition: box-shadow 0.5s; transition: box-shadow 0.5s; } .btn-primary:hover { box-shadow: 1px 1px 0 rgba(0,0,0,0.25); }
  14. 40.

    <div class="container"> <p><input class="btn btn-large" type="submit" value="Subscribe"></p> <p><a href="#" class="btn

    btn-large">Subscribe</a></p> <p><button class="btn btn-large" type="submit">Subscribe</button></p> </div> HTML Structure Change the Size
  15. 41.

    <div class="container"> <p><input class="btn btn-large btn-primary" type="submit" value="Subscribe"></p> <p><a href="#"

    class="btn btn-large btn-primary">Subscribe</a></p> <p><button class="btn btn-large btn-primary" type="submit">Subscribe</button></p> </div> HTML Structure Add Styling
  16. 47.

    /* ============================================================ Media Object (OOCSS) ============================================================ */ .media { *zoom:

    1; } .media > .media-image { display: block; float: left; margin-right: 10px; } .l-grid .media-image { float: none; margin: 0; } .media > .media-body { color: #ccc; font-size: 0.8em; padding: 5px 10px; }
  17. 48.

    /* ============================================================ Media List ============================================================ */ /** * List of

    media objects * @tags ^list ^media */ .media-list { margin-left: 0; list-style: none; } .media-list > .media-item, .media-list > li { clear: both; display: block; margin: 0.75em 0; background: #fff; } .l-grid .media-item, .l-grid li { box-shadow: 0 0 5px rgba(0, 0, 0, 0.6); border: 3px solid #fff; display: inline-block; margin: 0.75em; } /** * Featured Articles Media List * @tags ^list ^media * @extends media-list */ .media-featured-list > .media-item, .media-featured-list > li { width: 150px; }
  18. 49.

    <div class="l-grid"> <div class="media-list media-featured-list"> <div class="media media-item"> <img src="images/demo/feature1.jpg"

    class="media-image"> <section class="media-body"> <h3 class="subline">Travel</h3> </section> </div> </div> </div> <div class="l-grid"> <ul class="media-list"> <li class="media"> <img src="images/demo/profile1.jpg" class="media-image"> </li> </ul> </div> DIV Example LI Example
  19. 55.
  20. 59.

    .btn-small { font-size: 1.25em; } .btn-primary { box-shadow: 3px 3px

    0 rgba(0,0,0,0.25); background: #403731; color: #fff; font-family: $fontButtonFamily; font-weight: 300; letter-spacing: 1px; text-transform: uppercase; } code, kbd, pre, samp { font-family: monospace, serif; font-size: 1em; }
  21. 60.

    .btn-small { font-size: 1.25em; } .btn-primary { box-shadow: 3px 3px

    0 rgba(0,0,0,0.25); background: #403731; color: #fff; font-family: $fontButtonFamily; font-weight: 300; letter-spacing: 1px; text-transform: uppercase; } code, kbd, pre, samp { font-family: monospace, serif; font-size: 1em; } hyphen separated class names
  22. 61.

    .btn-small { font-size: 1.25em; } .btn-primary { box-shadow: 3px 3px

    0 rgba(0,0,0,0.25); background: #403731; color: #fff; font-family: $fontButtonFamily; font-weight: 300; letter-spacing: 1px; text-transform: uppercase; } code, kbd, pre, samp { font-family: monospace, serif; font-size: 1em; } hyphen separated class names space between property and value
  23. 62.

    .btn-small { font-size: 1.25em; } .btn-primary { box-shadow: 3px 3px

    0 rgba(0,0,0,0.25); background: #403731; color: #fff; font-family: $fontButtonFamily; font-weight: 300; letter-spacing: 1px; text-transform: uppercase; } code, kbd, pre, samp { font-family: monospace, serif; font-size: 1em; } hyphen separated class names space between property and value inline only allowed when one property is present
  24. 63.

    .btn-small { font-size: 1.25em; } .btn-primary { box-shadow: 3px 3px

    0 rgba(0,0,0,0.25); background: #403731; color: #fff; font-family: $fontButtonFamily; font-weight: 300; letter-spacing: 1px; text-transform: uppercase; } code, kbd, pre, samp { font-family: monospace, serif; font-size: 1em; } hyphen separated class names space between property and value one selector per line inline only allowed when one property is present
  25. 65.

    .selector { /* Positioning */ position: absolute; z-index: 10; top:

    0; left: 0; /* Display & Box Model */ display: inline-block; overflow: hidden; box-sizing: border-box; width: 100px; height: 100px; padding: 10px; margin: 10px; /* Other (styling and typography) */ background: #000; color: #fff; font-family: sans-serif; font-size: 16px; text-align: right; /* CSS Preprocessor mixins */ .lessMixin(); @include sassMixin(); }
  26. 67.

    /** * Primary site navigation * * @tags: ^lists ^navigation

    * @extends: nav * * @format: * <ul class="nav nav-main"> * <li><a href="#">Home</a></li> * <li><a href="#">About</a></li> * </ul> */ .nav-main { ! display: block; ! background: #af2518; ! font-family: $fontHeadlineFamily; ! font-weight: 700; } ! .nav-main > li > a, ! .nav-main > .nav-item > a {}
  27. 74.

    If it takes more than 5 seconds to figure out

    where to put something, you’ve gone too far
  28. 78.

    1 Naming is hard, so be clear with your styles

    In general, instead of carpet bombing your elements, shoot to kill; target them specifically and explicitly. Make sure your selector intent is accurate and targeted. - Harry Roberts, @csswizardry http://csswizardry.com/2012/07/shoot-to-kill-css-selector-intent/
  29. 81.

    4 Consistency and Predictability always win out This is why

    people go on about readability, clarity, simplicity, and explicitness; because they are all fundamentally characteristics of a maintainable code base. - Andy Hume, @andyhume http://www.youtube.com/watch?v=ZpFdyfs03Ug