SMACSS Your Sass Up
-
Upload
mina-markham -
Category
Technology
-
view
448 -
download
0
Transcript of 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!
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
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