Getting Your CSS Under Control

It seems so easy but soon enough, you're throwing !important at every problem or creating complicated rules to beat the cascade into submission. In this session, we'll review the typical pain points in site development and explore a modular approach that can make projects easier to develop and manage.

Transcript

1. Getting your CSS under control
3. Observing that the maximum number of people who can productively simultaneously work on CSS is one.
5. 1 person.
7. 4 designers.
8. 5 developers.
9. 1 team.
10. 1 project.
12. 30 designers.
13. 5 prototypers.
14. 200 engineers.
15. multiple teams.
16. multiple projects.
17. CSS is easy.
20. li { }
21. oat: left padding: 3px 50px; margin: 0;
22. .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. #comments .comment .meta .authorname {} #comments .comment .meta .commentnumber a {}
25. #nav-header ul li { float: left; } #nav-content ul li { float: left; }
26. 4 Considerations
27. 4 Categorization Naming Convention Decouple HTML/CSS Increase Semantics
28. 1 Categorization
29. Categorization • Base • Layout • Module • State • Theme
30. Base
31. html { background-color: #FFF; font-family: Arial, Helvetica, sans-serif; font-size: 14px; } body { margin: 0; padding: 0; } h1, h2, h3 { margin: 1em 0; }
32. Layout
34. Sidebar Content Header
38. Module
39. Customized List Button Tabs
40. .tab {} .listview {} .btn {}
48. Sub-modules
49. Large Search Dark Small
50. .btn {} .btn-large {} .btn-small {} .btn-default {} .btn-search {}
51. State
52. Active State Default State
53. .tab {} .is-tab-active {}
54. Theme
57. .theme-header {} .theme-border {} .theme-background {}
59. .text-plus1 {} .text-minus1 {}
60. 2 Naming Convention
61. Naming Convention Naming convention clari es intent
62. Use Class over ID Speci city is dangerous
63. .grid {} .tab {} .is-tab-active {} .listview {} .is-hidden {} .btn {} .btn-large {} .btn-small {} .theme-border {} .theme-background {} .text-plus1 {} .text-minus1 {}
64. 3 Decoupling CSS from HTML
65. .nav { margin: 0; padding: 0; list-style: none; } .nav li { float: left; } .nav li a { display: block; padding: 5px 10px; background-color: blue; }
66. <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>
67. <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>
68. .nav ul { margin: 0; padding:0; list-style:none; } .nav li li { float: none; } .nav li li a { padding: 2px; background-color: red; }
69. .nav { margin: 0; padding: 0; list-style: none; } .nav > li { float: left; } .nav > li > a { display: block; padding: 5px 10px; background-color: blue; }
70. .menu { margin: 0; padding: 0; list-style: none } .menu > li > a { display: block; padding: 2px; background-color: red; }
71. 4 Increasing Semantics
72. <div class="box"> <h2>Sites I Like</h2> <ul> <li><a href="http://openwebcamp.org/">Open Web Camp</a></li> <li><a href="http://smacss.com/">SMACSS</a></li> </ul> </div>
73. .box { border: 1px solid #333; } .box h2 { margin: 0; padding: 5px 10px; border-bottom: 1px solid #333; background-color: #CCC; } .box ul { margin: 10px; }
74. <div class="box"> <h2>Sites I Like</h2> <ul> <li><a href="http://convergese.com/">ConvergeSE</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>
75. .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; }
76. .box { border: 1px solid #333; } .box h2 { margin: 0; padding: 5px 10px; border-bottom: 1px solid #333; background-color: #CCC; } .box-body { margin: 10px; }
77. <div class="box"> <h2>Sites I Like</h2> <ul class="box-body"> <li><a href="http://convergese.com/">ConvergeSE</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>
78. What does it mean?
79. Shift your thinking
80. Don’t code CSS for the page. Code it for the system.
81. Have your CSS... Do one thing and one thing only
82. State-based Design
83. State-based Design • A layout or module style • Sub-modules • JavaScript-driven states • Pseudo-class states • Media query states
84. CSS Panic
85. .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;
86. .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;
87. .enemys:checked{ overflow:hidden; -webkit-animation-name: none; -webkit-pointer-events: none; pointer-events: none; opacity:0; }
88. .enemys:checked{ overflow:hidden; -webkit-animation-name: none; -webkit-pointer-events: none; pointer-events: none; opacity:0; }
89. Forms
90. <h3>Who did you enjoy speaking today?</h3> ! <input type="checkbox" id="a"> <label for="a ! <input type="checkbox" id="b"> <label for="b ! <input type="checkbox" id="c"> <label for="c <input type="checkbox" class="other"> <label <div class="other-input"> <input type="text"> </div>
91. <h3>Who did you enjoy speaking today?</h3> ! <input type="checkbox" id="a"> <label for="a ! <input type="checkbox" id="b"> <label for="b ! <input type="checkbox" id="c"> <label for="c <input type="checkbox" class="other"> <label <div class="other-input"> <input type="text"> </div>
92. <h3>Who did you enjoy speaking today?</h3> ! <input type="checkbox" id="a"> <label for="a ! <input type="checkbox" id="b"> <label for="b ! <input type="checkbox" id="c"> <label for="c <input type="checkbox" class="other"> <label <div class="other-input"> <input type="text"> </div>
93. .other-input { display:none; } .other:checked ~ .other-input { display:block; }
94. .other-input { display:none; } .other:checked ~ .other-input { display:block; } Default State
95. .other-input { display:none; } .other:checked ~ .other-input { display:block; } Checked State
96. 4 Categorization Naming Convention Decouple HTML/CSS Increase Semantics
97. GET SMACKED http://smacss.com/