Your CSS is a Mess from SmartWeb

As presented at SmartWeb Conference in Bucharest, Romania

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

58. Sub-components
    

    View Slide

59. View Slide

60. View Slide

61. State
    

    View Slide

62. Active State Default State
    Disabled State Default State
    

    View Slide

63. Theme
    

    View Slide

64. View Slide

65. View Slide

66. View Slide

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

    View Slide

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

    View Slide

69. 
    ...
    
    

    View Slide

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

    View Slide

71. 
    
    ...
    
    
    

    View Slide

72. 
    ...
    
    

    View Slide

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

    View Slide

74. 
    
    ...
    
    
    

    View Slide

75. 
    
    {{item}}
    
    
    

    View Slide

76. ...
    ...
    

    View Slide

77. Categorization is
    about Isolation
    

    View Slide

78. 2
    Naming Convention
    

    View Slide

79. Naming Convention
    Naming convention clari es intent
    

    View Slide

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

    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. Specificity
    Inline ID Class
    (pseudo-classes
    and attribute
    selectors)
    Element
    (pseudo-
    elements)
    style="..." #article
    .article
    :hover
    [attr=val]
    a
    : rst-child
    

    View Slide

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

    View Slide

84. View Slide

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

    View Slide

86. Specificity Buster!
    !important
    

    View Slide

87. Specificity Buster!
    !important
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

91. View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

97. 3
    Decoupling
    CSS from HTML
    

    View Slide

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

99. 
    Home
    Products
    Contact Us
    
    

    View Slide

100. 
     Home
     Products
     
     Shoes
     Jackets
     
     
     Contact Us
     
     

     View Slide

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

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

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

     View Slide

104. Please.
     Use child selectors
     

     View Slide

105. 
     Sites I Like
     
     SmartWeb
     SMACSS
     
     
     

     View Slide

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

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

     View Slide

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

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

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

     View Slide

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

     View Slide

112. Or make the html
     predictable
     

     View Slide

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

     View Slide

114. What does it mean?
     

     View Slide

115. Shift your thinking
     

     View Slide

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

     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. 3
     Categorization
     Naming Convention
     Decouple HTML/CSS
     

     View Slide

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

     View Slide