Your CSS is a Mess

Looking at 3 simple ways to keep your CSS more organized (and more modular)

Transcript

2. Jonathan Snoovvk The V’s are silent
3. YOUR CSS IS A MESS
6. 1 person.
8. 4 designers.
9. 5 developers.
10. 1 team.
11. 1 project.
13. 30 designers.
14. 5 prototypers.
15. 200 engineers.
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; }
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. #comments .comment .meta .authorname {} #comments .comment .meta .commentnumber a {}
26. #nav-header ul li { float: left; } #nav-content ul li { float: left; }
27. 3 Considerations
28. 3 Categorization Naming Convention Decouple HTML/CSS
29. 1 Categorization
30. Categorization • Base • Layout • Module • State • Theme
31. Base
32. html { background-color: #FFF; font-family: Arial, Helvetica, sans-serif; font-size: 14px; } body { margin: 0; padding: 0; } h1, h2, h3 { margin: 1em 0; }
33. Layout
35. Sidebar Content Header
39. Module
40. Customized List Button Tabs
48. Sub-modules
49. Large Search Dark Small
52. State
53. Active State Default State Disabled State Default State
54. Theme
58. 2 Naming Convention
59. Naming Convention Naming convention clari es intent
60. Use Class over ID Don’t use a grenade to dig a hole when a shovel will do.
61. .btn {} .btn-large {} .btn-small {} .btn-default {} .btn-search {}
62. .btn {} .is-btn-active {} .is-btn-disabled {}
63. .theme-header {} .theme-border {} .theme-background {}
64. .text-plus1 {} .text-minus1 {}
65. 3 Decoupling CSS from HTML
66. .nav { margin: 0; padding: 0; list-style: none; } .nav li { float: left; } .nav li a { display: block; padding: 5px 10px; background-color: blue; }
67. <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>
68. <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>
69. .nav ul { margin: 0; padding:0; list-style:none; } .nav li li { float: none; } .nav li li a { padding: 2px; background-color: red; }
70. .nav { margin: 0; padding: 0; list-style: none; } .nav > li { float: left; } .nav > li > a { display: block; padding: 5px 10px; background-color: blue; }
71. .menu { margin: 0; padding: 0; list-style: none } .menu > li > a { display: block; padding: 2px; background-color: red; }
72. Please. Use child selectors
73. <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>
74. .box { border: 1px solid #333; } .box h2 { margin: 0; padding: 5px 10px; border-bottom: 1px solid #333; background-color: #CCC; } .box ul { margin: 10px; }
75. <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>
76. .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; }
77. .box { border: 1px solid #333; } .box h2 { margin: 0; padding: 5px 10px; border-bottom: 1px solid #333; background-color: #CCC; } .box-body { margin: 10px; }
78. <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>
79. when the HTML can’t or won’t be predictable Apply a class
80. What does it mean?
81. Shift your thinking
82. Don’t code CSS for the page. Code it for the system.
83. Have your CSS... Do one thing and one thing only
84. State-based Design
85. State-based Design • A layout or module style • Sub-modules • JavaScript-driven states • Pseudo-class states • Media query states
86. CSS Panic http://snk.ms/15
87. .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;
88. .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;
89. .enemys:checked{ overflow:hidden; -webkit-animation-name: none; -webkit-pointer-events: none; pointer-events: none; opacity:0; }
90. .enemys:checked{ overflow:hidden; -webkit-animation-name: none; -webkit-pointer-events: none; pointer-events: none; opacity:0; }
91. 3 Categorization Naming Convention Decouple HTML/CSS
92. GET SMACKED http://smacss.com/