SMACSS Your Sass Up

118
smacss your up

Transcript of SMACSS Your Sass Up

Page 1: SMACSS Your Sass Up

smacss your up

Page 2: SMACSS Your Sass Up

@minamarkham

Page 3: SMACSS Your Sass Up
Page 4: SMACSS Your Sass Up

“I need two demo sites”“And I need them

in two days”

Page 5: SMACSS Your Sass Up
Page 6: SMACSS Your Sass Up

CSS is easy.

Page 7: SMACSS Your Sass Up

CSS is easy.hard

Page 8: SMACSS Your Sass Up
Page 9: SMACSS Your Sass Up
Page 10: SMACSS Your Sass Up

CSS is bullshit.

Page 11: SMACSS Your Sass Up

Modular CSS

Page 12: SMACSS Your Sass Up

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

- Dave Rupert

Page 13: SMACSS Your Sass Up
Page 14: SMACSS Your Sass Up
Page 15: SMACSS Your Sass Up

small pieces independent

portable

Page 16: SMACSS Your Sass Up

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

Page 17: SMACSS Your Sass Up

“Tiny Bootstraps”

Page 18: SMACSS Your Sass Up
Page 19: SMACSS Your Sass Up

Module, Pattern, Component, etc.

Page 20: SMACSS Your Sass Up

MVCSS, BEM, OOCSS, Suit,

intuit.css

Page 21: SMACSS Your Sass Up

SMACSS

Page 22: SMACSS Your Sass Up

Scalable & Modular Architecture for CSS

Page 23: SMACSS Your Sass Up
Page 24: SMACSS Your Sass Up

Framework

Page 25: SMACSS Your Sass Up

categorization naming conventions depth of applicability

Page 26: SMACSS Your Sass Up

Categorization

Page 27: SMACSS Your Sass Up

base layout

modules states

themes

Page 28: SMACSS Your Sass Up

Base CSS resets, default styles

(ex. html, body, h1, ul, etc)

Page 29: SMACSS Your Sass Up

Layout grid, major components

ex. header, sidebar, nav

Page 30: SMACSS Your Sass Up

content

footer

header

Page 31: SMACSS Your Sass Up

sidebar

header

main content

Page 32: SMACSS Your Sass Up

Modules content patterns

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

Page 33: SMACSS Your Sass Up

promo promo promo promo

hero

footer-text

navigation

link-list

Page 34: SMACSS Your Sass Up

States module in various states

Page 35: SMACSS Your Sass Up
Page 36: SMACSS Your Sass Up
Page 37: SMACSS Your Sass Up

Themes module in various contexts

Page 38: SMACSS Your Sass Up

jessicahische.is

Page 39: SMACSS Your Sass Up

Naming Conventions

Page 40: SMACSS Your Sass Up

Base h1, h2, p, a, etc.

Page 41: SMACSS Your Sass Up

Layout .layout-*, .l-*

Page 42: SMACSS Your Sass Up

Module .<name>

Page 43: SMACSS Your Sass Up

Module .button

Page 44: SMACSS Your Sass Up

Sub-module .<name>-<state>

Page 45: SMACSS Your Sass Up

Sub-module .button-secondary

Page 46: SMACSS Your Sass Up

State .is-*

Page 47: SMACSS Your Sass Up

Theme .theme-*

Page 48: SMACSS Your Sass Up

Theme .theme-*

Page 49: SMACSS Your Sass Up

Depth of Applicability

Page 50: SMACSS Your Sass Up

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

Page 51: SMACSS Your Sass Up

10 generations!

Page 52: SMACSS Your Sass Up

http://specificity.keegan.st/

Specificity = 0,1,1,11

, , ,

Page 53: SMACSS Your Sass Up

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

Page 54: SMACSS Your Sass Up

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

Page 55: SMACSS Your Sass Up

.nav-subitem

Page 56: SMACSS Your Sass Up

http://specificity.keegan.st/

Specificity = 0,0,1,0

, , ,

Page 57: SMACSS Your Sass Up

.nav-subitem > a

Page 58: SMACSS Your Sass Up

http://specificity.keegan.st/

Specificity = 0,0,1,1

, , ,

Page 59: SMACSS Your Sass Up

