Your CSS is a Mess from Webvisions

As presented at Webvisions Portland 2013 on May 24.

Transcript

1. YOUR CSS
   IS A MESS
   

   View Slide

2. View Slide

3. View Slide

4. 1 person.
   

   View Slide

5. View Slide

6. 4 designers.
   

   View Slide

7. 5 developers.
   

   View Slide

8. 1 team.
   

   View Slide

9. 1 project.
   

   View Slide

10. View Slide

11. 30 designers.
    

    View Slide

12. 5 prototypers.
    

    View Slide

13. 200 engineers.
    

    View Slide

14. multiple teams.
    

    View Slide

15. multiple projects.
    

    View Slide

16. CSS is easy.
    

    View Slide

17. View Slide

18. View Slide

19. li { }
    

    View Slide

20. oat: left
    padding: 3px 50px;
    margin: 0;
    

    View Slide

21. .block { display:block !important; }
    .inline { display:inline !important; }
    .hide { display:none !important; }
    .s-none { margin:0 !important; }
    .s { margin:10px !important; }
    .ss { margin:20px !important; }
    .sr { margin-right:10px !important; }
    .p-none { padding:0 !important; }
    .p { padding:10px !important; }
    .pp { padding:20px !important; }
    .pt { padding-top:10px !important; }
    .w-auto { width:auto !important; }
    

    View Slide

22. View Slide

23. .layout_1_2 #blogList .pageitem .statusBar {}
    .layout_1_2 #blogList .pageitem .statusBar .status,
    #blogList .pageitem .statusBar .status .status1 { }
    .layout_1_2 #blogList .pageitem .statusBar .status { }
    .layout_1_2 #blogList .pageitem .statusBar .status .status1 { }
    .layout_1_2 #blogList .pageitem .statusBar .status .status1 a { }
    .layout_1_2 #blogList .pageitem .statusBar .status .status1 .sep {}
    

    View Slide

24. .layout_1_2 #blogList .pageitem .statusBar {}
    .layout_1_2 #blogList .pageitem .statusBar .status,
    #blogList .pageitem .statusBar .status .status1 { }
    .layout_1_2 #blogList .pageitem .statusBar .status { }
    .layout_1_2 #blogList .pageitem .statusBar .status .status1 { }
    .layout_1_2 #blogList .pageitem .statusBar .status .status1 a { }
    .layout_1_2 #blogList .pageitem .statusBar .status .status1 .sep {}
    

    View Slide

25. #nav-header ul li {
    float: left;
    ...
    }
    #nav-content ul li {
    float: left;
    ...
    }
    

    View Slide

26. #comments .comment .meta .authorname {}
    #comments .comment .meta .commentnumber a {}
    

    View Slide

27. #comments .comment .meta .authorname {}
    #comments .comment .meta .commentnumber a {}
    

    View Slide

