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

FOWD: Stylesheet Organization with Sass

FOWD: Stylesheet Organization with Sass

Chris Eppstein

May 16, 2012
Tweet

More Decks by Chris Eppstein

Other Decks in Technology

Transcript

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  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

    View full-size slide

  6. Caring.com
    A case study
    Wednesday, May 16, 12

    View full-size slide

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

    View full-size slide

  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.

    View full-size slide

  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.

    View full-size slide

  10. Enough was Enough
    Hired Director of UX
    @shodoshan
    Wednesday, May 16, 12

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  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.

    View full-size slide

  14. New Approach
    ‣Consistency over Flexibility
    ‣Optimize Development
    ‣Grow the Team
    Wednesday, May 16, 12

    View full-size slide


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

    View full-size slide

  16. +

    .styles { ...}
    =
    Wednesday, May 16, 12

    View full-size slide

  17. +

    .unique { ...}
    =
    .foundational { ...}
    Wednesday, May 16, 12

    View full-size slide

  18. +

    .unique { ...}
    =
    .foundational { ...}
    +
    Wednesday, May 16, 12

    View full-size slide

  19. +

    .unique { ...}
    =
    .foundational { ...}
    +
    Wednesday, May 16, 12

    View full-size slide

  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.

    View full-size slide

  21. You Have
    Thousands of Selectors
    Wednesday, May 16, 12
    with no coherent strategy

    View full-size slide

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

    View full-size slide

  23. You Have
    Unpredictable Bugs
    Wednesday, May 16, 12

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  26. You Need
    STRUCTURE
    Wednesday, May 16, 12

    View full-size slide

  27. You Need
    PATTERNS
    Wednesday, May 16, 12

    View full-size slide

  28. You Need
    RULES
    Wednesday, May 16, 12

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  32. The Problem is
    Wednesday, May 16, 12

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  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

    View full-size slide

  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.

    View full-size slide

  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.

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  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.

    View full-size slide

  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.

    View full-size slide

  54. Property Soup Le average sass stylesheet.
    Wednesday, May 16, 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 full-size slide

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

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

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  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.

    View full-size slide

  63. Spacers margin & padding on non-typographic
    elements
    Wednesday, May 16, 12

    View full-size slide

  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.

    View full-size slide

  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.

    View full-size slide

  66. An Object Description Our object description is longer now.
    Wednesday, May 16, 12

    View full-size slide

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

    View full-size slide

  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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  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

    View full-size slide

  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

    View full-size slide

  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

    View full-size slide

  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

    View full-size slide

  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.

    View full-size slide

  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.

    View full-size slide

  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

    View full-size slide

  79. Wednesday, May 16, 12

    View full-size slide

  80. Wednesday, May 16, 12

    View full-size slide

  81. Wednesday, May 16, 12

    View full-size slide

  82. Wednesday, May 16, 12

    View full-size slide

  83. Wednesday, May 16, 12

    View full-size slide

  84. Wednesday, May 16, 12

    View full-size slide

  85. Wednesday, May 16, 12

    View full-size slide

  86. Wednesday, May 16, 12

    View full-size slide

  87. Wednesday, May 16, 12

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  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.

    View full-size slide

  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.

    View full-size slide

  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.

    View full-size slide

  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.

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  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.

    View full-size slide

  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.

    View full-size slide

  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.

    View full-size slide

  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.

    View full-size slide

  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.

    View full-size slide

  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.

    View full-size slide

  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.

    View full-size slide

  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.

    View full-size slide

  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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  125. Naming is Hard
    http://funnyphotosto.com/wp-content/uploads/2012/03/12/screaming.„g
    Wednesday, May 16, 12

    View full-size slide

  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.

    View full-size slide

  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.

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  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.

    View full-size slide

  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.

    View full-size slide

  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.

    View full-size slide

  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.

    View full-size slide

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

    View full-size slide

  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.

    View full-size slide

  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.

    View full-size slide

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

    View full-size slide

  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

    View full-size slide

  149. Read Compass
    Compass is a Mixin Library
    Wednesday, May 16, 12

    View full-size slide

  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

    View full-size slide

  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

    View full-size slide

  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.

    View full-size slide

  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

    View full-size slide

  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.

    View full-size slide

  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.

    View full-size slide

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

    View full-size slide

  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

    View full-size slide

  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

    View full-size slide