Taming your CSS

A talk on taming your CSS with SMACSS.
Presented at Codeaholics in Hong Kong
on Wednesday 12th December 2012.

http://codeaholics.hk
http://smacss.com

Transcript

1. Taming your CSS Matthew Rudy Jacobs Wednesday 12th December 2012 @ Codeaholics
2. The Problem
4. 䬞ჵ!!!
5. Wild CSS • 81 CSS files • 11 Subdirectories • 6978 lines of CSS • *NO* structure
6. The Solution
8. SMACSS!!!
9. SMACSS Written by Jonathan Snook online at http://smacss.com or to buy from PragProg
10. SMACSS gives us structure
11. Structure • Base styles • Layout styles • Module styles • State styles • Theme styles
12. BLMST!!!
13. Base styles • Reset.css • Default typography • Default colours • Usually just single element selectors
14. Base styles // body body { margin: 0; font-size: 14px; color: $navy; } // headings h1 { text-transform: uppercase; } h1, h2, h3 { font-weight: bold; color: $orange; } // link styles a { color: $ice; } a:hover { color: $navy; }
15. Bootstrap is a good BASE
16. Layout styles • Positioning • Sizing • Layout
17. Layout styles // basic structure #header { position: fixed; top: 0; height: 20px; } #sidebar { float: left; width: 20% } #content { float: right; width: 80% } // grid .row { clear: both; margin-left: -20px; } .span { float: left; margin-left: 20px; } // modals maybe? .modal { position: fixed; z-index: 9999; }
18. Bootstrap is a good LAYOUT
19. Module styles • Distinct visual elements • Correspond to your style guide elements • Submodules should use a prefix • <a class=”btn btn-large” />
20. Module styles // a Module can contain elements .hero-unit { padding: 60px; } .hero-unit h1 { font-size: 60px; } // a Module can have Submodules .btn { display: inline-block; padding: 4px 14px; } .btn-large { padding: 9px 14px; font-size: 16px }
21. Bootstrap has some great MODULES
22. State styles • define state of a Layout or Module • prefixed with “is-” • live with their Layout or Module • correspond to javascript state changes
23. State styles // Layout states .is-collapsed { display: none; } .is-expanded { display: block; } // Module states .is-disabled { background: $grey } .is-active { background-color: $green } // or prefix the Module name .btn-is-disabled { background: $grey } .btn-is-active { background-color: $green }
24. Don’t know what to write here
25. Theme styles • Define distinct changes in the style of the site • User defined styles • Dark or Light
26. Theme styles • Define distinct changes in the style of the site • User defined styles • Dark or Light
27. Theme styles • Define distinct changes in the style of the site • User defined styles • Dark or Light
28. Forget about THEMES for now
29. SMACSS teaches us important practices
30. Avoid Coupling // the base module .well { border: 1px $grey; font-size: 14px; } // this is coupled #sidebar .well { font-size: 12px } // create a sub-module instead .well-small { font-size: 12px; }
31. !important • if you need to use important DON’T • a State is the only excusable use
32. Semantic & Specific // this is bad .hero-unit div { } // this is better .hero-unit .body { } // this is best .hero-unit-body { }
33. Maximum depth of 2 // this is bad .hero-unit header h1 small .icon { } // this is better .hero-unit .header-icon { } // this is worse? .hero-unit-header-icon { }
34. Module Structure // base Module .btn { ... } // Sub Modules .btn-large { ... } // Module states .btn-is-active { ... }
35. Media Queries // define the default display .span { float: left; margin-left: 20px; } // define the changes @media screen and (max-width: 400px) { .span { float: none; display: block; width: 100%; } }
36. Directory Structure base/ forms.css reset.css typography.css layout/ grid.css scaffold.css modules/ buttons.css hero-unit.css themes/ default.css inverted.css
37. Style Guides • a Section for each Module • an example of each State • an example of each Submodule • auto-generate with KSS?
38. You don’t have a style guide?
40. Make One!!!
41. Thanks
42. Check out smacss.com
43. Follow me @matthewrudy
44. See you next Codeaholics!