Your CSS is a Mess from SmartWeb

As presented at SmartWeb Conference in Bucharest, Romania

Transcript

1. YOUR CSS IS A MESS
4. 1 person.
6. 4 designers.
7. 5 developers.
8. 1 team.
9. 1 project.
11. 30 designers.
12. 5 prototypers.
13. 200 engineers.
14. multiple teams.
15. multiple projects.
16. CSS is easy.
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; }
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 {}
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
41. Sidebar Content Header
44. Module
45. Customized List Button Tabs
53. Sub-modules
54. Large Search Dark Small
58. Sub-components
61. State
62. Active State Default State Disabled State Default State
63. Theme
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>
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 {}
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!