Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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.

jakefolio

March 01, 2013
Tweet

More Decks by jakefolio

Other Decks in Programming

Transcript

  1. Building a
    CSS Foundation
    Jake Smith
    CONFOO 2013

    View full-size slide

  2. Jake Smith
    jakefolio
    http://jakefolio.com
    [email protected]

    View full-size slide

  3. http://bit.ly/VuP5d5

    View full-size slide

  4. Constant Evaluation
    &
    Self-Loathing

    View full-size slide

  5. Specificity Kills

    View full-size slide

  6. Specificity is hard, especially
    to pronounce!

    View full-size slide

  7. Do NOT carpet bomb your
    elements

    View full-size slide

  8. /**
    * You wouldn't do this
    */
    div {
    color: #ccc;
    padding: 1em 2em;
    }

    View full-size slide

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

    View full-size slide

  10. /**
    * 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;
    }

    View full-size slide

  11. /**
    * Well...
    */
    #header ul {
    color: #ccc;
    padding: 1em 2em;
    }

    View full-size slide

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

    View full-size slide

  13. /**
    * WAT
    */
    .content p {
    font-size: 14px;
    }
    /**
    * Well...
    */
    #header ul {
    color: #ccc;
    padding: 1em 2em;
    }
    /**
    * What??
    */
    #sidebar div {
    border-bottom: 1px;
    }

    View full-size slide

  14. CSS is easy, naming stuff is
    hard!

    View full-size slide

  15. #sidebar div {}
    GUESS THAT ELEMENT!

    View full-size slide

  16. #sidebar div {}
    GUESS THAT ELEMENT!
    .promo-box {}

    View full-size slide

  17. #sidebar div {}
    header ul {}
    GUESS THAT ELEMENT!
    .promo-box {}

    View full-size slide

  18. #sidebar div {}
    header ul {}
    GUESS THAT ELEMENT!
    .promo-box {}
    .nav-main {}

    View full-size slide

  19. #sidebar div {}
    h2 span {}
    header ul {}
    GUESS THAT ELEMENT!
    .promo-box {}
    .nav-main {}

    View full-size slide

  20. #sidebar div {}
    h2 span {}
    header ul {}
    GUESS THAT ELEMENT!
    .promo-box {}
    .nav-main {}
    .tagline {}

    View full-size slide

  21. Clear Intent is the Goal

    View full-size slide

  22. Do NOT over qualify your
    declaration

    View full-size slide

  23. /**
    * Stop strangling your fellow
    developer
    */
    ul.nav-primary {}
    div#header {}
    body.two-col {}

    View full-size slide

  24. Do NOT let your CSS dictate
    your HTML structure

    View full-size slide

  25. /**
    * FREEDOM!
    */
    .nav-primary {}
    #header {}
    .two-col {}

    View full-size slide

  26. Let’s make specificity easy

    View full-size slide

  27. Avoid using IDs*

    View full-size slide

  28. Modular Development

    View full-size slide

  29. Stop developing pages and
    start developing systems

    View full-size slide

  30. History (Brief) of OOCSS

    View full-size slide

  31. .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

    View full-size slide

  32. Module/Object

    View full-size slide

  33. Separate structure from style

    View full-size slide

  34. /**
    * Base Button Object
    * @tags ^button
    * @format
    * Register
    * 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;
    }

    View full-size slide



  35. Subscribe
    Subscribe

    HTML Structure
    Base State

    View full-size slide

  36. /**
    * 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);
    }

    View full-size slide



  37. Subscribe
    Subscribe

    HTML Structure
    Change the Size

    View full-size slide



  38. Subscribe
    Subscribe

    HTML Structure
    Add Styling

    View full-size slide

  39. btn
    btn-primary
    Sub-module
    module element btn-large
    Sub-module
    sizing
    styling

    View full-size slide

  40. http://themeforest.net/item/onecommunity-buddypress-theme/3713046?WT.ac=new_item&WT.seg_1=new_item&WT.z_author=Diabolique

    View full-size slide

  41. .featured-posts
    http://themeforest.net/item/onecommunity-buddypress-theme/3713046?WT.ac=new_item&WT.seg_1=new_item&WT.z_author=Diabolique

    View full-size slide

  42. .featured-posts
    .recent-posts
    http://themeforest.net/item/onecommunity-buddypress-theme/3713046?WT.ac=new_item&WT.seg_1=new_item&WT.z_author=Diabolique

    View full-size slide

  43. .featured-posts
    .recent-posts
    .active-
    members
    http://themeforest.net/item/onecommunity-buddypress-theme/3713046?WT.ac=new_item&WT.seg_1=new_item&WT.z_author=Diabolique

    View full-size slide

  44. /* ============================================================
    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;
    }

    View full-size slide

  45. /* ============================================================
    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;
    }

    View full-size slide






  46. Travel











    DIV Example
    LI Example

    View full-size slide

  47. media
    media-list
    media-
    featured-
    list
    l-grid
    Sub-module
    layout element
    module element

    View full-size slide

  48. http://themeforest.net/item/onecommunity-buddypress-theme/3713046?WT.ac=new_item&WT.seg_1=new_item&WT.z_author=Diabolique

    View full-size slide

  49. .l-grid .media-list
    http://themeforest.net/item/onecommunity-buddypress-theme/3713046?WT.ac=new_item&WT.seg_1=new_item&WT.z_author=Diabolique

    View full-size slide

  50. .l-grid .media-list
    .media-list
    http://themeforest.net/item/onecommunity-buddypress-theme/3713046?WT.ac=new_item&WT.seg_1=new_item&WT.z_author=Diabolique

    View full-size slide

  51. .l-grid .media-list
    .media-list
    .l-grid .media-
    list
    http://themeforest.net/item/onecommunity-buddypress-theme/3713046?WT.ac=new_item&WT.seg_1=new_item&WT.z_author=Diabolique

    View full-size slide

  52. Context MUST NOT modify
    your modules

    View full-size slide

  53. Code Standard/Styles

    View full-size slide

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

    View full-size slide

  55. .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

    View full-size slide

  56. .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

    View full-size slide

  57. .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

    View full-size slide

  58. .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

    View full-size slide

  59. Declaration Order

    View full-size slide

  60. .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();
    }

    View full-size slide

  61. Documentation

    View full-size slide

  62. /**
    * Primary site navigation
    *
    * @tags: ^lists ^navigation
    * @extends: nav
    *
    * @format:
    *
    * Home
    * About
    *
    */
    .nav-main {
    ! display: block;
    ! background: #af2518;
    ! font-family: $fontHeadlineFamily;
    ! font-weight: 700;
    }
    ! .nav-main > li > a,
    ! .nav-main > .nav-item > a {}

    View full-size slide

  63. Predictability
    &
    Consistency

    View full-size slide

  64. Readability
    &
    Maintainability

    View full-size slide

  65. https://github.com/necolas/idiomatic-css

    View full-size slide

  66. http://make.wordpress.org/core/handbook/coding-standards/css/

    View full-size slide

  67. Organization and Structure

    View full-size slide

  68. Abstraction and modularity
    is great.....until it’s not.....

    View full-size slide

  69. If it takes more than 5 seconds to figure
    out where to put something, you’ve gone
    too far

    View full-size slide

  70. Tools and Resources

    View full-size slide

  71. http://csslint.net/

    View full-size slide

  72. https://github.com/squizlabs/PHP_CodeSniffer

    View full-size slide

  73. 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/

    View full-size slide

  74. 2
    Don’t let your styles
    define your HTML
    Structure
    Creates complexity
    and limits modularity

    View full-size slide

  75. 3
    Small modules are
    easier to maintain
    Don’t let context
    change your module

    View full-size slide

  76. 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

    View full-size slide

  77. 5
    Document for
    tomorrow’s
    developer
    This Could Be You

    View full-size slide

  78. http://bit.ly/VuP5d5
    Links and Resources

    View full-size slide

  79. Questions? Concerns?
    Complaints?

    View full-size slide

  80. Thanks for Listening
    jakefolio
    http://jakefolio.com
    [email protected]
    Please Rate Me!
    https://joind.in/7990

    View full-size slide