SlideShare a Scribd company logo
smacss 
your up
@minamarkham
“I need two demo sites” 
“And I need them 
in two days”
CSS is easy.
hard 
CSS is easy.
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
header 
content 
footer
sidebar 
header 
main content
Modules 
content patterns 
(ex. search-box, navigation, content-box)
navigation 
hero 
promo promo promo promo 
footer-text 
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-secondary {…} 
.btn_secondary {…}
nesting
inception rule
< 3 levels deep
.btn 
{ 
&-secondary 
{ 
&-icon {…} 
} 
}
.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 
utilities/_index.scss 
@import 
'global'; 
@import 
'functions'; 
@import 
'mixins'; 
@import 
'helpers'; 
Variables, mixins, functions, etc. 
Basically anything that doesn’t 
output CSS by itself.
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. 
01. 
Utilities 
02. 
Libraries
base/_index.scss 
@import 
‘normalize'; 
@import 
'base'; 
CSS resets, Normalize, 
element styles 
01. 
Utilities 
02. 
Libraries 
03. 
Base
layout/_index.scss 
@import 
'global'; 
@import 
'functions'; 
@import 
'mixins'; 
@import 
'helpers'; 
Grid styles, major layout 
components (e.g. header, footer, 
sidebar, etc) 
01. 
Utilities 
02. 
Libraries 
03. 
Base 
04. 
Layout
modules/_index.scss 
@import 
'btn'; 
@import 
'table'; 
@import 
'nav'; 
Individual modules, such as 
buttons, navigation, menus, etc. 
01. 
Utilities 
02. 
Libraries 
03. 
Base 
04. 
Layout 
05. 
Modules
states/_index.scss 
@import 
'states'; 
@import 
'touch'; 
Describe states of being, ex: 
active, collapsed or hidden 
01. 
Utilities 
02. 
Libraries 
03. 
Base 
04. 
Layout 
05. 
Modules 
06. 
States
01. 
Utilities 
02. 
Libraries 
03. 
Base 
04. 
Layout 
05. 
Modules 
06. 
States 
07. 
@font-­‐face 
utilities/_fonts.scss Web fonts imports & declarations
01. 
Utilities 
02. 
Libraries 
03. 
Base 
04. 
Layout 
05. 
Modules 
06. 
States 
07. 
@font-­‐face 
08. 
Print 
states/_print.scss Print styles
!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
mina.so/smacss 
thanks! 
@minamarkham

More Related Content

Similar to SMACSS Your Sass Up

Intro to CSS Selectors in Drupal
Intro to CSS Selectors in DrupalIntro to CSS Selectors in Drupal
Intro to CSS Selectors in Drupal
cgmonroe
 
HowTo_CSS
HowTo_CSSHowTo_CSS
HowTo_CSS
tutorialsruby
 
HowTo_CSS
HowTo_CSSHowTo_CSS
HowTo_CSS
tutorialsruby
 
Sass Essentials at Mobile Camp LA
Sass Essentials at Mobile Camp LASass Essentials at Mobile Camp LA
Sass Essentials at Mobile Camp LA
Jake Johnson
 
Pfnp slides
Pfnp slidesPfnp slides
Pfnp slides
William Myers
 
Slow kinda sucks
Slow kinda sucksSlow kinda sucks
Slow kinda sucks
Tim Wright
 
Building Potent WordPress Websites
Building Potent WordPress WebsitesBuilding Potent WordPress Websites
Building Potent WordPress Websites
Kyle Cearley
 
OOCSS, SMACSS or BEM?
OOCSS, SMACSS or BEM?OOCSS, SMACSS or BEM?
OOCSS, SMACSS or BEM?
Michael Posso
 
OOCSS, SMACSS or BEM, what is the question...
OOCSS, SMACSS or BEM, what is the question...OOCSS, SMACSS or BEM, what is the question...
OOCSS, SMACSS or BEM, what is the question...
Michael Posso
 
Architecture for css
Architecture for cssArchitecture for css
Architecture for css
Mohamed Amin
 