child selectors class selectors

naming conventions

Page 60: SMACSS Your Sass Up

Recap

Page 61: SMACSS Your Sass Up

categorize css rules meaningful names shallow selectors

Page 62: SMACSS Your Sass Up

add some

Page 63: SMACSS Your Sass Up

not SASS

Page 64: SMACSS Your Sass Up

Namespacing

Page 65: SMACSS Your Sass Up

the almighty ampersand

Page 66: SMACSS Your Sass Up

.btn { &:hover {…} }

Page 67: SMACSS Your Sass Up

.btn:hover {…}

Page 68: SMACSS Your Sass Up

.btn { form & {…} }

Page 69: SMACSS Your Sass Up

form .btn {…}

Page 70: SMACSS Your Sass Up

&- or &_

Page 71: SMACSS Your Sass Up

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

.btn

Page 72: SMACSS Your Sass Up

.btn-secondary {…}

.btn_secondary {…}

Page 73: SMACSS Your Sass Up

nesting

Page 74: SMACSS Your Sass Up

inception rule

Page 75: SMACSS Your Sass Up

< 3 levels deep

Page 76: SMACSS Your Sass Up

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

secondary.btn

Page 77: SMACSS Your Sass Up

.btn-secondary {…}

.btn-secondary-icon {…}

Page 78: SMACSS Your Sass Up

.btn {…}

.btn-large {…} !

<div class=“btn btn-large”>

Page 79: SMACSS Your Sass Up

@extend all the things!

Page 80: SMACSS Your Sass Up

.btn {…}

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

<div class=“btn-large”>

Page 81: SMACSS Your Sass Up

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

<div class=“btn-large”>

Page 82: SMACSS Your Sass Up

don’t @extend between modules

Page 83: SMACSS Your Sass Up

File Structure

Page 84: SMACSS Your Sass Up

@import

Page 85: SMACSS Your Sass Up

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.

Page 86: SMACSS Your Sass Up

@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  

Page 87: SMACSS Your Sass Up

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

base/_index.scss

CSS resets, Normalize, element styles

01.  Utilities  02.  Libraries  03.  Base  

Page 88: SMACSS Your Sass Up

@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  

Page 89: SMACSS Your Sass Up

@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  

Page 90: SMACSS Your Sass Up

@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  

Page 91: SMACSS Your Sass Up

utilities/_fonts.scss Web fonts imports & declarations

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

Page 92: SMACSS Your Sass Up

states/_print.scss Print styles

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

Page 93: SMACSS Your Sass Up

!important

Page 94: SMACSS Your Sass Up
Page 95: SMACSS Your Sass Up

shame.css

Page 96: SMACSS Your Sass Up

_shame.scss

Page 97: SMACSS Your Sass Up

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

_shame.scss because hacks happen

Page 98: SMACSS Your Sass Up

small and readable

Page 99: SMACSS Your Sass Up

mina.so/sassyStarter

Page 100: SMACSS Your Sass Up

Theming

Page 101: SMACSS Your Sass Up

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

Page 102: SMACSS Your Sass Up

$theme: rebeccapurple

Page 103: SMACSS Your Sass Up

@include theme($rebeccapurple)

Page 104: SMACSS Your Sass Up
Page 105: SMACSS Your Sass Up

refactor all the things!

Page 106: SMACSS Your Sass Up
Page 107: SMACSS Your Sass Up

refactor all the things?

Page 108: SMACSS Your Sass Up

Baby steps

Page 109: SMACSS Your Sass Up

extract components create variables

apply naming conventions nest and @extend

Page 110: SMACSS Your Sass Up

mina.so/smacss-menu

Page 111: SMACSS Your Sass Up

Before: 161 lines After: 97 lines

Page 112: SMACSS Your Sass Up

Recap

Page 113: SMACSS Your Sass Up

namespace with ampersands & @extends

break modules into partials refactor in chunks

Page 114: SMACSS Your Sass Up

Resources

Page 115: SMACSS Your Sass Up

smacss.com

Page 116: SMACSS Your Sass Up

sass-lang.com

Page 117: SMACSS Your Sass Up

sassmeister.com

Page 118: SMACSS Your Sass Up

thanks!

mina.so/smacss

@minamarkham