CSS the right way?

Overview of CSS for modern Web Applications. CSS architecture methodologies and best practices.

Transcript

1. CSS the right way?
3. Michael Lancaster @weblancaster @weblancaster Front End Developer
4. What do you think when you hear the word catastrophe?
6. Code that does not have.. Scalability is a catastrophe Modularity Performance Maintainability Reusability Understanding Flexibility Predictability Consistency
11. CSS bad practices
12. #header { width: 960px; } #aside { width: 260px; float: left; } #content { width: 680px; float: right; } #content #article { width: 100%; padding: 20px; } #content #article #title { font-size: 12px; } #footer{ width: 960px; } Specificity Dude! You are doing it wrong.
13. div#header { width: 960px; } ul#aside { width: 260px; float: left; } ul#aside li.items p.title { text-align: center; font-size: 12px; } div#content div h4 span { font-size: 16px; } Over-qualify Dude! You are doing it wrong.
14. #search .box .lbl .input-txt { width: 250px; } #content div h4 span a { font-size: 16px; } Long-descendants (nesting) Dude! You are doing it wrong.
15. “Don’t style websites. Build Web Applications”
16. The good practices Free tips!
17. • Use classes they are your best friends • Avoid ID’s • Avoid Tag-qualification • Avoid long-descendants (nesting) • Use CSS pre-processors (applying the tips above) • Find patterns on the design and build style guide documentation • Performance matters • Browsers “match” CSS from right to left • Use name convention. CamelCase, camelBack, snake_case. Whatever
19. Bonus
20. Three main CSS Methodologies
21. SMACSS BEM OOCSS
22. SMACSS (Scalable and Modular Architecture for CSS) • Base • Layout • Module • State • Theme
23. Base
24. body { font-size: 62.5%; background: #fff; color: #000; } a { color: #ababab; } a:hover { color: #3a3a3a; } h1, h2, h3 { text-transform: uppercase; }
25. Layout
26. #header, #container, #footer { width: 960px; margin: 0 auto; } #sidebar { width: 300px; float: left; } #content { width: 600px; float: right; }
29. Module
30. .module > h2 { font-size: 22px; color: #ccc; } .module > p { font-size: 12px; color: #333; } .module > strong { text-transform: uppercase; }
32. States
33. .is-hidden { display: none; } .tab { background: #555; color: #fff; } /* overwrite default styling */ .is-tab-active { background: #fff; color: #555; }
36. Themes
37. /* module.css */ .module { background: #333; } .module > p { color: #fff; } /* theme-clean.css */ .module { background: #fff; } .module > p { color: #333; }
38. BEM (Block Element Modifier) • Block • Element • Modifier
40. Block
44. Element
46. /* code example */ <header class="grid-10"> <h1 class="logo">Logo</h1> <ul class="nav"> <li class="nav__item">...</li> <li class="nav__item">...</li> </ul> </header>
47. Modifier
50. /* code example modifier */ <header class="grid-10"> <h1 class="logo">Logo</h1> <ul class="nav nav_theme_clean"> <li class="nav__item nav__item_active">...</li> <li class="nav__item">...</li> </ul> </header>
51. OOCSS (Object Oriented CSS) • Separate structure and skin • Separate Content and Container
53. Objective • Flexibility • Create a component library • Minimize Selectors • Extend objects applying classes • Use consistent styles • Build HTML and style from the component library
54. .header { background: #fbfbfb; width: 960px; box-shadow: 0px 2px 2px #AAA; border: 1px solid #AAA; margin: 10px; } .content { background: #fbfbfb; width: 960px; box-shadow: 0px 2px 2px #AAA; border: 1px solid #AAA; margin: 10px; } .footer { background: #fbfbfb; width: 960px; box-shadow: 0px 2px 2px #AAA; border: 1px solid #AAA; margin: 10px; } not OOCSS
55. .main-theme { background: #fbfbfb; box-shadow: 0px 2px 2px #AAA; border: 1px solid #AAA; } .main-template { width: 960px; margin: 10px; } OOCSS!
56. .bt { border: 1px solid rgba(0, 0, 0, 0.25); color: #444; margin: 0px 5px; height: 29px; width: 65px; padding: 8px 13px; background-image: -webkit-linear-gradient(#ededed, #ededed 38%, #dedede); text-shadow: 0 1px 0 rgb(240, 240, 240); box-shadow: 0 1px 0 rgba(0, 0, 0, 0.08), inset 0 1px 2px rgba(255, 255, 255, 0.75); font-size: 12px; } .bt.bt-dark { -webkit-linear-gradient(#693B3B, #B8B2B2 38%, #dedede); } .bt.bt-big { height: 45px; width: 100px; font-size: 16px; }
57. And what’s the best Methodology? SMACSS? BEM? OOCSS?
58. The one that apply.. Scalability Modularity Performance Maintainability Reusability Understanding Flexibility Predictability Consistency to your team
59. There’s no such thing as “the god master way”. But there’s definitely great practices.
60. Thanks @weblancaster @weblancaster