Your CSS is a Mess from SmartWeb

Transcript

1. YOUR CSS IS A MESS

2. None
3. None

4. 1 person.

5. None

6. 4 designers.

7. 5 developers.

8. 1 team.

9. 1 project.

10. None

11. 30 designers.

12. 5 prototypers.

13. 200 engineers.

14. multiple teams.

15. multiple projects.

16. CSS is easy.

17. None
18. None

19. li { }

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

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; }
22. None

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

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

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

    li { float: left; ... }

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

    {}

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

    {}
28. None
29. None
30. None

31. Scalable and Modular Architecture for CSS

32. SMACSS

33. 3 Considerations

34. 3 Categorization Naming Convention Decouple HTML/CSS

35. 1 Categorization

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

    Theme

37. Base

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

39. Layout

40. None

41. Sidebar Content Header

42. None
43. None

44. Module

45. Customized List Button Tabs

46. None
47. None
48. None
49. None
50. None
51. None
52. None

53. Sub-modules

54. Large Search Dark Small

55. None
56. None
57. None

58. Sub-components

59. None
60. None

61. State

62. Active State Default State Disabled State Default State

63. Theme

64. None
65. None
66. None

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

    thing only

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

69. <div class="grid"> <div class="col module">...</div> </div>

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

    .module { display:inline-block; }

71. <div class="grid"> <div class="col"> <div class="module">...</div> </div> </div>

72. <ul class="grid"> <li class="module">...</li> </ul>

73. .grid {} .grid > li { float:left; } .grid >

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

74. <ul class="grid"> <li> <div class="module">...</div> </li> </ul>

75. <ul class="grid"> <li> {{item}} </li> </ul>

76. <li class="module">...</li> <div class="module">...</div>

77. Categorization is about Isolation

78. 2 Naming Convention

79. Naming Convention Naming convention clari es intent

80. Use Class over ID Don’t use a grenade to dig

    a hole when a shovel will do.

81. Specificity Inline ID Class (pseudo-classes and attribute selectors) Element (pseudo-

    elements) style="..." #article .article :hover [attr=val] a : rst-child

82. Specificity Inline ID Class (pseudo-classes and attribute selectors) Element (pseudo-

    elements) style="..." #article .article :hover [attr=val] a : rst-child

83. a { color: #039; } .subdued { color: #666; }

    #cancel { color: #900; } <a href="...">Link</a> <a href="..." class="subdued">Link</a> <a href="..." id="cancel">Link</a> <a href="..." id="cancel" class="subdued">Link</a>
84. None

85. a { color: #039; } .subdued { color: #666 !important;

    } #cancel { color: #900; } <a href="...">Link</a> <a href="..." class="subdued">Link</a> <a href="..." id="cancel">Link</a> <a href="..." id="cancel" class="subdued">Link</a>

86. Specificity Buster! !important

87. Specificity Buster! !important

88. a { color: #039; } .subdued, #cancel.subdued { color: #666;

    } #cancel { color: #900; } <a href="...">Link</a> <a href="..." class="subdued">Link</a> <a href="..." id="cancel">Link</a> <a href="..." id="cancel" class="subdued">Link</a>

89. a { color: #039; } .subdued { color: #666; }

    .cancel { color: #900; } <a href="...">Link</a> <a href="..." class="subdued">Link</a> <a href="..." id="cancel" class="cancel">Link</a> <a href="..." id="cancel" class="subdued">Link</a>

90. .btn {} .btn-large {} .btn-small {} .btn-default {} .btn-search {}

    .modal {} .modal-large .modal-header {} .modal-body {} .modal-footer {}
91. None

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

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

    hyphens No difference from submodule

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

    Alternatives underscores hyphens

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

96. Naming Convention • Pick a system that works for you

    and your team • Be consistent • Consider: • Root node • Sub-modules • Sub-components

97. 3 Decoupling CSS from HTML

98. .nav { margin: 0; padding: 0; list-style: none; } .nav

    li { float: left; } .nav li a { display: block; padding: 5px 10px; background-color: blue; }

99. <ul class="nav"> <li><a href="/">Home</a></li> <li><a href="/products">Products</a></li> <li><a href="/contact">Contact Us</a></li> </ul>

100. <ul class="nav"> <li><a href="/">Home</a></li> <li><a href="/products">Products</a> <ul> <li><a href="/products/shoes">Shoes</a></li> <li><a

     href="/products/jackets">Jackets</a></li> </ul> </li> <li><a href="/contact">Contact Us</a></li> </ul>

101. .nav ul { margin: 0; padding:0; list-style:none; } .nav li

     li { float: none; } .nav li li a { padding: 2px; background-color: red; }

102. .nav { margin: 0; padding: 0; list-style: none; } .nav

     > li { float: left; } .nav > li > a { display: block; padding: 5px 10px; background-color: blue; }

103. .menu { margin: 0; padding: 0; list-style: none } .menu

     > li > a { display: block; padding: 2px; background-color: red; }

104. Please. Use child selectors

105. <div class="box"> <h2>Sites I Like</h2> <ul> <li><a href="http://www.smartwebconf.com/">SmartWeb</a></li> <li><a href="http://smacss.com/">SMACSS</a></li>

     </ul> </div>

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

107. <div class="box"> <h2>Sites I Like</h2> <ul> <li><a href="http://www.smartwebconf.com/">SmartWeb</a></li> <li><a href="http://smacss.com/">SMACSS</a></li>

     </ul> </div> <div class="box"> <h2>About Us</h2> <p>The Fancy Pants Company is all about fancy pants.</p> </div> <div class="box"> <h2>Sponsored By</h2> <div><img src="http://example.com/img.png" alt="..."></div> </div>

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

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

110. <div class="box"> <h2>Sites I Like</h2> <ul class="box-body"> <li><a href="http://www.smartwebconf.com/">SmartWeb</a></li> <li><a

     href="http://smacss.com/">SMACSS</a></li> </ul> </div> <div class="box"> <h2>About Us</h2> <p class="box-body">The Fancy Pants Company is all about fancy pants.</p> </div> <div class="box"> <h2>Sponsored By</h2> <div class="box-body"><img src="..." alt="..."></div> </div>

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

     class

112. Or make the html predictable

113. <div class="box"> <h2>Sites I Like</h2> <div class="box-body"> <ul> <li><a href="http://www.smartwebconf.com/">SmartWeb</a></li>

     <li><a href="http://smacss.com/">SMACSS</a></li> </ul> </div> </div> <div class="box"> <h2>About Us</h2> <div class="box-body"> <p>The Fancy Pants Company is all about fancy pants.</p> </div> </div> <div class="box"> <h2>Sponsored By</h2> <div class="box-body"><img src="..." alt="..."></div> </div>

114. What does it mean?

115. Shift your thinking

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

     system.

117. State-based Design

118. State-based Design • A layout or module style • Sub-modules

     • JavaScript-driven states • Pseudo-class states • Media query states

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

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;

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;

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

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

124. 3 Categorization Naming Convention Decouple HTML/CSS

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