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

CSS Architecture

Beau Smith
January 10, 2013

CSS Architecture

How to write CSS to be predictable, reusable, maintainable, and scaleable.

Created for @Square Code Camp

Beau Smith

January 10, 2013
Tweet

More Decks by Beau Smith

Other Decks in Design

Transcript

  1. Beau Smith
    interface design & dev

    View full-size slide

  2. Good at CSS? HTML5
    Photoshop →
    JavaScript
    @media queries
    CSS3
    Browser differences
    no s for layout

    View full-size slide

  3. Good at {programming lang}?
    extensible
    readable code
    functions
    decoupled from main app
    modular
    abstract
    easy to change or extend
    scalable
    object-oriented
    DRY

    View full-size slide


  4. Lorem ipsum dolor.

    div {
    color: fuschia;
    }

    View full-size slide


  5. Lorem ipsum dolor.

    .foo {
    color: fuschia;
    }

    View full-size slide

  6. CSS Architecture

    View full-size slide

  7. The Goals
    of Good CSS Architecture

    View full-size slide

  8. Predictable
    Reusable
    Maintainable
    Scaleable

    View full-size slide

  9. Maintainable

    View full-size slide

  10. Predictable
    Reusable
    Maintainable
    Scaleable

    View full-size slide

  11. Common Practices
    =(

    View full-size slide

  12. Modifying
    components
    based upon
    their parent
    elements
    .widget {
    width: 200px;
    background: yellow;
    border: 1px solid black;
    color: black;
    }
    #sidebar .widget {
    width: 100px;
    }
    body.homepage .widget {
    background: white;
    }
    ☐ Predictable
    ☐ Reusable
    ☐ Maintainable
    ☐ Scaleable

    View full-size slide

  13. Soware entities (classes, modules, functions,
    etc.) should be open for extension, but closed for
    modification.
    en.wikipedia.org/wiki/Open/closed_principle
    Open/Closed Principle

    View full-size slide

  14. Overly complicated selectors
    #main-nav ul li ul li div { }
    #content article h1:first-child { }
    #sidebar > div > h3 + p { }
    ☐ Predictable
    ☐ Reusable
    ☐ Maintainable
    ☐ Scaleable

    View full-size slide

  15. Overly
    generic
    class names

    ...

    Lorem ipsum dolor sit amet, consectetur elit.
    Click Me!


    .widget {}
    .widget .title {}
    .widget .contents {}
    .widget .action {}
    ☐ Predictable
    ☐ Reusable
    ☐ Maintainable
    ☐ Scaleable

    View full-size slide

  16. Making a rule do too much
    .widget {
    position: absolute;
    top: 20px;
    left: 20px;
    background-color: red;
    font-size: 1.5em;
    text-transform: uppercase;
    }
    ☐ Predictable
    ☐ Reusable
    ☐ Maintainable
    ☐ Scaleable

    View full-size slide

  17. Why is this happening?
    ☐ Predictable
    ☐ Reusable
    ☐ Maintainable
    ☐ Scaleable

    View full-size slide

  18. ✦ Too much styling burden on the CSS.
    ✦ CSS requiring intimate knowledge of the HTML.
    ✦ Too much “presentation” in the HTML.
    ✦ HTML elements with the sole purpose of
    providing CSS hooks.
    Why is this happening?

    View full-size slide

  19. The Solution

    View full-size slide

  20. ✦ HTML is part of the presentation
    ✦ Decouple CSS from HTML structure
    ✦ CSS defines style, HTML assigns style
    ✦ Use more classes in HTML
    The Solution
    HTML bloat?

    View full-size slide

  21. Be intentional
    /* Grenade */
    #main-nav ul li ul { }
    /* Sniper Rifle */
    .subnav { }
    ☐ Predictable
    ☐ Reusable
    ☐ Maintainable
    ☐ Scaleable

    View full-size slide

  22. Separate our concerns


    Destroy


    ☐ Predictable
    ☐ Reusable
    ☐ Maintainable
    ☐ Scaleable
    Layout & Position
    Look & Feel

    View full-size slide

  23. Namespace your classes
    ☐ Predictable
    ☐ Reusable
    ☐ Maintainable
    ☐ Scaleable

    ...

    Lorem ipsum dolor.


    .widget { }
    .widget .title { }
    .widget .content { }

    ...

    Lorem ipsum dolor.


    .widget { }
    .widget-title { }
    .widget-content { }

    View full-size slide

  24. Extend components with modifier classes

    ...

    ...

    ...

    .widget { }
    #homepage .widget { }

    ...

    .widget { }
    .widget-featured { }
    ☐ Predictable
    ☐ Reusable
    ☐ Maintainable
    ☐ Scaleable

    View full-size slide

  25. Organize your styles into a logical structure
    Base
    Reset rules and element defaults
    Layout
    Positioning of site-wide elements and generic layout helpers like grids
    Modules
    Reusable visual elements
    State
    Toggled states of layout or modules (via JavaScript)
    Theme
    (optional) Look and feel
    http://smacss.com

    View full-size slide

  26. Use classes for styling and styling only
    Classes only for styles
    When we see a class in HTML, you should be able to instantly understand it’s purpose.
    Class of unknown purpose in HTML
    Should we remove it?
    Namespace classes
    Perhaps use to separate presentation and behavior.

    View full-size slide

  27. Logically structured class names
    /* A component or sub-component? */
    .button-group { }
    /* A component modifier for .button? */
    .button-primary { }
    /* A component sub-component within .button? */
    .button-icon { }
    /* Is this a component class or a layout class? */
    .header { }

    View full-size slide

  28. Logically structured class names
    /* Component Rules */
    .component-name
    .component-name--modifier-name
    .component-name__sub-component
    .component-name__sub-component--modifier-name
    /* Layout Rules */
    .l-layout-method
    .grid
    /* State Rules */
    .is-state-type
    /* Non-styled JavaScript Hooks */
    .js-action-name

    View full-size slide

  29. Logically structured class names
    /* A component */
    .button-group { }
    /* A component modifier (modifying .button) */
    .button--primary { }
    /* A component sub-component (lives within .button) */
    .button__icon { }
    /* A layout class */
    .l-header { }
    .button-group { }
    .button-primary { }
    .button-icon { }
    .header { }

    View full-size slide

  30. Tools: Preprocessors (Sass/SCSS, LESS & Stylus)
    ✦ Variables
    ✦ Operations
    ✦ Nesting
    ✦ Mixins
    ✦ Extend
    ✦ Placeholders

    View full-size slide

  31. General CSS Rules
    ✦ Don’t allow IDs in your
    selectors.
    ✦ Don’t use non-semantic type
    selectors (e.g. DIV, SPAN) in
    any multi-part rule.
    ✦ Don’t use more than 2
    combinators in a selector.
    ✦ Don’t allow any class names
    that begin with “js-”.
    ✦ Warn if frequently using layout
    and positioning for non “l-”
    prefixed rules.
    ✦ Warn if a class defined by itself
    is later redefined as a child of
    something else.

    View full-size slide

  32. Summary
    ✦ CSS isn’t just visual design.
    ✦ Concepts like OOP, DRY, the open/closed principle, separation of
    concerns, etc. still apply to CSS.
    ✦ Judge your organizational methods by whether they make
    development more efficient long-term.
    ✦ Strive for CSS that is predictable, reusable, maintainable, and
    scaleable.

    View full-size slide

  33. Credits
    ✦ This presentation is heavily influenced by Philip Walton’s article on
    CSS Architecture. While I have been preaching many of these
    techniques for years, Philip laid out the arguments, techniques,
    and examples in a wonderful article. Thanks Philip.
    http://engineering.appfolio.com/2012/11/16/css-architecture

    View full-size slide

  34. Questions?
    fin.

    View full-size slide