Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Help! My Stylesheets are a Mess!

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.

Chris Eppstein

May 02, 2012
Tweet

More Decks by Chris Eppstein

Other Decks in Technology

Transcript

  1. Help!
    My Stylesheets are a Mess!
    Wednesday, May 2, 12

    View Slide

  2. Chris
    Eppstein
    Architect: Caring.com
    Creator: Compass Stylesheet
    Authoring Framework
    Core Developer: Sass Stylesheet
    Language
    @chriseppstein
    Wednesday, May 2, 12

    View Slide

  3. #cleanstyles
    Wednesday, May 2, 12
    If you tweet about this talk, please use the hashtag

    View Slide

  4. Assumptions
    ‣Good at CSS
    ‣Basic knowledge of Sass
    ‣Large Website/Application
    ‣Team-based Development
    Wednesday, May 2, 12

    View Slide

  5. Do your
    stylesheets
    feel like this?
    Incomprehensible
    wall of
    tangled styles
    is
    incomprehensible
    Wednesday, May 2, 12

    View Slide

  6. You Have
    One Giant CSS File
    Wednesday, May 2, 12
    organized by comments

    View Slide

  7. You Have
    Thousands of Selectors
    Wednesday, May 2, 12
    with no coherent strategy

    View Slide

  8. You Have
    Styles in the Way
    Wednesday, May 2, 12
    styles from the cascade and document inheritance that are hurting instead of helping

    View Slide

  9. You Have
    Unpredictable Bugs
    Wednesday, May 2, 12

    View Slide

  10. You Have
    Property Soup
    Wednesday, May 2, 12

    View Slide

  11. You Have
    Accidentally the Stylesheets
    Wednesday, May 2, 12
    Ended up here because you didn’t have a plan. Because what you need

    View Slide

  12. You Need
    STRUCTURE
    Wednesday, May 2, 12

    View Slide

  13. You Need
    PATTERNS
    Wednesday, May 2, 12

    View Slide

  14. You Need
    RULES
    Wednesday, May 2, 12

    View Slide

  15. You Need
    CLARITY OF
    INTENT
    Wednesday, May 2, 12

    View Slide

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

    View Slide

  17. PRE
    PROCESSORS
    will not solve your problem
    Wednesday, May 2, 12

    View Slide

  18. The Problem is
    Wednesday, May 2, 12

    View Slide

  19. The Problem is
    YOU
    Wednesday, May 2, 12

    View Slide

  20. LOOKING GOOD
    is not
    done
    Wednesday, May 2, 12

    View Slide

  21. LOOKING GOOD
    is not even
    half done
    Wednesday, May 2, 12

    View Slide

  22. NAME
    You have to
    Wednesday, May 2, 12

    View Slide

  23. ORGANIZE
    You have to
    Wednesday, May 2, 12

    View Slide

  24. DISSECT
    You have to
    Wednesday, May 2, 12

    View Slide

  25. DOCUMENT
    You have to
    Wednesday, May 2, 12

    View Slide

  26. WORK HARD
    You have to
    Wednesday, May 2, 12

    View Slide

  27. REFACTOR
    CONSTANTLY
    You have to
    Wednesday, May 2, 12

    View Slide

  28. Or Else
    Your stylesheets
    will sap your soul
    of the will to live
    Wednesday, May 2, 12

    View Slide

  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.

    View Slide

  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.

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  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.

    View Slide

  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.

    View Slide

  40. Property Soup Le average sass stylesheet.
    Wednesday, May 2, 12
    How should we organize our style properties? Alphabetize them! We
    can do better than this. We will organize our properties by style concern.

    View Slide

  41. Property Soup Le average sass stylesheet.
    Alphabetized
    Wednesday, May 2, 12
    How should we organize our style properties? Alphabetize them! We
    can do better than this. We will organize our properties by style concern.

    View Slide

  42. Property Soup Le average sass stylesheet.
    Alphabetized
    Wednesday, May 2, 12
    How should we organize our style properties? Alphabetize them! We
    can do better than this. We will organize our properties by style concern.

    View Slide

  43. Typography The non-color aspects of text.
    Wednesday, May 2, 12
    Note how the typography and foreground are mixed up?

    View Slide

  44. Typography Typographic properties: font-xxx, line-
    height, bullets, text-xxx, margin
    Wednesday, May 2, 12
    Explain the placeholder selector

    View Slide

  45. Container Not all paddings are from the same
    concern.
    Wednesday, May 2, 12

    View Slide

  46. Container border, box shadow, padding
    Wednesday, May 2, 12

    View Slide

  47. Background Background - this one is easy :)
    Wednesday, May 2, 12

    View Slide

  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.

    View Slide

  49. Spacers margin & padding on non-typographic
    elements
    Wednesday, May 2, 12

    View Slide

  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.

    View Slide

  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.

    View Slide

  52. An Object Description Our object description is longer now.
    Wednesday, May 2, 12

    View Slide

  53. An Object Description Our object description is longer now.
    Not Re-Usable
    Re-Usable
    Wednesday, May 2, 12

    View Slide

  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

    View Slide

  55. A Sad Reality Classitis provides a better user
    experience.
    Wednesday, May 2, 12

    View Slide

  56. A Sad Reality Classitis provides a better user
    experience.
    Wednesday, May 2, 12

    View Slide

  57. We Need Browser
    Support for @extend
    Wednesday, May 2, 12
    Do this right now. I’ll wait. Now back to the show.

    View Slide

  58. More
    Concepts
    More Organization
    But everything has
    a place.
    Wednesday, May 2, 12

    View Slide

  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

    View Slide

  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

    View Slide

  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

    View Slide

  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.

    View Slide

  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.

    View Slide

  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

    View Slide

  65. Wednesday, May 2, 12

    View Slide

  66. Wednesday, May 2, 12

    View Slide

  67. Wednesday, May 2, 12

    View Slide

  68. Wednesday, May 2, 12

    View Slide

  69. Wednesday, May 2, 12

    View Slide

  70. Wednesday, May 2, 12

    View Slide

  71. Wednesday, May 2, 12

    View Slide

  72. Wednesday, May 2, 12

    View Slide

  73. Wednesday, May 2, 12

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  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.

    View Slide

  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.

    View Slide

  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.

    View Slide

  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.

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  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.

    View Slide

  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.

    View Slide

  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.

    View Slide

  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.

    View Slide

  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.

    View Slide

  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.

    View Slide

  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.

    View Slide

  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.

    View Slide

  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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  111. Naming is Hard
    Wednesday, May 2, 12

    View Slide

  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.

    View Slide

  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.

    View Slide

  114. The Name Game
    Find a name that
    describes the intent of a design
    element, not the appearance.
    Wednesday, May 2, 12

    View Slide

  115. The Name Game
    A too-specific name is
    better than a too-generic name.
    Wednesday, May 2, 12

    View Slide

  116. The Name Game
    Wednesday, May 2, 12
    THESAURUS!!!

    View Slide

  117. The Name Game
    Wednesday, May 2, 12
    THESAURUS!!!

    View Slide

  118. The Name Game
    Wednesday, May 2, 12
    THESAURUS!!!

    View Slide

  119. The Name Game
    Wednesday, May 2, 12
    THESAURUS!!!

    View Slide

  120. The Name Game
    Wednesday, May 2, 12
    THESAURUS!!!

    View Slide

  121. The Name Game
    Wednesday, May 2, 12
    THESAURUS!!!

    View Slide

  122. The Name Game
    Wednesday, May 2, 12
    THESAURUS!!!

    View Slide

  123. The Name Game
    Wednesday, May 2, 12
    THESAURUS!!!

    View Slide

  124. The Name Game
    Wednesday, May 2, 12
    THESAURUS!!!

    View Slide

  125. The Name Game
    Wednesday, May 2, 12
    THESAURUS!!!

    View Slide

  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.

    View Slide

  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.

    View Slide

  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.

    View Slide

  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.

    View Slide

  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... :(

    View Slide

  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.

    View Slide

  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.

    View Slide

  133. Mixin Library
    The presentational concepts upon
    which the foundation classes are built.
    Wednesday, May 2, 12

    View Slide

  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

    View Slide

  135. Read Compass
    Compass is a Mixin Library
    Wednesday, May 2, 12

    View Slide

  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

    View Slide

  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

    View Slide

  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.

    View Slide

  139. Benefits
    Everything has a place
    Wednesday, May 2, 12

    View Slide

  140. Benefits
    Filesize
    Wednesday, May 2, 12
    Better factorization => less duplication

    View Slide

  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.

    View Slide

  142. Benefits
    Low Coupling
    Wednesday, May 2, 12
    a clean separation in responsibilities, means changes breaks things less often in unexpected
    ways

    View Slide

  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.

    View Slide

  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

    View Slide