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
2. THE TAMING OF THE SHREWsbury
4. CSS is easy.
7. li { }
8. oat: left padding: 3px 50px; margin: 0;
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; }
12. 1 person.
14. 4 designers.
15. 5 developers.
16. 1 team.
18. 30 designers.
19. 5 prototypers.
20. 200 engineers.
21. multiple teams.
22. multiple projects.
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 {}
30. Scalable and Modular Architecture for CSS
31. SMACSS
32. 2 Considerations
33. 2 Categorization Naming Convention
34. 1 Categorization
35. Five Categories Base Layout Module State Theme
36. Base
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; }
38. Layout
40. Sidebar Content Header
43. Module
44. Customized List Button Tabs
52. Module Variations
53. Large Search Dark Small
57. Module components
60. State
61. Active State Default State Disabled State Default State
62. Theme
66. Have your CSS (and HTML)... Do one thing and one thing only
67. http://snk.ms/1r The Single Responsibility Theory
68. <div class="grid"> <div class="col module">...</div> </div>
69. .grid {} .col { float:left; } .col:nth-child(2n) { clear:left; } .module { display:inline-block; }
70. <div class="grid"> <div class="col"> <div class="module">...</div> </div> </div>
71. <ul class="grid"> <li class="module">...</li> </ul>
72. .grid {} .grid > li { float:left; } .grid > li:nth-child(2n) { clear:left; } .module { display:inline-block; }
73. <ul class="grid"> <li> <div class="module">...</div> </li> </ul>
74. <ul class="grid"> <li> {{item}} </li> </ul>
75. <li class="module">...</li> <div class="module">...</div>
76. Categorization is about Isolation
77. .nav { margin: 0; padding: 0; list-style: none; } .nav li { float: left; } .nav li a { display: block; padding: 5px 10px; background-color: blue; }
78. <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>
79. <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>
80. .nav ul { margin: 0; padding:0; list-style:none; } .nav li li { float: none; } .nav li li a { padding: 2px; background-color: red; }
81. .nav { margin: 0; padding: 0; list-style: none; } .nav > li { float: left; } .nav > li > a { display: block; padding: 5px 10px; background-color: blue; }
82. .menu { margin: 0; padding: 0; list-style: none } .menu > li > a { display: block; padding: 2px; background-color: red; }
83. 2 Naming Convention
84. Naming Convention Naming convention clari es intent
85. Use Class over ID Don’t use a grenade to dig a hole when a shovel will do.
86. Specificity Inline ID Class (pseudo-classes and attribute selectors) Element (pseudo- elements) style="..." #article .article :hover [attr=val] a : rst-child
87. Specificity Inline ID Class (pseudo-classes and attribute selectors) Element (pseudo- elements) style="..." #article .article :hover [attr=val] a : rst-child
88. 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>
90. 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>
91. Specificity Buster! !important
92. Specificity Buster! !important
93. 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>
94. 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>
95. .btn {} .btn-large {} .btn-small {} .btn-default {} .btn-search {} .modal {} .modal-large .modal-header {} .modal-body {} .modal-footer {}
96. .btn.large?
97. .btn.large .field.large .modal.large
98. class=”btn large” class=”large btn” class=”btn default large”
99. http://snk.ms/20
100. .btn { padding:5px 10px; font-size: 1em; .large { padding: 10px 20px; font-size: 2em; } }
101. ... padding:5px 10px; font-size: 1em; .large { padding: 10px 20px; font-size: 2em; } ...
102. .btn-large
103. .btn { padding:5px 10px; font-size: 1em; } .btn-large { padding: 10px 20px; font-size: 2em; }
105. .btn {} .is-btn-active {} .is-btn-disabled {}
106. .modulename .modulename-submodule .modulename-subcomponent No hyphens Always a root node No hyphens No difference from submodule
107. .module-name .module-name--submodule .module-name__subcomponent allows for hyphens Always a root node Alternatives underscores hyphens
108. .ModuleName .ModuleName-subModule .ModuleName--subComponent camelCase Alternatives double hyphen single hyphen
109. Naming Convention • Pick a system that works for you and your team • Be consistent • Consider: • Root node • Sub-modules • Sub-components
110. What does it mean?
111. Shift your thinking
112. Don’t code CSS for the page. Code it for the system.
113. http://snk.ms/1x Atomic Design
115. http://snk.ms/1y Responsive Deliverables
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. 2 Categorization Naming Convention
125. http://smacss.com/ Thanks!