Scalable, Responsive

CSS Architecture

At Viewpost, or anywhere else.

Current inefficiencies

  • (Very) large CSS files
  • Difficult to maintain
  • Not scalable
  • Not (naturally) cohesive
  • Uneven specificities
  • Not built for LCD

Current Specificity Distribution

Harry Roberts, csswizardry.com

Ideal Specificity Distribution

The Team
The Company
The User

The Team

  • Easily maintainable (S)CSS
  • Strict style guide
  • Work at "end" of specificity graph
  • No ambiguity
  • Based on ideal markup
  • Collaboration with design team
  • Be lazy!

The Company

  • Align with company vision
  • 1 million users
  • Old way
    • "Software Designer"
    • Real designer
    • Developer
  • New way
    • Style guide
    • "Designoveloper" collab
    • Developer

The User

  • Cohesive design
  • No cognitive dissonance
  • Simple, clean, intuitive
  • UI supplements UX
  • Perception and security

Top-Level Architecture

Global

  • Modules
    • Mixins
    • Components
    • Themes
    • Exports

 

Global Styles

  • Normalize / Reset
  • Grid system
  • Responsive breakpoints
  • Global configuration
  • Global mixins and functions
  • Typography + type scale
  • Color palette
  • White space
  • Transitions
  • IE8 polyfills

Module Styles

  • Group of related components (e.g. buttons)
  • Module-specific variables
    • Default, able to override
  • Theme configuration
  • Inherited from global settings
  • Inter-module cooperation
  • Imports:
    • Mixins
    • Components
    • Themes
    • Exports (development)

Mixins

  • Components generated from mixins
  • Nested mixins
  • Flexible and smart
  • DRY method
@mixin vp-button($color: $color-primary) {
    background-color: $color;
    color: $color-white;
    // ... etc. button styles
}

%button {
    @include vp-button;
}

Components

  • ONLY layout and structure
  • Created from mixins
  • Created as placeholders
  • Extensible
  • Represents a single component unit
  • Can be nested
  • Include states
  • Everything is a component!

Themes

  • Separation of concerns (OOCSS)
  • Does not affect component layout nor structure
  • Interchangeable
  • Configuration in module
  • Based on global configuration
    • Typography
    • Color palette
    • White space
    • Transitions

Exports

  • Specified classes
  • BEM, etc.
  • Rapid prototyping (development only)
  • Extends placeholders
  • Includes mixins
  • Never prescribe styles
  • Never extensible

HTML

SCSS

<a class="vp-button--primary">Click Me</a>
.vp-button {
    @extend %vp-button;

    &--primary {
        @include vp-theme('button', 'primary');
    }
}
  • BEM (I suppose)
  • As semantic as possible
  • As few classes as possible
  • Generic
  • Can be contextual
  • Extending placeholders save CSS output
  • Pseudo-nesting for BEM
  • Theme mixin for interchangeable themes

Goodbye, Bootstrap.

We're big boys now.

Separation of concerns (structure vs. appearance)

Unused CSS (a large amount!)

Inefficient grid system 

DIV-itis

Not scalable (hacked-on styles)

More classes than India's caste system

CSS Architecture

By David Khourshid

Loading comments...

More from David Khourshid