Your CSS is a Mess from ShropGeek's Revolution Conf

As presented at Revolution Conf in Shrewsbury, UK. "The Taming of the Shrewsbury." I'm still laughing at that joke.

Transcript

1. YOUR CSS
   IS A MESS
   

   View Slide

2. THE
   TAMING
   OF THE
   SHREWsbury
   

   View Slide

3. View Slide

4. CSS is easy.
   

   View Slide

5. View Slide

6. View Slide

7. li { }
   

   View Slide

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

   View Slide

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

10. View Slide

11. View Slide

12. 1 person.
    

    View Slide

13. View Slide

14. 4 designers.
    

    View Slide

15. 5 developers.
    

    View Slide

16. 1 team.
    

    View Slide

17. View Slide

18. 30 designers.
    

    View Slide

19. 5 prototypers.
    

    View Slide

20. 200 engineers.
    

    View Slide

21. multiple teams.
    

    View Slide

22. multiple projects.
    

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

29. View Slide

30. Scalable and
    Modular
    Architecture
    for CSS
    

    View Slide

31. SMACSS
    

    View Slide

32. 2
    Considerations
    

    View Slide

33. 2
    Categorization
    Naming Convention
    

    View Slide

34. 1
    Categorization
    

    View Slide

35. Five Categories
    Base
    Layout
    Module
    State
    Theme
    

    View Slide

36. Base
    

    View Slide

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

38. Layout
    

    View Slide

39. View Slide

40. Sidebar Content
    Header
    

    View Slide

41. View Slide

42. View Slide

43. Module
    

    View Slide

44. Customized List
    Button
    Tabs
    

    View Slide

45. View Slide

46. View Slide

47. View Slide

48. View Slide

49. View Slide

50. View Slide

51. View Slide

52. Module
    Variations
    

    View Slide

53. Large
    Search
    Dark
    Small
    

    View Slide

54. View Slide

55. View Slide

56. View Slide

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

78. 
    Home
    Products
    Contact Us
    
    

    View Slide

79. 
    Home
    Products
    
    Shoes
    Jackets
    
    
    Contact Us
    
    

    View Slide

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

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

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

    View Slide

83. 2
    Naming Convention
    

    View Slide

84. Naming Convention
    Naming convention clari es intent
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

89. View Slide

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

    View Slide

91. Specificity Buster!
    !important
    

    View Slide

92. Specificity Buster!
    !important
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

96. .btn.large?
    

    View Slide

97. .btn.large
    .field.large
    .modal.large
    

    View Slide

98. class=”btn large”
    class=”large btn”
    class=”btn default large”
    

    View Slide

99. http://snk.ms/20
    

    View Slide

100. .btn {
     padding:5px 10px;
     font-size: 1em;
     .large {
     padding: 10px 20px;
     font-size: 2em;
     }
     }
     

     View Slide

101. ...
     padding:5px 10px;
     font-size: 1em;
     .large {
     padding: 10px 20px;
     font-size: 2em;
     }
     ...
     

     View Slide

102. .btn-large
     

     View Slide

103. .btn {
     padding:5px 10px;
     font-size: 1em;
     }
     .btn-large {
     padding: 10px 20px;
     font-size: 2em;
     }
     

     View Slide

104. View Slide

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

     View Slide

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

     View Slide

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

     View Slide

108. .ModuleName
     .ModuleName-subModule
     .ModuleName--subComponent
     camelCase
     Alternatives
     double hyphen
     single hyphen
     

     View Slide

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

     View Slide

110. What does it mean?
     

     View Slide

111. Shift your thinking
     

     View Slide

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

     View Slide

113. http://snk.ms/1x
     Atomic Design
     

     View Slide

114. View Slide

115. http://snk.ms/1y
     Responsive
     Deliverables
     

     View Slide

116. View Slide

117. State-based Design
     

     View Slide

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

     View Slide

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

     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 {
     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

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

     View Slide

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

     View Slide

124. 2
     Categorization
     Naming Convention
     

     View Slide

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

     View Slide