CSS Architecture, Sass, & Compass
best practices for starting a project
Architecture
OOCSS
Object Oriented CSS
written by Nicole Sullivan to solve Facebook's problems
.bluebackground {
background-color: blue;
}
.roundedcorners {
border-radius: .5rem;
}
SMACSS
Scalable and Modular Architecture for CSS
Builds on the idea of OOCSS
Base, Layout, Module, State, Theme, Changing State rules
Modules and submodules for styling design components
SMACSS
modules/blocks can be nested or woven together
<article class="article">
<header class="article-header">
<h1 class="heading heading--alpha article-title">Title</h1>
<h2 class="heading heading--beta article-subtitle">Subtitle</h2>
</header>
</article>
wrong way:
.article {
....
.heading { ...}
}
right way:
.article { ... }
.article-title { ... }
BEM
block element modifier methodology
.block { ... }
.block-element { ... }
.block-element--modifier { ...}
All Together Now
OOCSS for utility classes
SMACSS for just about everything else
BEM naming convention
Flat CSS structure to avoid specificity battles and enhance reusability
Classes Always
Javascript:
JS_block
JS_block-element
Structure
@import "utils";
@import "typography";
@import "base";
@import "layout/*";
@import "block/*";
@import "state/*";
@import "theme/*";
@import "junk";
Sass
Tools
Mixins
only when you have a repeated block of code that needs an argument
@mixin sexy-border($color, $width) {
border: {
color: $color;
width: $width;
style: dashed;
}
}
p { @include sexy-border(blue, 1em); }
Extends & Placeholders
%clearfix { display: inline-block; &:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; } * html & { height: 1px } }
.clearfix {
@extend %clearfix;
}
div {
@extend .clearfix;
}
Nesting
Inception rule: never go three levels deep
Nesting
don't do this:
header {
nav {
ul {
li {
a { ... }
}
}
}
}
do this:
.navlink { ... }
Nesting
also do this:
.element {
...
&.element--modifier {
...
}
.unauthenticated & {
...
}
@media #{$bp-med} {
...
}
}
a bird's eye view of an element in all it's states
Structure
lots of partials
broken in to categories
reading:
Compass
Use Compass For:
importing plugins, vertical rhythm, importing data-URIs
Don't Use Compass For:
CSS3 mixins, use the auto-prefixer postprocessor instead
Breakpoint Plugin
with plain 'ol Sass
// Vars
$bp-sm: "screen and (min-width:25em)"; $bp-med: "screen and (min-width:50em)"; $bp-lrg: "screen and (min-width:75em)";
// Example
.element {
@media #{$bp-sm} { ... }
@media #{$bp-med} { ... }
}
with breakpoint
// Vars
$bp-sm: 25em; $bp-med: 50em; $bp-lrg: 75em;
// Example
.element {
@include breakpoint( $bp-sm ) { ... }
@include breakpoint( $bp-medt ) { ... }
}
Plugins
MQs: Breakpoint
Conditional Styles: Jacket
+ more available
Questions?
CSS Architecture, Sass, & Compass
By welch canavan
CSS Architecture, Sass, & Compass
- 1,286