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.

Transcript

1. Building a
   CSS Foundation
   Jake Smith
   CONFOO 2013
   

   View Slide

2. Jake Smith
   jakefolio
   http://jakefolio.com
   me@jakefolio.com
   

   View Slide

3. http://bit.ly/VuP5d5
   

   View Slide

4. View Slide

5. Constant Evaluation
   &
   Self-Loathing
   

   View Slide

6. Specificity Kills
   

   View Slide

7. Specificity is hard, especially
   to pronounce!
   

   View Slide

8. View Slide

9. Do NOT carpet bomb your
   elements
   

   View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

16. CSS is easy, naming stuff is
    hard!
    

    View Slide

17. #sidebar div {}
    GUESS THAT ELEMENT!
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

23. Clear Intent is the Goal
    

    View Slide

24. Do NOT over qualify your
    declaration
    

    View Slide

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

    View Slide

26. Do NOT let your CSS dictate
    your HTML structure
    

    View Slide

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

    View Slide

28. Let’s make specificity easy
    

    View Slide

29. Avoid using IDs*
    

    View Slide

30. Modular Development
    

    View Slide

31. Stop developing pages and
    start developing systems
    

    View Slide

32. History (Brief) of OOCSS
    

    View Slide

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
    

    View Slide

34. View Slide

35. Module/Object
    

    View Slide

36. Separate structure from style
    

    View Slide

37. /**
    * 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 Slide

38. 
    
    Subscribe
    Subscribe
    
    HTML Structure
    Base State
    

    View Slide

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

    View Slide

40. 
    
    Subscribe
    Subscribe
    
    HTML Structure
    Change the Size
    

    View Slide

41. 
    
    Subscribe
    Subscribe
    
    HTML Structure
    Add Styling
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

45. .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 Slide

46. .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 Slide

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

    View Slide

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

    View Slide

49. 
    
    
    
    
    Travel
    
    
    
    
    
    
    
    
    
    
    
    DIV Example
    LI Example
    

    View Slide

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

    View Slide

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

    View Slide

52. .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 Slide

53. .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 Slide

54. .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 Slide

55. View Slide

56. Context MUST NOT modify
    your modules
    

    View Slide

57. Code Standard/Styles
    

    View Slide

58. Formatting
    

    View Slide

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

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

64. Declaration Order
    

    View Slide

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

    View Slide

66. Documentation
    

    View Slide

67. /**
    * 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 Slide

68. Predictability
    &
    Consistency
    

    View Slide

69. Readability
    &
    Maintainability
    

    View Slide

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

    View Slide

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

    View Slide

72. Organization and Structure
    

    View Slide

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

    View Slide

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

    View Slide

75. Tools and Resources
    

    View Slide

76. http://csslint.net/
    

    View Slide

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

    View Slide

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/
    

    View Slide

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

    View Slide

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

    View Slide

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
    

    View Slide

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

    View Slide

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

    View Slide

84. Questions? Concerns?
    Complaints?
    

    View Slide

85. Thanks for Listening
    jakefolio
    http://jakefolio.com
    me@jakefolio.com
    Please Rate Me!
    https://joind.in/7990
    

    View Slide