The Future is Modular, Jonathan Snook
The Future is Modular, Jonathan SnookThe Future is Modular, Jonathan Snook
The Future is Modular, Jonathan Snook
Future Insights
 
Rock Solid CSS Architecture
Rock Solid CSS ArchitectureRock Solid CSS Architecture
Rock Solid CSS Architecture
John Need
 
Semantic accessibility
Semantic accessibilitySemantic accessibility
Semantic accessibility
Ian Stuart
 
HTML and CSS Coding Standards
HTML and CSS Coding StandardsHTML and CSS Coding Standards
HTML and CSS Coding Standards
Saajan Maharjan
 
CSMess to OOCSS: Refactoring CSS with Object Oriented Design
CSMess to OOCSS: Refactoring CSS with Object Oriented DesignCSMess to OOCSS: Refactoring CSS with Object Oriented Design
CSMess to OOCSS: Refactoring CSS with Object Oriented Design
Kate Travers
 
Drupal 7 — Circle theme
Drupal 7 — Circle themeDrupal 7 — Circle theme
Drupal 7 — Circle theme
Kirill Borzov
 
Learn SUIT: CSS Naming Convention
Learn SUIT: CSS Naming ConventionLearn SUIT: CSS Naming Convention
Learn SUIT: CSS Naming Convention
In a Rocket
 
The Way to Theme Enlightenment 2017
The Way to Theme Enlightenment 2017The Way to Theme Enlightenment 2017
The Way to Theme Enlightenment 2017
Amanda Giles
 
CSS Workflow. Pre & Post
CSS Workflow. Pre & PostCSS Workflow. Pre & Post
CSS Workflow. Pre & Post
Anton Dosov
 
slides-students-C04.pdf
slides-students-C04.pdfslides-students-C04.pdf
slides-students-C04.pdf
MonkeyDLuffy708724
 

Similar to SMACSS Your Sass Up (20)

Intro to CSS Selectors in Drupal
Intro to CSS Selectors in DrupalIntro to CSS Selectors in Drupal
Intro to CSS Selectors in Drupal
 
HowTo_CSS
HowTo_CSSHowTo_CSS
HowTo_CSS
 
HowTo_CSS
HowTo_CSSHowTo_CSS
HowTo_CSS
 
Sass Essentials at Mobile Camp LA
Sass Essentials at Mobile Camp LASass Essentials at Mobile Camp LA
Sass Essentials at Mobile Camp LA
 
Pfnp slides
Pfnp slidesPfnp slides
Pfnp slides
 
Slow kinda sucks
Slow kinda sucksSlow kinda sucks
Slow kinda sucks
 
Building Potent WordPress Websites
Building Potent WordPress WebsitesBuilding Potent WordPress Websites
Building Potent WordPress Websites
 
OOCSS, SMACSS or BEM?
OOCSS, SMACSS or BEM?OOCSS, SMACSS or BEM?
OOCSS, SMACSS or BEM?
 
OOCSS, SMACSS or BEM, what is the question...
OOCSS, SMACSS or BEM, what is the question...OOCSS, SMACSS or BEM, what is the question...
OOCSS, SMACSS or BEM, what is the question...
 
Architecture for css
Architecture for cssArchitecture for css
Architecture for css
 
The Future is Modular, Jonathan Snook
The Future is Modular, Jonathan SnookThe Future is Modular, Jonathan Snook
The Future is Modular, Jonathan Snook
 
Rock Solid CSS Architecture
Rock Solid CSS ArchitectureRock Solid CSS Architecture
Rock Solid CSS Architecture
 
Semantic accessibility
Semantic accessibilitySemantic accessibility
Semantic accessibility
 
HTML and CSS Coding Standards
HTML and CSS Coding StandardsHTML and CSS Coding Standards
HTML and CSS Coding Standards
 
CSMess to OOCSS: Refactoring CSS with Object Oriented Design
CSMess to OOCSS: Refactoring CSS with Object Oriented DesignCSMess to OOCSS: Refactoring CSS with Object Oriented Design
CSMess to OOCSS: Refactoring CSS with Object Oriented Design
 
