Help! My Stylesheets are a Mess!

This talk covers the architecture and process we use @ caring.com to manage our stylesheets and front-end design.

1. Help! My Stylesheets are a Mess! Wednesday, May 2, 12
2. Chris Eppstein Architect: Caring.com Creator: Compass Stylesheet Authoring Framework Core Developer: Sass Stylesheet Language @chriseppstein Wednesday, May 2, 12
3. #cleanstyles Wednesday, May 2, 12 If you tweet about this talk, please use the hashtag
4. Assumptions ‣Good at CSS ‣Basic knowledge of Sass ‣Large Website/Application ‣Team-based Development Wednesday, May 2, 12
5. Do your stylesheets feel like this? Incomprehensible wall of tangled styles is incomprehensible Wednesday, May 2, 12
6. You Have One Giant CSS File Wednesday, May 2, 12 organized by comments
7. You Have Thousands of Selectors Wednesday, May 2, 12 with no coherent strategy
8. You Have Styles in the Way Wednesday, May 2, 12 styles from the cascade and document inheritance that are hurting instead of helping
9. You Have Unpredictable Bugs Wednesday, May 2, 12
10. You Have Property Soup Wednesday, May 2, 12
11. You Have Accidentally the Stylesheets Wednesday, May 2, 12 Ended up here because you didn’t have a plan. Because what you need
12. You Need STRUCTURE Wednesday, May 2, 12
13. You Need PATTERNS Wednesday, May 2, 12
14. You Need RULES Wednesday, May 2, 12
15. You Need CLARITY OF INTENT Wednesday, May 2, 12
16. CSS FRAMEWORKS will not solve your problem Wednesday, May 2, 12
17. PRE PROCESSORS will not solve your problem Wednesday, May 2, 12
18. The Problem is Wednesday, May 2, 12
19. The Problem is YOU Wednesday, May 2, 12
20. LOOKING GOOD is not done Wednesday, May 2, 12
21. LOOKING GOOD is not even half done Wednesday, May 2, 12
22. NAME You have to Wednesday, May 2, 12
23. ORGANIZE You have to Wednesday, May 2, 12
24. DISSECT You have to Wednesday, May 2, 12
25. DOCUMENT You have to Wednesday, May 2, 12
26. WORK HARD You have to Wednesday, May 2, 12
27. REFACTOR CONSTANTLY You have to Wednesday, May 2, 12
28. Or Else Your stylesheets will sap your soul of the will to live Wednesday, May 2, 12
29. You need better tools. Wednesday, May 2, 12 Better tools that provide insulation between what you write and what you serve. So that you are free to organize without constraints.
30. Property Soup Le average sass stylesheet. Wednesday, May 2, 12 This is decent sass, could be a lot worse, would be a lot worse in css. but it can be so much better.
31. Constructing an Object Wednesday, May 2, 12 From each category you can usually only pick 1 class to apply to the same element.
32. Constructing an Object Wednesday, May 2, 12 From each category you can usually only pick 1 class to apply to the same element.
33. Constructing an Object Wednesday, May 2, 12 From each category you can usually only pick 1 class to apply to the same element.
34. Constructing an Object Wednesday, May 2, 12 From each category you can usually only pick 1 class to apply to the same element.
35. Constructing an Object Wednesday, May 2, 12 From each category you can usually only pick 1 class to apply to the same element.
36. Constructing an Object Wednesday, May 2, 12 From each category you can usually only pick 1 class to apply to the same element.
37. Constructing an Object Wednesday, May 2, 12 From each category you can usually only pick 1 class to apply to the same element.
38. Constructing an Object Unstyled Background Container Typography Foreground Margin/Padding Wednesday, May 2, 12 From each category you can usually only pick 1 class to apply to the same element.
39. Constructing an Object .calming .shadow-box .reading-text .green-bg-type .vertically-padded Wednesday, May 2, 12 From each category you can usually only pick 1 class to apply to the same element.
40. Property Soup Le average sass stylesheet. Wednesday, May 2, 12 How should we organize our style properties? <wait for it> Alphabetize them! <ayfkm> We can do better than this. We will organize our properties by style concern.
41. Property Soup Le average sass stylesheet. Alphabetized Wednesday, May 2, 12 How should we organize our style properties? <wait for it> Alphabetize them! <ayfkm> We can do better than this. We will organize our properties by style concern.
42. Property Soup Le average sass stylesheet. Alphabetized Wednesday, May 2, 12 How should we organize our style properties? <wait for it> Alphabetize them! <ayfkm> We can do better than this. We will organize our properties by style concern.
43. Typography The non-color aspects of text. Wednesday, May 2, 12 Note how the typography and foreground are mixed up?
44. Typography Typographic properties: font-xxx, line- height, bullets, text-xxx, margin Wednesday, May 2, 12 Explain the placeholder selector
45. Container Not all paddings are from the same concern. Wednesday, May 2, 12
46. Container border, box shadow, padding Wednesday, May 2, 12
47. Background Background - this one is easy :) Wednesday, May 2, 12
48. Foreground border-color, color, shadow-color Wednesday, May 2, 12 you can’t declare text shadow color explicitly, so we have to put all text shadows in the foreground, otherwise the shadow details would be in the typography.
49. Spacers margin & padding on non-typographic elements Wednesday, May 2, 12
50. An Object Description In Sass, we describe objects using words and high-level concepts, not style primitives. Wednesday, May 2, 12 Isn’t this simpler to understand if you’re reading the code? We read code more often than we write it. Be nice to your future self.
51. An Object Description In Sass, we describe objects using words and high-level concepts, not style primitives. Wednesday, May 2, 12 Isn’t this simpler to understand if you’re reading the code? We read code more often than we write it. Be nice to your future self.
52. An Object Description Our object description is longer now. Wednesday, May 2, 12
53. An Object Description Our object description is longer now. Not Re-Usable Re-Usable Wednesday, May 2, 12
54. A Sad Reality If you use @extend like this, your stylesheets will be huge. Wednesday, May 2, 12 So unless you need the flexibility that semantic markup brings for shared content, etc
55. A Sad Reality Classitis provides a better user experience. Wednesday, May 2, 12
56. A Sad Reality Classitis provides a better user experience. Wednesday, May 2, 12
57. We Need Browser Support for @extend Wednesday, May 2, 12 Do this right now. I’ll wait. Now back to the show.
58. More Concepts More Organization But everything has a place. Wednesday, May 2, 12
59. Library: ‣No output. ‣Mostly presentational in nature. Foundation: ‣Core, Shared Styles. ‣Maps Presentation to Domain. Application: ‣Features. ‣One-off Pages. ‣Experimental styles. ‣Server traffic patterns Wednesday, May 2, 12
60. Library: ‣No output. ‣Mostly presentational in nature. Foundation: ‣Core, Shared Styles. ‣Maps Presentation to Domain. Application: ‣Features. ‣One-off Pages. ‣Experimental styles. ‣Server traffic patterns Wednesday, May 2, 12
61. Library: ‣No output. ‣Mostly presentational in nature. Foundation: ‣Core, Shared Styles. ‣Maps Presentation to Domain. Application: ‣Features. ‣One-off Pages. ‣Experimental styles. ‣Server traffic patterns Wednesday, May 2, 12
62. Progression of a Design Wednesday, May 2, 12 This is a generalization, not a rule. Sometimes you skip a step, some concepts never appear in the foundation.
63. Progression of a Design Prototype Variations Multiple Uses Domain Concepts Presentational Concepts Concept App Styles Foundation Classes Mixin Library Wednesday, May 2, 12 This is a generalization, not a rule. Sometimes you skip a step, some concepts never appear in the foundation.
64. Style Concern: Structure • Floated Grid - Provides the structure of a page. CSS3 will bring alternate layout methods. • Page layouts - Defines how primary elements adhere to the grid and respond. Blog Post Wednesday, May 2, 12
65. Wednesday, May 2, 12
66. Wednesday, May 2, 12
67. Wednesday, May 2, 12
68. Wednesday, May 2, 12
69. Wednesday, May 2, 12
70. Wednesday, May 2, 12
71. Wednesday, May 2, 12
72. Wednesday, May 2, 12
73. Wednesday, May 2, 12
74. Style Concern: Structure • Layout - Non-grid based structural patterns. Wednesday, May 2, 12
75. Style Concern: Structure • Layout - Non-grid based structural patterns. Wednesday, May 2, 12
76. Style Concern: Structure • Layout - Non-grid based structural patterns. Wednesday, May 2, 12
77. Style Concern: Structure • Layout - Non-grid based structural patterns. Wednesday, May 2, 12
78. Style Concern: Structure • Layout - Non-grid based structural patterns. Wednesday, May 2, 12
79. Style Concern: Typography • Defines how a collection of typographic elements are styled. • Vertical Rhythm • There is no default typography. Wednesday, May 2, 12 opt-in typography is not the industry standard approach. The industry is mostly wrong about this. Typographic inheritance can be annoying.
80. Style Concern: Typography • Defines how a collection of typographic elements are styled. • Vertical Rhythm • There is no default typography. Opt-in To Typography Wednesday, May 2, 12 opt-in typography is not the industry standard approach. The industry is mostly wrong about this. Typographic inheritance can be annoying.
81. Style Concern: Typography • Defines how a collection of typographic elements are styled. • Vertical Rhythm • There is no default typography. Wednesday, May 2, 12 opt-in typography is not the industry standard approach. The industry is mostly wrong about this. Typographic inheritance can be annoying.
82. Style Concern: Typography • Defines how a collection of typographic elements are styled. • Vertical Rhythm • There is no default typography. Wednesday, May 2, 12 opt-in typography is not the industry standard approach. The industry is mostly wrong about this. Typographic inheritance can be annoying.
83. Style Concern: Container • Define a space using boxes and separators. • Accommodate whatever content you put in them. Wednesday, May 2, 12
84. Style Concern: Container • Define a space using boxes and separators. • Accommodate whatever content you put in them. Wednesday, May 2, 12
85. Style Concern: Container • Define a space using boxes and separators. • Accommodate whatever content you put in them. Wednesday, May 2, 12
86. Style Concern: Container • Define a space using boxes and separators. • Accommodate whatever content you put in them. Wednesday, May 2, 12
87. Style Concern: Spacers • Add space using dimensions from the vertical-rhythm and grid • Margins • Paddings • Un-paddings Wednesday, May 2, 12
88. Style Concern: Spacers • Add space using dimensions from the vertical-rhythm and grid • Margins • Paddings • Un-paddings Wednesday, May 2, 12
89. Style Concern: Spacers • Add space using dimensions from the vertical-rhythm and grid • Margins • Paddings • Un-paddings Wednesday, May 2, 12
90. Style Concern: Background • Gives an area background color, pattern, or imagery. • Combine with any container. Wednesday, May 2, 12
91. Style Concern: Background • Gives an area background color, pattern, or imagery. • Combine with any container. Wednesday, May 2, 12
92. Style Concern: Background • Gives an area background color, pattern, or imagery. • Combine with any container. Wednesday, May 2, 12
93. Style Concern: Foreground • Gives color to type and borders • Often linked to a background Wednesday, May 2, 12 It would be nice if the relationship was .foreground {@extend .background;} but it’s not (1 foreground has many backgrounds). This @extend approach introduces a fair bit of bloat, but it forces consistency. It’s a trade-off you can decide to make or not.
94. Style Concern: Foreground • Gives color to type and borders • Often linked to a background Wednesday, May 2, 12 It would be nice if the relationship was .foreground {@extend .background;} but it’s not (1 foreground has many backgrounds). This @extend approach introduces a fair bit of bloat, but it forces consistency. It’s a trade-off you can decide to make or not.
95. Style Concern: Foreground • Gives color to type and borders • Often linked to a background Wednesday, May 2, 12 It would be nice if the relationship was .foreground {@extend .background;} but it’s not (1 foreground has many backgrounds). This @extend approach introduces a fair bit of bloat, but it forces consistency. It’s a trade-off you can decide to make or not.
96. Style Concern: Foreground • Gives color to type and borders • Often linked to a background Wednesday, May 2, 12 It would be nice if the relationship was .foreground {@extend .background;} but it’s not (1 foreground has many backgrounds). This @extend approach introduces a fair bit of bloat, but it forces consistency. It’s a trade-off you can decide to make or not.
97. Style Concern: Foreground • Gives color to type and borders • Often linked to a background Wednesday, May 2, 12 It would be nice if the relationship was .foreground {@extend .background;} but it’s not (1 foreground has many backgrounds). This @extend approach introduces a fair bit of bloat, but it forces consistency. It’s a trade-off you can decide to make or not.
98. Style Concern: Foreground • Gives color to type and borders • Often linked to a background Wednesday, May 2, 12 It would be nice if the relationship was .foreground {@extend .background;} but it’s not (1 foreground has many backgrounds). This @extend approach introduces a fair bit of bloat, but it forces consistency. It’s a trade-off you can decide to make or not.
99. Style Concern: Foreground • Gives color to type and borders • Often linked to a background Wednesday, May 2, 12 It would be nice if the relationship was .foreground {@extend .background;} but it’s not (1 foreground has many backgrounds). This @extend approach introduces a fair bit of bloat, but it forces consistency. It’s a trade-off you can decide to make or not.
100. Style Concern: Foreground • Gives color to type and borders • Often linked to a background Wednesday, May 2, 12 It would be nice if the relationship was .foreground {@extend .background;} but it’s not (1 foreground has many backgrounds). This @extend approach introduces a fair bit of bloat, but it forces consistency. It’s a trade-off you can decide to make or not.
101. Style Concern: Lists/Tables/Forms • These are unique beasts • Might be part of a typography • Use them semantically • Class on the main element Wednesday, May 2, 12
102. Style Concern: Widgets • Styles for your interactive elements • SMACSS - Jonathan Snook Wednesday, May 2, 12
103. Style Concern: Widgets • Styles for your interactive elements • SMACSS - Jonathan Snook Wednesday, May 2, 12
104. Style Concern: Widgets • Styles for your interactive elements • SMACSS - Jonathan Snook Wednesday, May 2, 12
105. Style Concern: Widgets • Styles for your interactive elements • SMACSS - Jonathan Snook Wednesday, May 2, 12
106. Style Concern: Theming • Color Palette • Semantic Color Relationships • Default Variables • Compile Stylesheet with a different configuration Wednesday, May 2, 12
107. Style Concern: Theming • Color Palette • Semantic Color Relationships • Default Variables • Compile Stylesheet with a different configuration Wednesday, May 2, 12
108. Style Concern: Theming • Color Palette • Semantic Color Relationships • Default Variables • Compile Stylesheet with a different configuration Wednesday, May 2, 12
109. Style Concern: Theming • Color Palette • Semantic Color Relationships • Default Variables • Compile Stylesheet with a different configuration Wednesday, May 2, 12
110. Style Concern: Theming • Color Palette • Semantic Color Relationships • Default Variables • Compile Stylesheet with a different configuration Wednesday, May 2, 12
111. Naming is Hard Wednesday, May 2, 12
112. Naming is a Collaboration Designers must pick or approve the name. Unfortunately, designers are not often good at naming things. Wednesday, May 2, 12 Coders have to name everything they make, but designers don’t. Naming is a skill that must be developed. You have to learn to explain your intuition and instinct.
113. Naming Docent Developers, your job is to help them develop a shared design vocabulary. Wednesday, May 2, 12 If you are a developer and a designer, you now have an excuse for talking to yourself.
114. The Name Game Find a name that describes the intent of a design element, not the appearance. Wednesday, May 2, 12
115. The Name Game A too-specific name is better than a too-generic name. Wednesday, May 2, 12
116. The Name Game Wednesday, May 2, 12 THESAURUS!!!
117. The Name Game Wednesday, May 2, 12 THESAURUS!!!
118. The Name Game Wednesday, May 2, 12 THESAURUS!!!
119. The Name Game Wednesday, May 2, 12 THESAURUS!!!
120. The Name Game Wednesday, May 2, 12 THESAURUS!!!
121. The Name Game Wednesday, May 2, 12 THESAURUS!!!
122. The Name Game Wednesday, May 2, 12 THESAURUS!!!
123. The Name Game Wednesday, May 2, 12 THESAURUS!!!
124. The Name Game Wednesday, May 2, 12 THESAURUS!!!
125. The Name Game Wednesday, May 2, 12 THESAURUS!!!
126. Losing the Name Game Wednesday, May 2, 12 Sometimes you cannot find a good name, or you find some use of a design that doesn’t match the current name.
127. Losing the Name Game Give up: Pick two names Wednesday, May 2, 12 Sometimes you cannot find a good name, or you find some use of a design that doesn’t match the current name.
128. Losing the Name Game Give up: Pick two names Consistency: Change the design Wednesday, May 2, 12 Sometimes you cannot find a good name, or you find some use of a design that doesn’t match the current name.
129. Losing the Name Game Give up: Pick two names Consistency: Change the design Wait: Don’t name it Wednesday, May 2, 12 Sometimes you cannot find a good name, or you find some use of a design that doesn’t match the current name.
130. The Designer Wins Wednesday, May 2, 12 Don’t force a design change just because a name doesn’t match. Intuition is a tricky thing, if you trust your designer, trust their gut feeling. If you don’t trust your designer... :(
131. Classes or IDs? Use IDs for unique page elements. Specificity is good when styling something specific. Wednesday, May 2, 12 not always possible to find a document order. specificity is BETTER than !important. !important is a nuclear option.
132. Specificity Wars Time to Refactor! Wednesday, May 2, 12 Fight the specificity wars, by refactoring; not by rejecting specificity. Document order is not enough. Keep the same order of specificity at the same level of abstraction.
133. Mixin Library The presentational concepts upon which the foundation classes are built. Wednesday, May 2, 12
134. Structure of a Library Module 1.Dependency Imports 2.Variables, almost always defaulted. 3.Functions 4.Mixins 5.Placeholder selectors 6.Style Selectors Wednesday, May 2, 12 Placeholders: only import once or use the mixin hack if your module has these Selectors: Usually don't mix with Functions/mixins/placeholders
135. Read Compass Compass is a Mixin Library Wednesday, May 2, 12
136. Breaking the Rules ‣Experiment with new designs ‣Accommodate non-conforming design. ‣Build what you need today ‣Meet your deadlines ‣Diligently factor out what is common Wednesday, May 2, 12
137. Documentation ‣It's better to show than to tell. ‣Make a living styleguide for documentation and prototyping. ‣This is your design catalog. ‣Teach the design, don't just exemplify it. Wednesday, May 2, 12
138. Downsides ‣Learning curve ‣Harder to debug ‣Classitis ‣A lot of work Wednesday, May 2, 12 1-2 days of training to become capable. 3-4 weeks to be competent. It will take > 1 month for an experienced team to build a comprehensive styleguide.
139. Benefits Everything has a place Wednesday, May 2, 12
140. Benefits Filesize Wednesday, May 2, 12 Better factorization => less duplication
141. Benefits Efficient communication Wednesday, May 2, 12 More efficient team thru better communication thanks to new vocabulary. completely Describing a page design can be done in ~5 minutes.
142. Benefits Low Coupling Wednesday, May 2, 12 a clean separation in responsibilities, means changes breaks things less often in unexpected ways
143. Benefits Built to last Wednesday, May 2, 12 These styles will be used for > 2 years. These styles will be used by a team. For the love of god, don't do this for your blog or a marketing/promotional site.
144. Thank you! Compass is Charityware. Please donate on our behalf to the United Mitochondrial Disease Foundation http://umdf.org/compass Wednesday, May 2, 12