Your CSS is a Mess from Rustbelt Refresh

As presented at Rustbelt Refresh 2013 in Cleveland, OH.

Transcript

1. YOUR CSS IS A MESS
5. 1 person.
7. 4 designers.
8. 5 developers.
9. 1 team.
10. 1 project.
12. 30 designers.
14. 200 engineers.
15. 5 prototypers.
16. multiple teams.
17. multiple projects.
18. CSS is easy.
21. li { }
22. oat: left padding: 3px 50px; margin: 0;
23. .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; }
25. .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 {}
26. .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 {}
27. #comments .comment .meta .authorname {} #comments .comment .meta .commentnumber a {}
28. #comments .comment .meta .authorname {} #comments .comment .meta .commentnumber a {}
29. #nav-header ul li { float: left; ... } #nav-content ul li { float: left; ... }
30. /* ======== SECTION: STYLE VARIABLES ======== */ $icon_sprite:url('icon-sprite.png') no-repeat; $black_header_height:40px; $content_header_height:66px; $container_width:994px; $sidebar_width:158px; $page_width: $container_width - $sidebar_width - 20px; $outer_page_width: $container_width - $sidebar_width; /* ======== END SECTION: STYLE VARIABLES ======== */ /* ======== SECTION: 4.0. SCSS MIXINS ======== */ /* 4.2. Transitions */ @mixin transition($properties:all,$timing:0.3s,$transition:ease-in-out,$delay:0.0s) { -o- transition: $properties $timing $transition $delay; -webkit-transition: $properties $timi $transition $delay; -moz-transition: $properties $timing $transition $delay; } /* 4.3. Box Shadows */ @mixin box-shadow($s1) { -webkit-box-shadow:$s1; -moz-box-shadow:$s1; box-shadow:$s1; } @mixin double-box-shadow($s1,$s2:0 0 0 rgba(0,0,0,0)) { -webkit-box-shadow:$s1,$s2; -moz- shadow:$s1,$s2; box-shadow:$s1,$s2; } /* 4.4. Rounded Corners */ @mixin rounded($px:3px) { -webkit-border-radius:$px; -moz-border-radius:$px; border-radiu $px; } /* 4.5. Border Radius */ @mixin border-radius($tr,$tl,$br,$bl) { -moz-border-radius:$tr $tl $br $bl; -webkit-borde radius:$tr $tl $br $bl; border-radius:$tr $tl $br $bl; } /* 4.6. Gradients */ @mixin gradient($color1, $color2) { background-color:$color1; background-image:-o-linear- gradient($color2, $color1); background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, $color1),color-stop(1, $color2)); background-image: -moz-linear-
33. Scalable and Modular Architecture for CSS
34. SMACSS
35. 3 Considerations
36. 3 Categorization Naming Convention Decouple HTML/CSS
37. 1 Categorization
38. Categorization • Base • Layout • Module • State • Theme
39. Base
40. html { background-color: #FFF; font-family: Arial, Helvetica, sans-serif; font-size: 14px; } body { margin: 0; padding: 0; } h1, h2, h3 { margin: 1em 0; }
41. Layout
43. Sidebar Content Header Footer
45. Sidebar Content Header
48. Module
49. Customized List Button Tabs
57. Sub-modules
58. Large Search Dark Small
61. Sub-components
64. State
65. Active State Default State Disabled State Default State
66. Theme
70. Have your CSS (and HTML)... Do one thing and one thing only
71. http://snk.ms/1r The Single Responsibility Theory
72. <div class="grid"> <div class="col module">...</div> </div>
73. .grid {} .col { float:left; } .col:nth-child(2n) { clear:left; } .module { display:inline-block; }
74. <div class="grid"> <div class="col"> <div class="module">...</div> </div> </div>
75. <ul class="grid"> <li class="module">...</li> </ul>
76. .grid {} .grid > li { float:left; } .grid > li:nth-child(2n) { clear:left; } .module { display:inline-block; }
77. <ul class="grid"> <li> <div class="module">...</div> </li> </ul>
78. <ul class="grid"> <li> {{item}} </li> </ul>
79. <li class="module">...</li> <div class="module">...</div>
80. Categorization is about Isolation
81. 2 Naming Convention
83. Naming Convention Naming convention clari es intent
84. Use Class over ID Don’t use a grenade to dig a hole when a shovel will do.
85. Specificity Inline ID Class (pseudo-classes and attribute selectors) Element (pseudo- elements) style="..." #article .article :hover [attr=val] a : rst-child
86. Specificity Inline ID Class (pseudo-classes and attribute selectors) Element (pseudo- elements) style="..." #article .article :hover [attr=val] a : rst-child
87. 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>
89. 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>
90. Specificity Buster! !important
91. Specificity Buster! !important
92. 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>
93. 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>
94. .btn {} .btn-large {} .btn-small {} .btn-default {} .btn-search {}
95. .btn {} .is-btn-active {} .is-btn-disabled {}
96. .theme-header {} .theme-border {} .theme-background {}
97. .text-plus1 {} .text-minus1 {}
98. .modulename .modulename-submodule .modulename-subcomponent No hyphens Always a root node No hyphens No difference from submodule
99. .module-name .module-name--submodule .module-name__subcomponent allows for hyphens Always a root node Alternatives underscores hyphens
100. .moduleName .moduleName-subModule .moduleName--subComponent camelCase Alternatives double hyphen single hyphen
101. Naming Convention • Pick a system that works for you and your team • Be consistent • Consider: • Root node • Sub-modules • Sub-components
102. 3 Decoupling CSS from HTML
103. .nav { margin: 0; padding: 0; list-style: none; } .nav li { float: left; } .nav li a { display: block; padding: 5px 10px; background-color: blue; }
104. <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>
105. <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>
106. .nav ul { margin: 0; padding:0; list-style:none; } .nav li li { float: none; } .nav li li a { padding: 2px; background-color: red; }
107. .nav { margin: 0; padding: 0; list-style: none; } .nav > li { float: left; } .nav > li > a { display: block; padding: 5px 10px; background-color: blue; }
108. .menu { margin: 0; padding: 0; list-style: none } .menu > li > a { display: block; padding: 2px; background-color: red; }
109. Please. Use child selectors
110. <div class="box"> <h2>Sites I Like</h2> <ul> <li><a href="http://smashingconf.com/">Smashing!</a></li> <li><a href="http://smacss.com/">SMACSS</a></li> </ul> </div>
111. .box { border: 1px solid #333; } .box h2 { margin: 0; padding: 5px 10px; border-bottom: 1px solid #333; background-color: #CCC; } .box ul { margin: 10px; }
112. <div class="box"> <h2>Sites I Like</h2> <ul> <li><a href="http://smashingconf.com/">Smashing!</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>
113. .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; }
114. .box { border: 1px solid #333; } .box h2 { margin: 0; padding: 5px 10px; border-bottom: 1px solid #333; background-color: #CCC; } .box-body { margin: 10px; }
115. <div class="box"> <h2>Sites I Like</h2> <ul class="box-body"> <li><a href="http://smashingconf.com/">Smashing!</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>
116. when the HTML can’t or won’t be predictable Apply a class
117. What does it mean?
118. Shift your thinking
119. Don’t code CSS for the page. Code it for the system.
120. State-based Design
121. State-based Design • A layout or module style • Sub-modules • JavaScript-driven states • Pseudo-class states • Media query states
122. CSS Panic http://snk.ms/15
123. .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;
124. .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;
125. .enemys:checked{ overflow:hidden; -webkit-animation-name: none; -webkit-pointer-events: none; pointer-events: none; opacity:0; }
126. .enemys:checked{ overflow:hidden; -webkit-animation-name: none; -webkit-pointer-events: none; pointer-events: none; opacity:0; }
127. 3 Categorization Naming Convention Decouple HTML/CSS