Drupal 7 — Circle theme
Drupal 7 — Circle themeDrupal 7 — Circle theme
Drupal 7 — Circle theme
 
Learn SUIT: CSS Naming Convention
Learn SUIT: CSS Naming ConventionLearn SUIT: CSS Naming Convention
Learn SUIT: CSS Naming Convention
 
The Way to Theme Enlightenment 2017
The Way to Theme Enlightenment 2017The Way to Theme Enlightenment 2017
The Way to Theme Enlightenment 2017
 
CSS Workflow. Pre & Post
CSS Workflow. Pre & PostCSS Workflow. Pre & Post
CSS Workflow. Pre & Post
 
slides-students-C04.pdf
slides-students-C04.pdfslides-students-C04.pdf
slides-students-C04.pdf
 

Recently uploaded

Artificial Intelligence for XMLDevelopment
Artificial Intelligence for XMLDevelopmentArtificial Intelligence for XMLDevelopment
Artificial Intelligence for XMLDevelopment
Octavian Nadolu
 
Microsoft - Power Platform_G.Aspiotis.pdf
Microsoft - Power Platform_G.Aspiotis.pdfMicrosoft - Power Platform_G.Aspiotis.pdf
Microsoft - Power Platform_G.Aspiotis.pdf
Uni Systems S.M.S.A.
 
Observability Concepts EVERY Developer Should Know -- DeveloperWeek Europe.pdf
Observability Concepts EVERY Developer Should Know -- DeveloperWeek Europe.pdfObservability Concepts EVERY Developer Should Know -- DeveloperWeek Europe.pdf
Observability Concepts EVERY Developer Should Know -- DeveloperWeek Europe.pdf
Paige Cruz
 
Removing Uninteresting Bytes in Software Fuzzing
Removing Uninteresting Bytes in Software FuzzingRemoving Uninteresting Bytes in Software Fuzzing
Removing Uninteresting Bytes in Software Fuzzing
Aftab Hussain
 
Communications Mining Series - Zero to Hero - Session 1
Communications Mining Series - Zero to Hero - Session 1Communications Mining Series - Zero to Hero - Session 1
Communications Mining Series - Zero to Hero - Session 1
DianaGray10
 
Programming Foundation Models with DSPy - Meetup Slides
Programming Foundation Models with DSPy - Meetup SlidesProgramming Foundation Models with DSPy - Meetup Slides
Programming Foundation Models with DSPy - Meetup Slides
Zilliz
 
Let's Integrate MuleSoft RPA, COMPOSER, APM with AWS IDP along with Slack
Let's Integrate MuleSoft RPA, COMPOSER, APM with AWS IDP along with SlackLet's Integrate MuleSoft RPA, COMPOSER, APM with AWS IDP along with Slack
Let's Integrate MuleSoft RPA, COMPOSER, APM with AWS IDP along with Slack
shyamraj55
 
Introduction to CHERI technology - Cybersecurity
Introduction to CHERI technology - CybersecurityIntroduction to CHERI technology - Cybersecurity
Introduction to CHERI technology - Cybersecurity
mikeeftimakis1
 
20240605 QFM017 Machine Intelligence Reading List May 2024
20240605 QFM017 Machine Intelligence Reading List May 202420240605 QFM017 Machine Intelligence Reading List May 2024
20240605 QFM017 Machine Intelligence Reading List May 2024
Matthew Sinclair
 
HCL Notes und Domino Lizenzkostenreduzierung in der Welt von DLAU
HCL Notes und Domino Lizenzkostenreduzierung in der Welt von DLAUHCL Notes und Domino Lizenzkostenreduzierung in der Welt von DLAU
HCL Notes und Domino Lizenzkostenreduzierung in der Welt von DLAU
panagenda
 
GraphSummit Singapore | Graphing Success: Revolutionising Organisational Stru...
GraphSummit Singapore | Graphing Success: Revolutionising Organisational Stru...GraphSummit Singapore | Graphing Success: Revolutionising Organisational Stru...
GraphSummit Singapore | Graphing Success: Revolutionising Organisational Stru...
Neo4j
 
