Pro Yearly is on sale from $80 to $50! »

FOWD: Stylesheet Organization with Sass

FOWD: Stylesheet Organization with Sass

723ee972f9e5078aeda85cdf0db3f3c8?s=128

Chris Eppstein

May 16, 2012
Tweet

Transcript

  1. Help! My Stylesheets are a Mess! http://www.flickr.com/photos/29541077@N00/4711956912/ Wednesday, May 16,

    12
  2. Chris Eppstein Architect: Caring.com Creator: Compass Stylesheet Authoring Framework Core

    Developer: Sass Stylesheet Language @chriseppstein Wednesday, May 16, 12
  3. #cleanstyles Wednesday, May 16, 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 16, 12
  5. Do your stylesheets feel like this? Incomprehensible wall of tangled

    styles is incomprehensible http://wikibon.org/blog/wp-content/uploads/2011/10/5.„eg Wednesday, May 16, 12
  6. Caring.com A case study Wednesday, May 16, 12

  7. Caring.com Four Designs in Four Years. Wednesday, May 16, 12

    each with their own evolution
  8. Caring.com Four Designers in Four Years. Wednesday, May 16, 12

    Like most startups we were moving fast. We knew we hadn’t found the right tone, design, resonance with our user base.
  9. Sass: A double edged sword 3.5 MB of CSS across

    100+ files Wednesday, May 16, 12 This would be insanity if it was hand authored CSS, but sass let us keep it manageable while we were learning, evolving, looking for product/market fit.
  10. Enough was Enough Hired Director of UX @shodoshan Wednesday, May

    16, 12
  11. Enough was Enough Visual Design Firm @tractorstudios Wednesday, May 16,

    12
  12. Enough was Enough New Product Wednesday, May 16, 12

  13. We found it! Our users loved the new design. http://newplateaus.areavoices.com/2012/05/01/are-older-people-happier/

    Wednesday, May 16, 12 Finally we’re getting thank you letters and people get upset if our site goes down.
  14. New Approach ‣Consistency over Flexibility ‣Optimize Development ‣Grow the Team

    Wednesday, May 16, 12
  15. <markup> .styles { ...} + = + + Wednesday, May

    16, 12
  16. + <markup> .styles { ...} = Wednesday, May 16, 12

  17. + <markup> .unique { ...} = .foundational { ...} Wednesday,

    May 16, 12
  18. + <markup> .unique { ...} = .foundational { ...} +

    Wednesday, May 16, 12
  19. + <markup> .unique { ...} = .foundational { ...} +

    Wednesday, May 16, 12
  20. .foundational { ...} Wednesday, May 16, 12 We built a

    living styleguide. In this talk, I’m going to explain the process we used to create it.
  21. You Have Thousands of Selectors Wednesday, May 16, 12 with

    no coherent strategy
  22. You Have Styles in the Way Wednesday, May 16, 12

    styles from the cascade and document inheritance that are hurting instead of helping
  23. You Have Unpredictable Bugs Wednesday, May 16, 12

  24. You Have Property Soup Wednesday, May 16, 12

  25. You Have Accidentally the Stylesheets Wednesday, May 16, 12 Ended

    up here because you didn’t have a plan. Because what you need
  26. You Need STRUCTURE Wednesday, May 16, 12

  27. You Need PATTERNS Wednesday, May 16, 12

  28. You Need RULES Wednesday, May 16, 12

  29. You Need CLARITY OF INTENT Wednesday, May 16, 12

  30. CSS FRAMEWORKS will not solve your problem Wednesday, May 16,

    12
  31. PRE PROCESSORS will not solve your problem Wednesday, May 16,

    12
  32. The Problem is Wednesday, May 16, 12

  33. The Problem is YOU Wednesday, May 16, 12

  34. LOOKING GOOD is not done Wednesday, May 16, 12

  35. LOOKING GOOD is not even half done Wednesday, May 16,

    12
  36. NAME You have to Wednesday, May 16, 12

  37. ORGANIZE You have to Wednesday, May 16, 12

  38. DISSECT You have to Wednesday, May 16, 12

  39. DOCUMENT You have to Wednesday, May 16, 12

  40. WORK HARD You have to Wednesday, May 16, 12

  41. REFACTOR CONSTANTLY You have to Wednesday, May 16, 12

  42. Or Else Your stylesheets will sap the will to live

    from your soul http://wikibon.org/blog/wp-content/uploads/2011/10/5.„eg Wednesday, May 16, 12
  43. You need better tools. Wednesday, May 16, 12 Better tools

    that provide insulation between what you write and what you serve. So that you are free to organize without constraints.
  44. Property Soup Le average sass stylesheet. Wednesday, May 16, 12

    This is decent sass, could be a lot worse, would be a lot worse in css. but it can be so much better.
  45. Constructing an Object Wednesday, May 16, 12 From each category

    you can usually only pick 1 class to apply to the same element.
  46. Constructing an Object Wednesday, May 16, 12 From each category

    you can usually only pick 1 class to apply to the same element.
  47. Constructing an Object Wednesday, May 16, 12 From each category

    you can usually only pick 1 class to apply to the same element.
  48. Constructing an Object Wednesday, May 16, 12 From each category

    you can usually only pick 1 class to apply to the same element.
  49. Constructing an Object Wednesday, May 16, 12 From each category

    you can usually only pick 1 class to apply to the same element.
  50. Constructing an Object Wednesday, May 16, 12 From each category

    you can usually only pick 1 class to apply to the same element.
  51. Constructing an Object Wednesday, May 16, 12 From each category

    you can usually only pick 1 class to apply to the same element.
  52. Constructing an Object Unstyled Background Container Typography Foreground Margin/Padding Wednesday,

    May 16, 12 From each category you can usually only pick 1 class to apply to the same element.
  53. Constructing an Object .calming .shadow-box .reading-text .green-bg-type .vertically-padded Wednesday, May

    16, 12 From each category you can usually only pick 1 class to apply to the same element.
  54. Property Soup Le average sass stylesheet. Wednesday, May 16, 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.
  55. Property Soup Le average sass stylesheet. Alphabetized Wednesday, May 16,

    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.
  56. Property Soup Le average sass stylesheet. Alphabetized Wednesday, May 16,

    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.
  57. Typography The non-color aspects of text. Wednesday, May 16, 12

    Note how the typography and foreground are mixed up?
  58. Typography Typographic properties: font-xxx, line- height, bullets, text-xxx, margin Wednesday,

    May 16, 12 Explain the placeholder selector
  59. Container Not all paddings are from the same concern. Wednesday,

    May 16, 12
  60. Container border, box shadow, padding Wednesday, May 16, 12

  61. Background Background - this one is easy :) Wednesday, May

    16, 12
  62. Foreground border-color, color, shadow-color Wednesday, May 16, 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.
  63. Spacers margin & padding on non-typographic elements Wednesday, May 16,

    12
  64. An Object Description In Sass, we describe objects using words

    and high-level concepts, not style primitives. Wednesday, May 16, 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.
  65. An Object Description In Sass, we describe objects using words

    and high-level concepts, not style primitives. Wednesday, May 16, 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.
  66. An Object Description Our object description is longer now. Wednesday,

    May 16, 12
  67. An Object Description Our object description is longer now. Not

    Re-Usable Re-Usable Wednesday, May 16, 12
  68. A Sad Reality If you use @extend like this, your

    stylesheets will be huge. Wednesday, May 16, 12 So unless you need the flexibility that semantic markup brings for shared content, etc
  69. A Sad Reality Classitis provides a better user experience. Wednesday,

    May 16, 12
  70. A Sad Reality Classitis provides a better user experience. Wednesday,

    May 16, 12
  71. We Need Browser Support for @extend Wednesday, May 16, 12

    Do this right now. I’ll wait. Now back to the show.
  72. More Concepts More Organization But everything has a place. http://www.ultracraft.com/system/accessories/0000/0425/Drawer-Organizer-Metal_full.„g

    Wednesday, May 16, 12
  73. 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 16, 12
  74. 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 16, 12
  75. 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 16, 12
  76. Progression of a Design Prototype Variations Multiple Uses Domain Concepts

    Presentational Concepts Concept App Styles Foundation Classes Mixin Library Wednesday, May 16, 12 This is a generalization, not a rule. Sometimes you skip a step, some concepts never appear in the foundation.
  77. Progression of a Design Prototype Variations Multiple Uses Domain Concepts

    Presentational Concepts Concept App Styles Foundation Classes Mixin Library Wednesday, May 16, 12 This is a generalization, not a rule. Sometimes you skip a step, some concepts never appear in the foundation.
  78. 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 16, 12
  79. Wednesday, May 16, 12

  80. Wednesday, May 16, 12

  81. Wednesday, May 16, 12

  82. Wednesday, May 16, 12

  83. Wednesday, May 16, 12

  84. Wednesday, May 16, 12

  85. Wednesday, May 16, 12

  86. Wednesday, May 16, 12

  87. Wednesday, May 16, 12

  88. Style Concern: Structure • Layout - Non-grid based structural patterns.

    Wednesday, May 16, 12
  89. Style Concern: Structure • Layout - Non-grid based structural patterns.

    Wednesday, May 16, 12
  90. Style Concern: Structure • Layout - Non-grid based structural patterns.

    Wednesday, May 16, 12
  91. Style Concern: Structure • Layout - Non-grid based structural patterns.

    Wednesday, May 16, 12
  92. Style Concern: Structure • Layout - Non-grid based structural patterns.

    Wednesday, May 16, 12
  93. Style Concern: Typography • Defines how a collection of typographic

    elements are styled. • Vertical Rhythm • There is no default typography. Wednesday, May 16, 12 opt-in typography is not the industry standard approach. The industry is mostly wrong about this. Typographic inheritance can be annoying.
  94. 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 16, 12 opt-in typography is not the industry standard approach. The industry is mostly wrong about this. Typographic inheritance can be annoying.
  95. Style Concern: Typography • Defines how a collection of typographic

    elements are styled. • Vertical Rhythm • There is no default typography. Wednesday, May 16, 12 opt-in typography is not the industry standard approach. The industry is mostly wrong about this. Typographic inheritance can be annoying.
  96. Style Concern: Typography • Defines how a collection of typographic

    elements are styled. • Vertical Rhythm • There is no default typography. Wednesday, May 16, 12 opt-in typography is not the industry standard approach. The industry is mostly wrong about this. Typographic inheritance can be annoying.
  97. Style Concern: Container • Define a space using boxes and

    separators. • Accommodate whatever content you put in them. Wednesday, May 16, 12
  98. Style Concern: Container • Define a space using boxes and

    separators. • Accommodate whatever content you put in them. Wednesday, May 16, 12
  99. Style Concern: Container • Define a space using boxes and

    separators. • Accommodate whatever content you put in them. Wednesday, May 16, 12
  100. Style Concern: Container • Define a space using boxes and

    separators. • Accommodate whatever content you put in them. Wednesday, May 16, 12
  101. Style Concern: Spacers • Add space using dimensions from the

    vertical-rhythm and grid • Margins • Paddings • Un-paddings Wednesday, May 16, 12
  102. Style Concern: Spacers • Add space using dimensions from the

    vertical-rhythm and grid • Margins • Paddings • Un-paddings Wednesday, May 16, 12
  103. Style Concern: Spacers • Add space using dimensions from the

    vertical-rhythm and grid • Margins • Paddings • Un-paddings Wednesday, May 16, 12
  104. Style Concern: Background • Gives an area background color, pattern,

    or imagery. • Combine with any container. Wednesday, May 16, 12
  105. Style Concern: Background • Gives an area background color, pattern,

    or imagery. • Combine with any container. Wednesday, May 16, 12
  106. Style Concern: Background • Gives an area background color, pattern,

    or imagery. • Combine with any container. Wednesday, May 16, 12
  107. Style Concern: Foreground • Gives color to type and borders

    • Often linked to a background Wednesday, May 16, 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.
  108. Style Concern: Foreground • Gives color to type and borders

    • Often linked to a background Wednesday, May 16, 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.
  109. Style Concern: Foreground • Gives color to type and borders

    • Often linked to a background Wednesday, May 16, 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.
  110. Style Concern: Foreground • Gives color to type and borders

    • Often linked to a background Wednesday, May 16, 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.
  111. Style Concern: Foreground • Gives color to type and borders

    • Often linked to a background Wednesday, May 16, 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.
  112. Style Concern: Foreground • Gives color to type and borders

    • Often linked to a background Wednesday, May 16, 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.
  113. Style Concern: Foreground • Gives color to type and borders

    • Often linked to a background Wednesday, May 16, 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.
  114. Style Concern: Foreground • Gives color to type and borders

    • Often linked to a background Wednesday, May 16, 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.
  115. 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 16, 12
  116. Style Concern: Widgets • Styles for your interactive elements •

    SMACSS - Jonathan Snook Wednesday, May 16, 12
  117. Style Concern: Widgets • Styles for your interactive elements •

    SMACSS - Jonathan Snook Wednesday, May 16, 12
  118. Style Concern: Widgets • Styles for your interactive elements •

    SMACSS - Jonathan Snook Wednesday, May 16, 12
  119. Style Concern: Widgets • Styles for your interactive elements •

    SMACSS - Jonathan Snook Wednesday, May 16, 12
  120. Style Concern: Theming • Color Palette • Semantic Color Relationships

    • Default Variables • Compile Stylesheet with a different configuration Wednesday, May 16, 12
  121. Style Concern: Theming • Color Palette • Semantic Color Relationships

    • Default Variables • Compile Stylesheet with a different configuration Wednesday, May 16, 12
  122. Style Concern: Theming • Color Palette • Semantic Color Relationships

    • Default Variables • Compile Stylesheet with a different configuration Wednesday, May 16, 12
  123. Style Concern: Theming • Color Palette • Semantic Color Relationships

    • Default Variables • Compile Stylesheet with a different configuration Wednesday, May 16, 12
  124. Style Concern: Theming • Color Palette • Semantic Color Relationships

    • Default Variables • Compile Stylesheet with a different configuration Wednesday, May 16, 12
  125. Naming is Hard http://funnyphotosto.com/wp-content/uploads/2012/03/12/screaming.„g Wednesday, May 16, 12

  126. Naming is a Collaboration Designers must pick or approve the

    name. Unfortunately, designers are not often good at naming things. Wednesday, May 16, 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.
  127. Naming Docent Developers, your job is to help them develop

    a shared design vocabulary. Wednesday, May 16, 12 If you are a developer and a designer, you now have an excuse for talking to yourself.
  128. The Name Game Find a name that describes the intent

    of a design element, not the appearance. Wednesday, May 16, 12
  129. The Name Game A too-specific name is better than a

    too-generic name. Wednesday, May 16, 12
  130. The Name Game Wednesday, May 16, 12 THESAURUS!!!

  131. The Name Game Wednesday, May 16, 12 THESAURUS!!!

  132. The Name Game Wednesday, May 16, 12 THESAURUS!!!

  133. The Name Game Wednesday, May 16, 12 THESAURUS!!!

  134. The Name Game Wednesday, May 16, 12 THESAURUS!!!

  135. The Name Game Wednesday, May 16, 12 THESAURUS!!!

  136. The Name Game Wednesday, May 16, 12 THESAURUS!!!

  137. The Name Game Wednesday, May 16, 12 THESAURUS!!!

  138. The Name Game Wednesday, May 16, 12 THESAURUS!!!

  139. The Name Game Wednesday, May 16, 12 THESAURUS!!!

  140. Losing the Name Game Wednesday, May 16, 12 Sometimes you

    cannot find a good name, or you find some use of a design that doesn’t match the current name.
  141. Losing the Name Game Give up: Pick two names Wednesday,

    May 16, 12 Sometimes you cannot find a good name, or you find some use of a design that doesn’t match the current name.
  142. Losing the Name Game Give up: Pick two names Consistency:

    Change the design Wednesday, May 16, 12 Sometimes you cannot find a good name, or you find some use of a design that doesn’t match the current name.
  143. Losing the Name Game Give up: Pick two names Consistency:

    Change the design Wait: Don’t name it Wednesday, May 16, 12 Sometimes you cannot find a good name, or you find some use of a design that doesn’t match the current name.
  144. The Designer Wins http://blog.hubspot.com/Portals/53/images/charlie-sheen-winning.png Wednesday, May 16, 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... :(
  145. Classes or IDs? Use IDs for unique page elements. Specificity

    is good when styling something specific. Wednesday, May 16, 12 not always possible to find a document order. specificity is BETTER than !important. !important is a nuclear option.
  146. Specificity Wars Time to Refactor! Wednesday, May 16, 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.
  147. Mixin Library The presentational concepts upon which the foundation classes

    are built. Wednesday, May 16, 12
  148. 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 16, 12 Placeholders: only import once or use the mixin hack if your module has these Selectors: Usually don't mix with Functions/mixins/placeholders
  149. Read Compass Compass is a Mixin Library Wednesday, May 16,

    12
  150. 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 16, 12
  151. 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 16, 12
  152. Downsides ‣Learning curve ‣Harder to debug ‣Classitis ‣A lot of

    work Wednesday, May 16, 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.
  153. Benefits Everything has a place http://www.tsf.net.au/gallery/var/albums/Tidy-Cabling/46-cluster_back2.„g?m=1294131614 Wednesday, May 16, 12

  154. Benefits File Size 3.5 MB 1.2 MB Wednesday, May 16,

    12 Better factorization => less duplication. 2/3 reduction of total site-wide styles.
  155. Benefits Efficient communication Wednesday, May 16, 12 More efficient team

    thru better communication thanks to new vocabulary. completely Describing a page design can be done in ~15 minutes.
  156. Benefits Low Coupling Wednesday, May 16, 12 a clean separation

    in responsibilities, means changes breaks things less often in unexpected ways
  157. Benefits Built to last http://www.flickr.com/photos/wilhelmja/4233621517/ Wednesday, May 16, 12 Ok.

    Pyramids are probably a bit of an exagguration. These styles will be used and evolved for several years -- an eternity on the internet. These styles will be used by a team. For the love of god, don't do
  158. Thank you! Compass is Charityware. Please donate on our behalf

    to the United Mitochondrial Disease Foundation http://umdf.org/compass Wednesday, May 16, 12