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
CSS Architecture
- 5,653