SMACSS
Your
Up

@minamarkham

“I need two demo sites.”

“And I need them in two days.”

CSS is easy.

CSS is easy hard.

CSS is bullshit.

Modular CSS

Focusing on creating healthy front-end modules instead of complete pages can help break complex page layouts into reusable solutions.
— Dave Rupert

small pieces
independent
portable

Navigation, Tabs, Tables, Accordions, Lists, Dropdowns
Pagination, Buttons, Labels, Inputs, Breadcrumbs, etc.

Tiny Bootstraps

Module, Pattern, Component, etc.

MVCSS, BEM, OOCSS, Suit, intuit.css

SMACSS

Scalable & Modular Architecture for CSS












Jonathan Snook

Framework

categorization
naming conventions
depth of applicability

Categorization

  • base
  • layout
  • modules
  • states
  • themes

Base
CSS resets, default styles
(ex. html, body, h1, ul, etc)

Layout
grid, major components
ex. header, sidebar, nav

Modules
content patterns
(ex. search-box, navigation, content-box)

States
module in various states
(ex. hover, disabled, collapsed vs expanded)

Themes
module in various contexts

Naming Conventions

Base
h1, h2, p, a, etc.

Layout
.layout-*, .l-*

Module
.<name>

Module
.button

Sub-module
.<name>-<sub-class>

Sub-module
.button-secondary

State
.is-*

Theme
.theme-*

Theme
.theme-*

Depth of Applicability

header#top-menu > nav > ul > li a + div > ul > li > ul li:hover > a {…}
header#top-menu > nav > ul > li a + div > ul > li > ul li:hover > a {…}
header#top-menu > nav > ul > li a + div > ul > li > ul li:hover > a {…}
.nav-subitem
.nav-subitem > a

naming conventions
class selectors
child selectors

SMACSS Recap

categorize css rules
meaningful names
shallow selectors




Scalable and Modular Architecture for CSS

✽ smacss.com

Add some

Namespacing







The Almighty Ampersand

.btn {
  &:hover {…}
}
.btn:hover {…}
.btn {
  form & {…}
}
form .btn {…}

&- or &_

.btn {
  &-secondary {…}
  &_secondary {…}
}
.btn-secondary {…}
.btn_secondary {…}

Nesting

Inception Rule

< 3 levels deep

.btn {
  &-secondary {
    &-icon {…}
  }
}
.btn-secondary {…}
.btn-secondary-icon {…}

Selector Inheritance

.btn {…}
.btn-large {…}

<div class='btn btn-large'>

@extend
all the
things!

.btn {…}
.btn-large {@extend .btn;}

<div class='btn-large'>
%btn {…}
.btn-large {@extend %btn;}

<div class='btn-large'>

don’t @extend
between modules

File Structure

@import

01. Utilities


utilities/_index.scss

@import 'global';
@import 'functions';
@import 'mixins';
@import 'helpers';

Variables, mixins, functions, etc. Basically anything that doesn’t output CSS by itself.

02. Libraries


utilities/_lib.scss

@import "lib/susy";
@import "lib/font-awesome";
@import "lib/pesticide";

Third-party libraries such as Susy, Font Awesome, Pesticide, and other plugins.

03. Base


base/_index.scss

@import ‘normalize';
@import 'base';

CSS resets, Normalize, element styles

04. Layout


layout/_index.scss

@import 'header';
@import 'footer';
@import 'sidebar';

Grid styles, major layout components (e.g. header, footer, sidebar, etc)

05. Modules


modules/_index.scss

@import 'btn';
@import 'table';
@import 'nav';

Individual modules, such as buttons, navigation, menus, etc.

06. States


states/_index.scss

@import 'states';
@import 'touch';

Describe states of being, ex: active, collapsed or hidden

07. @font-face


utilities/_fonts.scss

Web fonts imports & declarations

08. Print


states/_print.scss

Print styles

!important

shame.css

_shame.scss

09. Shame


_shame.scss

because hacks happen

Small & Readable




Sassy Starter

✽ minamarkham.github.io/sassy-starter

Theming

@mixin theme($name) {
  @if $theme == $name {
     @content; } }
$theme: rebeccapurple
.btn {
  background: #ff3377;
  @include theme($rebeccapurple){
    background: #663399;
  }
}

*Gotcha

.btn {
  background: #ff3377;
  background: #663399;
}

refactor
all the
things!

refactor
all the
things?

Baby Steps

extract components
create variables
apply naming conventions
nest and @extend

✽ mina.so/smacss-menu

Before: 161 lines
After: 97 lines

Wrap Up

  • namespace with &, @extends
  • break modules into partials
  • refactor in chunks


Thank you!

✽ minamarkham.github.io/smacss-sass-up