28. /* ======== SECTION: STYLE VARIABLES ======== */
    $icon_sprite:url('icon-sprite.png') no-repeat;
    $black_header_height:40px;
    $content_header_height:66px;
    $container_width:994px;
    $sidebar_width:158px;
    $page_width: $container_width - $sidebar_width - 20px;
    $outer_page_width: $container_width - $sidebar_width;
    /* ======== END SECTION: STYLE VARIABLES ======== */
    /* ======== SECTION: 4.0. SCSS MIXINS ======== */
    /* 4.2. Transitions */
    @mixin transition($properties:all,$timing:0.3s,$transition:ease-in-out,$delay:0.0s) { -o-
    transition: $properties $timing $transition $delay; -webkit-transition: $properties $timi
    $transition $delay; -moz-transition: $properties $timing $transition $delay; }
    /* 4.3. Box Shadows */
    @mixin box-shadow($s1) { -webkit-box-shadow:$s1; -moz-box-shadow:$s1; box-shadow:$s1; }
    @mixin double-box-shadow($s1,$s2:0 0 0 rgba(0,0,0,0)) { -webkit-box-shadow:$s1,$s2; -moz-
    shadow:$s1,$s2; box-shadow:$s1,$s2; }
    /* 4.4. Rounded Corners */
    @mixin rounded($px:3px) { -webkit-border-radius:$px; -moz-border-radius:$px; border-radiu
    $px; }
    /* 4.5. Border Radius */
    @mixin border-radius($tr,$tl,$br,$bl) { -moz-border-radius:$tr $tl $br $bl; -webkit-borde
    radius:$tr $tl $br $bl; border-radius:$tr $tl $br $bl; }
    /* 4.6. Gradients */
    @mixin gradient($color1, $color2) { background-color:$color1; background-image:-o-linear-
    gradient($color2, $color1); background-image: -webkit-gradient(linear,left bottom,left
    top,color-stop(0, $color1),color-stop(1, $color2)); background-image: -moz-linear-
    

    View Slide

29. View Slide

30. View Slide

31. Scalable and
    Modular
    Architecture
    for CSS
    

    View Slide

32. SMACSS
    

    View Slide

33. 3
    Considerations
    

    View Slide

34. 3
    Categorization
    Naming Convention
    Decouple HTML/CSS
    

    View Slide

35. 1
    Categorization
    

    View Slide

36. Categorization
    • Base
    • Layout
    • Module
    • State
    • Theme
    

    View Slide

37. Base
    

    View Slide

38. html {
    background-color: #FFF;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 14px;
    }
    body {
    margin: 0;
    padding: 0;
    }
    h1, h2, h3 {
    margin: 1em 0;
    }
    

    View Slide

39. Layout
    

    View Slide

40. View Slide

41. Sidebar Content
    Header
    

    View Slide

42. View Slide

43. View Slide

44. Module
    

    View Slide

45. Customized List
    Button
    Tabs
    

    View Slide

46. View Slide

47. View Slide

48. View Slide

49. View Slide

50. View Slide

51. View Slide

52. View Slide

53. Sub-modules
    

    View Slide

54. Large
    Search
    Dark
    Small
    

    View Slide

55. View Slide

56. View Slide

57. Sub-components
    

    View Slide

58. View Slide

59. View Slide

60. State
    

    View Slide

61. Active State Default State
    Disabled State Default State
    

    View Slide

62. Theme
    

    View Slide

63. View Slide

64. View Slide

65. View Slide

66. Have your CSS (and HTML)...
    Do one thing
    and one thing only
    

    View Slide

67. http://snk.ms/1r
    The Single
    Responsibility
    Theory
    

    View Slide

68. 
    ...
    
    

    View Slide

69. .grid {}
    .col { float:left; }
    .col:nth-child(2n) { clear:left; }
    .module { display:inline-block; }
    

    View Slide

70. 
    
    ...
    
    
    

    View Slide

71. 
    ...
    
    

    View Slide

72. .grid {}
    .grid > li { float:left; }
    .grid > li:nth-child(2n) { clear:left; }
    .module { display:inline-block; }
    

    View Slide

73. 
    
    ...
    
    
    

    View Slide

74. 
    
    {{item}}
    
    
    

    View Slide

75. ...
    ...
    

    View Slide

76. Categorization is
    about Isolation
    

    View Slide

77. 2
    Naming Convention
    

    View Slide

78. Naming Convention
    Naming convention clari es intent
    

    View Slide

79. Use Class over ID
    Don’t use a grenade to dig a hole
    when a shovel will do.
    

    View Slide

80. Specificity
    Inline ID Class
    (pseudo-classes
    and attribute
    selectors)
    Element
    (pseudo-
    elements)
    style="..." #article
    .article
    :hover
    [attr=val]
    a
    : rst-child
    

    View Slide

81. Specificity
    Inline ID Class
    (pseudo-classes
    and attribute
    selectors)
    Element
    (pseudo-
    elements)
    style="..." #article
    .article
    :hover
    [attr=val]
    a
    : rst-child
    

    View Slide

82. a { color: #039; }
    .subdued { color: #666; }
    #cancel { color: #900; }
    Link
    Link
    Link
    class="subdued">Link
    

    View Slide

83. View Slide

84. a { color: #039; }
    .subdued { color: #666 !important; }
    #cancel { color: #900; }
    Link
    Link
    Link
    class="subdued">Link
    

    View Slide

85. Specificity Buster!
    !important
    

    View Slide

86. Specificity Buster!
    !important
    

    View Slide

87. a { color: #039; }
    .subdued,
    #cancel.subdued { color: #666; }
    #cancel { color: #900; }
    Link
    Link
    Link
    class="subdued">Link
    

    View Slide

88. a { color: #039; }
    .subdued { color: #666; }
    .cancel { color: #900; }
    Link
    Link
    class="cancel">Link
    class="subdued">Link
    

    View Slide

89. .btn {}
    .btn-large {}
    .btn-small {}
    .btn-default {}
    .btn-search {}
    .modal {}
    .modal-large
    .modal-header {}
    .modal-body {}
    .modal-footer {}
    

    View Slide

90. View Slide

91. .btn {}
    .is-btn-active {}
    .is-btn-disabled {}
    

    View Slide

92. .modulename
    .modulename-submodule
    .modulename-subcomponent
    No hyphens
    Always a root node
    No hyphens
    No difference from submodule
    

    View Slide

93. .module-name
    .module-name--submodule
    .module-name__subcomponent
    allows for hyphens
    Always a root node
    Alternatives
    underscores
    hyphens
    

    View Slide

94. .moduleName
    .moduleName-subModule
    .moduleName--subComponent
    camelCase
    Alternatives
    double hyphen
    single hyphen
    

    View Slide

95. Naming
    Convention
    • Pick a system that works for you and
    your team
    • Be consistent
    • Consider:
    • Root node
    • Sub-modules
    • Sub-components
    

    View Slide

96. 3
    Decoupling
    CSS from HTML
    

    View Slide

97. .nav {
    margin: 0;
    padding: 0;
    list-style: none;
    }
    .nav li {
    float: left;
    }
    .nav li a {
    display: block;
    padding: 5px 10px;
    background-color: blue;
    }
    

    View Slide

98. 
    Home
    Products
    Contact Us
    
    

    View Slide

99. 
    Home
    Products
    
    Shoes
    Jackets
    
    
    Contact Us
    
    

    View Slide

100. .nav ul {
     margin: 0;
     padding:0;
     list-style:none;
     }
     .nav li li {
     float: none;
     }
     .nav li li a {
     padding: 2px;
     background-color: red;
     }
     

     View Slide

101. .nav {
     margin: 0;
     padding: 0;
     list-style: none;
     }
     .nav > li {
     float: left;
     }
     .nav > li > a {
     display: block;
     padding: 5px 10px;
     background-color: blue;
     }
     

     View Slide

102. .menu {
     margin: 0;
     padding: 0;
     list-style: none
     }
     .menu > li > a {
     display: block;
     padding: 2px;
     background-color: red;
     }
     

     View Slide

103. Please.
     Use child selectors
     

     View Slide

104. 
     Sites I Like
     
     Webvisions
     SMACSS
     
     
     

     View Slide

105. .box {
     border: 1px solid #333;
     }
     .box h2 {
     margin: 0;
     padding: 5px 10px;
     border-bottom: 1px solid #333;
     background-color: #CCC;
     }
     .box ul {
     margin: 10px;
     }
     

     View Slide

106. 
     Sites I Like
     
     Webvisions
     SMACSS
     
     
     
     About Us
     The Fancy Pants Company is all about fancy pants.
     
     
     Sponsored By
     
     
     

     View Slide

107. .box {
     border: 1px solid #333;
     }
     .box h2 {
     margin: 0;
     padding: 5px 10px;
     border-bottom: 1px solid #333;
     background-color: #CCC;
     }
     .box ul, .box p, .box div {
     margin: 10px;
     }
     

     View Slide

108. .box {
     border: 1px solid #333;
     }
     .box h2 {
     margin: 0;
     padding: 5px 10px;
     border-bottom: 1px solid #333;
     background-color: #CCC;
     }
     .box-body {
     margin: 10px;
     }
     

     View Slide

109. 
     Sites I Like
     
     Webvisions
     SMACSS
     
     
     
     About Us
     The Fancy Pants Company is all about fancy
     pants.
     
     
     Sponsored By
     
     
     

     View Slide

110. when the HTML can’t
     or won’t be predictable
     Apply a class
     

     View Slide

111. Or make the html
     predictable
     

     View Slide

112. 
     Sites I Like
     
     
     Webvisions
     SMACSS
     
     
     
     
     About Us
     
     The Fancy Pants Company is all about fancy pants.
     
     
     
     Sponsored By
     
     
     

     View Slide

113. What does it mean?
     

     View Slide

114. Shift your thinking
     

     View Slide

115. Don’t code CSS for the page.
     Code it for
     the system.
     

     View Slide

116. State-based Design
     

     View Slide

117. State-based Design
     • A layout or module style
     • Sub-modules
     • JavaScript-driven states
     • Pseudo-class states
     • Media query states
     

     View Slide

118. CSS Panic
     http://snk.ms/15
     

     View Slide

119. .enemys {
     z-index:3;
     position:absolute;
     top:0px;
     left:0;
     width:49px;
     height:93px;
     display:block;
     -webkit-appearance: button;
     -moz-appearance: button;
     background-position:0px 0px;
     background-repeat:no-repeat;
     -webkit-animation-iteration-count:infinite
     cursor:pointer;
     opacity:0.9;
     border:none;
     

     View Slide

120. .enemys {
     z-index:3;
     position:absolute;
     top:0px;
     left:0;
     width:49px;
     height:93px;
     display:block;
     -webkit-appearance: button;
     -moz-appearance: button;
     background-position:0px 0px;
     background-repeat:no-repeat;
     -webkit-animation-iteration-count:infinite
     cursor:pointer;
     opacity:0.9;
     border:none;
     

     View Slide

121. .enemys:checked{
     overflow:hidden;
     -webkit-animation-name: none;
     -webkit-pointer-events: none;
     pointer-events: none;
     opacity:0;
     }
     

     View Slide

122. .enemys:checked{
     overflow:hidden;
     -webkit-animation-name: none;
     -webkit-pointer-events: none;
     pointer-events: none;
     opacity:0;
     }
     

     View Slide

123. 3
     Categorization
     Naming Convention
     Decouple HTML/CSS
     

     View Slide

124. http://smacss.com/
     Thanks!
     

     View Slide