SMACSS Your Sass Up

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

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

content

footer

header

sidebar

header

main content

Modules content patterns

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

promo promo promo promo

hero

footer-text

navigation

link-list

States module in various states

Themes module in various contexts

jessicahische.is

Naming Conventions

Base h1, h2, p, a, etc.

Layout .layout-*, .l-*

Module .<name>

Module .button

Sub-module .<name>-<state>

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 {…}

10 generations!

http://specificity.keegan.st/

Specificity = 0,1,1,11

, , ,

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

http://specificity.keegan.st/

Specificity = 0,0,1,0

, , ,

.nav-subitem > a

http://specificity.keegan.st/

Specificity = 0,0,1,1

, , ,

child selectors class selectors

naming conventions

Recap

categorize css rules meaningful names shallow selectors

add some

not SASS

Namespacing

the almighty ampersand

.btn { &:hover {…} }

.btn:hover {…}

.btn { form & {…} }

form .btn {…}

&- or &_

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

.btn

.btn-secondary {…}

.btn_secondary {…}

nesting

inception rule

< 3 levels deep

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

secondary.btn

.btn-secondary {…}

.btn-secondary-icon {…}

.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  

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

utilities/_index.scss

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

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

utilities/_lib.scss

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

01.  Utilities  02.  Libraries  

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

base/_index.scss

CSS resets, Normalize, element styles

01.  Utilities  02.  Libraries  03.  Base  

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

layout/_index.scss

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

01.  Utilities  02.  Libraries  03.  Base  04.  Layout  

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

modules/_index.scss

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

01.  Utilities  02.  Libraries  03.  Base  04.  Layout  05.  Modules  

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

states/_index.scss

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

01.  Utilities  02.  Libraries  03.  Base  04.  Layout  05.  Modules  06.  States  

utilities/_fonts.scss Web fonts imports & declarations

01.  Utilities  02.  Libraries  03.  Base  04.  Layout  05.  Modules  06.  States  07.  @font-­‐face

states/_print.scss Print styles

01.  Utilities  02.  Libraries  03.  Base  04.  Layout  05.  Modules  06.  States  07.  @font-­‐face  08.  Print  

!important

shame.css

_shame.scss

01.  Utilities  02.  Libraries  03.  Base  04.  Layout  05.  Modules  06.  States  07.  @font-­‐face  08.  Print  09.  Shame

_shame.scss because hacks happen

small and readable

mina.so/sassyStarter

Theming

@mixin theme($name) { @if $theme == $name { @content; } }

$theme: rebeccapurple

@include theme($rebeccapurple)

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

Recap

namespace with ampersands & @extends

break modules into partials refactor in chunks

Resources

smacss.com

sass-lang.com

sassmeister.com

thanks!

mina.so/smacss

@minamarkham