Why You Should Replace Windows 11 with Nitrux Linux 3.5.0 for enhanced perfor...
Why You Should Replace Windows 11 with Nitrux Linux 3.5.0 for enhanced perfor...Why You Should Replace Windows 11 with Nitrux Linux 3.5.0 for enhanced perfor...
Why You Should Replace Windows 11 with Nitrux Linux 3.5.0 for enhanced perfor...
SOFTTECHHUB
 
GenAI Pilot Implementation in the organizations
GenAI Pilot Implementation in the organizationsGenAI Pilot Implementation in the organizations
GenAI Pilot Implementation in the organizations
kumardaparthi1024
 
Best 20 SEO Techniques To Improve Website Visibility In SERP
Best 20 SEO Techniques To Improve Website Visibility In SERPBest 20 SEO Techniques To Improve Website Visibility In SERP
Best 20 SEO Techniques To Improve Website Visibility In SERP
Pixlogix Infotech
 
Serial Arm Control in Real Time Presentation
Serial Arm Control in Real Time PresentationSerial Arm Control in Real Time Presentation
Serial Arm Control in Real Time Presentation
tolgahangng
 
UiPath Test Automation using UiPath Test Suite series, part 6
UiPath Test Automation using UiPath Test Suite series, part 6UiPath Test Automation using UiPath Test Suite series, part 6
UiPath Test Automation using UiPath Test Suite series, part 6
DianaGray10
 
UiPath Test Automation using UiPath Test Suite series, part 5
UiPath Test Automation using UiPath Test Suite series, part 5UiPath Test Automation using UiPath Test Suite series, part 5
UiPath Test Automation using UiPath Test Suite series, part 5
DianaGray10
 
Cosa hanno in comune un mattoncino Lego e la backdoor XZ?
Cosa hanno in comune un mattoncino Lego e la backdoor XZ?Cosa hanno in comune un mattoncino Lego e la backdoor XZ?
Cosa hanno in comune un mattoncino Lego e la backdoor XZ?
Speck&Tech
 
Driving Business Innovation: Latest Generative AI Advancements & Success Story
Driving Business Innovation: Latest Generative AI Advancements & Success StoryDriving Business Innovation: Latest Generative AI Advancements & Success Story
Driving Business Innovation: Latest Generative AI Advancements & Success Story
Safe Software
 
Pushing the limits of ePRTC: 100ns holdover for 100 days
Pushing the limits of ePRTC: 100ns holdover for 100 daysPushing the limits of ePRTC: 100ns holdover for 100 days
Pushing the limits of ePRTC: 100ns holdover for 100 days
Adtran
 

Recently uploaded (20)

Artificial Intelligence for XMLDevelopment
Artificial Intelligence for XMLDevelopmentArtificial Intelligence for XMLDevelopment
Artificial Intelligence for XMLDevelopment
 
Microsoft - Power Platform_G.Aspiotis.pdf
Microsoft - Power Platform_G.Aspiotis.pdfMicrosoft - Power Platform_G.Aspiotis.pdf
Microsoft - Power Platform_G.Aspiotis.pdf
 
Observability Concepts EVERY Developer Should Know -- DeveloperWeek Europe.pdf
Observability Concepts EVERY Developer Should Know -- DeveloperWeek Europe.pdfObservability Concepts EVERY Developer Should Know -- DeveloperWeek Europe.pdf
Observability Concepts EVERY Developer Should Know -- DeveloperWeek Europe.pdf
 
Removing Uninteresting Bytes in Software Fuzzing
Removing Uninteresting Bytes in Software FuzzingRemoving Uninteresting Bytes in Software Fuzzing
Removing Uninteresting Bytes in Software Fuzzing
 
Communications Mining Series - Zero to Hero - Session 1
Communications Mining Series - Zero to Hero - Session 1Communications Mining Series - Zero to Hero - Session 1
Communications Mining Series - Zero to Hero - Session 1
 
Programming Foundation Models with DSPy - Meetup Slides
Programming Foundation Models with DSPy - Meetup SlidesProgramming Foundation Models with DSPy - Meetup Slides
Programming Foundation Models with DSPy - Meetup Slides
 
