Avoiding the Threat of Awful CSS

CSS: the very acronym sends shivers down the spine of the most hardened Web design veterans. Even for master pixel pushers who have worked with CSS for years, style sheets can quickly become unruly, unfriendly, and unmaintainable. In this session, you'll find out how to make your CSS more developer-friendly: we'll discuss patterns to cut down on duplication while maintaining flexibility and review whether CSS preprocessors are right for you and your project. All skill levels are welcome!

Transcript

1. Avoiding the Threat of Awful CSS
2. Tim G. Thomas @timgthomas
3. Senior Consultant @ Headspring (Work for us!)
4. The Problem: Maintainability
5. The Solution: Patterns!
6. Developers! Developers! Developers! (Are Good at This)
7. More Maintainable
8. More Consistent
9. Fewer Headaches
10. But How?
11. Two Steps
12. Step 1: Layout First
13. This is Easy*
14. *Not Interesting (For This Talk)
15. Step 2: Write Flexible CSS
16. What makes CSS “"exible”?
17. Flexible CSS is Purposeful
18. Purpose: Site Branding
19. Site Branding === “Global Styles”
20. Global Styles use <elements>
21. Global Styles button { background: #333; border: 1px solid #000; color: #fff; }
22. Everything Else === “Component Styles”
23. Component Styles use .classes
24. Component Styles .contact-list { line-height: 2.0em; list-style: square; padding: 10px 20px 0; }
25. SMACSS(.com)
26. Global Styles => “Base Styles”
27. Component Styles => “Layouts” and “Modules”
28. Layouts are Big Page Parts
30. Layouts in CSS .l-navigation { /* ... */ } .l-hero { /* ... */ } .l-featured { /* ... */ } .l-legal { /* ... */ }
31. Layouts are Unique
32. Modules are Smaller Parts
34. Modules in CSS .featured-list { /* ... */ } .featured-list .title { /* ... */ } .featured-list .item { /* ... */ }
35. Modules are Designed for Reuse
36. Modules are Designed for Relocation
37. Flexible Selectors
38. Flexible Selectors are Short
39. Flexible Selectors: Short header > h1 #main .date span > em { /* Yuck. */ } .meaningful { /* Yum! */ }
40. Flexible Selectors use Elements (for Globals)
41. Flexible Selectors: Elements nav { /* ... */ } button { /* ... */ } input { /* ... */ } aside { /* ... */ }
42. Flexible Selectors use Classes (for everything else)
43. Flexible Selectors: Classes .messages { /* ... */ } .contacts { /* ... */ } .tasks { /* ... */ }
44. Flexible Selectors DO NOT use IDs
45. Flexible Selectors: IDs #im-not-flexible { /* :-( */ } .im-flexible { /* :-) */ }
46. Flexible Selectors aren’t Shared with JavaScript
47. Flexible Selectors: JavaScript $(‘.doSomething’).fadeIn(); .lookLikeSomething { /* ... */ }
48. Flexible CSS is Meaningfully Named
49. Meaningful Names: What Stu# Is
50. Meaningful Names: NOT What Stu# Looks Like
51. NOT Meaningfully Named .lp10 { } .red { } .big-font { }
52. Meaningfully Named .emphasized-list { } .featured-products { } button.primary { }
53. Flexible CSS is Logically Grouped
54. Flexible CSS is LOGICALLY Grouped
55. Logical Groups .green-border { /* Boo! Hiss! */ border: 1px solid #0f0; } .user-selected { /* Yay! */ border: 1px solid #f0f; }
56. Logical Groups Have a Single Reason to Change
57. Logical Groups DO Reduce Duplication
58. Logical Groups MAY Contain Duplicate Styles
59. How to Fix Duplication:
60. How to Fix Duplication: Preprocessors!
61. Preprocessors are Transpilers
62. Preprocessors Turn This… .cohesive-group-a { border: 1px solid #f0f; color: #00f; font: 1.2em/2.4em Comic Sans; } .cohesive-group-b { border: 1px solid #f0f; color: #f00; font: 1.2em/2.4em Comic Sans; }
63. …Into This: .shared-styles { border: 1px solid #f0f; font: 1.2em/2.4em Comic Sans; } .cohesive-group-a { .shared-styles(); color: #00f; } .cohesive-group-b { .shared-styles(); color: #f00; }
64. Other Cool Stu#: Vendor Pre$xes! .scale(scale-amount) { -webkit-transform: scale(scale-amount); -moz-transform: scale(scale-amount); -ms-transform: scale(scale-amount); -o-transform: scale(scale-amount); transform: scale(scale-amount); }
65. Other Cool Stu#: Vendor Pre$xes! .foo { .scale(0.8); } .bar { .scale(0.4); }
66. My Favorite: Nesting! .book-list { .cover { .title { } .author { } } }
67. My Favorite: Nesting! .book-list .cover .title { } .book-list .cover .author { }
68. Preprocessors: LESS and SASS
71. To Review
72. Good CSS is Flexible
73. Flexible CSS Means Patterns
74. Flexible CSS Means Separation of Concerns
75. Flexible CSS Is Helped By SMACSS
76. Flexible CSS Is Helped By Preprocessors
77. Above All: Good CSS is Possible!
78. Above All: Good CSS is Easy!
79. Above All: Good CSS is Fun!
80. Thanks for Coming!
81. Rate meh! http://spkr8.com/t/11651