Your CSS is a Mess from Webvisions

As presented at Webvisions Portland 2013 on May 24.

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 {}
28. /* ======== 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-
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
57. Sub-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. 2 Naming Convention
78. Naming Convention Naming convention clari es intent
79. Use Class over ID Don’t use a grenade to dig a hole when a shovel will do.
80. Specificity Inline ID Class (pseudo-classes and attribute selectors) Element (pseudo- elements) style="..." #article .article :hover [attr=val] a : rst-child
81. Specificity Inline ID Class (pseudo-classes and attribute selectors) Element (pseudo- elements) style="..." #article .article :hover [attr=val] a : rst-child
82. 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. 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>
85. Specificity Buster! !important
86. Specificity Buster! !important
87. 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>
88. 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>
89. .btn {} .btn-large {} .btn-small {} .btn-default {} .btn-search {} .modal {} .modal-large .modal-header {} .modal-body {} .modal-footer {}
91. .btn {} .is-btn-active {} .is-btn-disabled {}
92. .modulename .modulename-submodule .modulename-subcomponent No hyphens Always a root node No hyphens No difference from submodule
93. .module-name .module-name--submodule .module-name__subcomponent allows for hyphens Always a root node Alternatives underscores hyphens
94. .moduleName .moduleName-subModule .moduleName--subComponent camelCase Alternatives double hyphen single hyphen
95. Naming Convention • Pick a system that works for you and your team • Be consistent • Consider: • Root node • Sub-modules • Sub-components
96. 3 Decoupling CSS from HTML
97. .nav { margin: 0; padding: 0; list-style: none; } .nav li { float: left; } .nav li a { display: block; padding: 5px 10px; background-color: blue; }
98. <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>
99. <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>
100. .nav ul { margin: 0; padding:0; list-style:none; } .nav li li { float: none; } .nav li li a { padding: 2px; background-color: red; }
101. .nav { margin: 0; padding: 0; list-style: none; } .nav > li { float: left; } .nav > li > a { display: block; padding: 5px 10px; background-color: blue; }
102. .menu { margin: 0; padding: 0; list-style: none } .menu > li > a { display: block; padding: 2px; background-color: red; }
103. Please. Use child selectors
104. <div class="box"> <h2>Sites I Like</h2> <ul> <li><a href="http://webvisionsevent.com/">Webvisions</a></li> <li><a href="http://smacss.com/">SMACSS</a></li> </ul> </div>
105. .box { border: 1px solid #333; } .box h2 { margin: 0; padding: 5px 10px; border-bottom: 1px solid #333; background-color: #CCC; } .box ul { margin: 10px; }
106. <div class="box"> <h2>Sites I Like</h2> <ul> <li><a href="http://webvisionsevent.com/">Webvisions</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>
107. .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; }
108. .box { border: 1px solid #333; } .box h2 { margin: 0; padding: 5px 10px; border-bottom: 1px solid #333; background-color: #CCC; } .box-body { margin: 10px; }
109. <div class="box"> <h2>Sites I Like</h2> <ul class="box-body"> <li><a href="http://webvisionsevent.com/">Webvisions</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>
110. when the HTML can’t or won’t be predictable Apply a class
111. Or make the html predictable
112. <div class="box"> <h2>Sites I Like</h2> <div class="box-body"> <ul> <li><a href="http://webvisionsevent.com/">Webvisions</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>
113. What does it mean?
114. Shift your thinking
115. Don’t code CSS for the page. Code it for the system.
116. State-based Design
117. State-based Design • A layout or module style • Sub-modules • JavaScript-driven states • Pseudo-class states • Media query states
118. CSS Panic http://snk.ms/15
119. .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;
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:checked{ overflow:hidden; -webkit-animation-name: none; -webkit-pointer-events: none; pointer-events: none; opacity:0; }
122. .enemys:checked{ overflow:hidden; -webkit-animation-name: none; -webkit-pointer-events: none; pointer-events: none; opacity:0; }
123. 3 Categorization Naming Convention Decouple HTML/CSS
124. http://smacss.com/ Thanks!