Let's Integrate MuleSoft RPA, COMPOSER, APM with AWS IDP along with Slack
Let's Integrate MuleSoft RPA, COMPOSER, APM with AWS IDP along with SlackLet's Integrate MuleSoft RPA, COMPOSER, APM with AWS IDP along with Slack
Let's Integrate MuleSoft RPA, COMPOSER, APM with AWS IDP along with Slack
 
Introduction to CHERI technology - Cybersecurity
Introduction to CHERI technology - CybersecurityIntroduction to CHERI technology - Cybersecurity
Introduction to CHERI technology - Cybersecurity
 
20240605 QFM017 Machine Intelligence Reading List May 2024
20240605 QFM017 Machine Intelligence Reading List May 202420240605 QFM017 Machine Intelligence Reading List May 2024
20240605 QFM017 Machine Intelligence Reading List May 2024
 
HCL Notes und Domino Lizenzkostenreduzierung in der Welt von DLAU
HCL Notes und Domino Lizenzkostenreduzierung in der Welt von DLAUHCL Notes und Domino Lizenzkostenreduzierung in der Welt von DLAU
HCL Notes und Domino Lizenzkostenreduzierung in der Welt von DLAU
 
GraphSummit Singapore | Graphing Success: Revolutionising Organisational Stru...
GraphSummit Singapore | Graphing Success: Revolutionising Organisational Stru...GraphSummit Singapore | Graphing Success: Revolutionising Organisational Stru...
GraphSummit Singapore | Graphing Success: Revolutionising Organisational Stru...
 
Why You Should Replace Windows 11 with Nitrux Linux 3.5.0 for enhanced perfor...
Why You Should Replace Windows 11 with Nitrux Linux 3.5.0 for enhanced perfor...Why You Should Replace Windows 11 with Nitrux Linux 3.5.0 for enhanced perfor...
Why You Should Replace Windows 11 with Nitrux Linux 3.5.0 for enhanced perfor...
 
GenAI Pilot Implementation in the organizations
GenAI Pilot Implementation in the organizationsGenAI Pilot Implementation in the organizations
GenAI Pilot Implementation in the organizations
 
Best 20 SEO Techniques To Improve Website Visibility In SERP
Best 20 SEO Techniques To Improve Website Visibility In SERPBest 20 SEO Techniques To Improve Website Visibility In SERP
Best 20 SEO Techniques To Improve Website Visibility In SERP
 
Serial Arm Control in Real Time Presentation
Serial Arm Control in Real Time PresentationSerial Arm Control in Real Time Presentation
Serial Arm Control in Real Time Presentation
 
UiPath Test Automation using UiPath Test Suite series, part 6
UiPath Test Automation using UiPath Test Suite series, part 6UiPath Test Automation using UiPath Test Suite series, part 6
UiPath Test Automation using UiPath Test Suite series, part 6
 
UiPath Test Automation using UiPath Test Suite series, part 5
UiPath Test Automation using UiPath Test Suite series, part 5UiPath Test Automation using UiPath Test Suite series, part 5
UiPath Test Automation using UiPath Test Suite series, part 5
 
Cosa hanno in comune un mattoncino Lego e la backdoor XZ?
Cosa hanno in comune un mattoncino Lego e la backdoor XZ?Cosa hanno in comune un mattoncino Lego e la backdoor XZ?
Cosa hanno in comune un mattoncino Lego e la backdoor XZ?
 
Driving Business Innovation: Latest Generative AI Advancements & Success Story
Driving Business Innovation: Latest Generative AI Advancements & Success StoryDriving Business Innovation: Latest Generative AI Advancements & Success Story
Driving Business Innovation: Latest Generative AI Advancements & Success Story
 
Pushing the limits of ePRTC: 100ns holdover for 100 days
Pushing the limits of ePRTC: 100ns holdover for 100 daysPushing the limits of ePRTC: 100ns holdover for 100 days
Pushing the limits of ePRTC: 100ns holdover for 100 days
 

SMACSS Your Sass Up