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

Read in the NGS Dev Library

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_blockJS_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

Grids: Singulary, Susy

+ more available

Questions?

CSS Architecture, Sass, & Compass

By welch canavan

Made with Slides.com

CSS Architecture, Sass, & Compass

  • 1,282

More from welch canavan