Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
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 reus...
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'; ...
utilities/_lib.scss 
@import 
"lib/susy"; 
@import 
"lib/font-­‐awesome"; 
@import 
"lib/pesticide"; 
Third-party librarie...
base/_index.scss 
@import 
‘normalize'; 
@import 
'base'; 
CSS resets, Normalize, 
element styles 
01. 
Utilities 
02. 
Li...
layout/_index.scss 
@import 
'global'; 
@import 
'functions'; 
@import 
'mixins'; 
@import 
'helpers'; 
Grid styles, major...
modules/_index.scss 
@import 
'btn'; 
@import 
'table'; 
@import 
'nav'; 
Individual modules, such as 
buttons, navigation...
states/_index.scss 
@import 
'states'; 
@import 
'touch'; 
Describe states of being, ex: 
active, collapsed or hidden 
01....
01. 
Utilities 
02. 
Libraries 
03. 
Base 
04. 
Layout 
05. 
Modules 
06. 
States 
07. 
@font-­‐face 
utilities/_fonts.scs...
01. 
Utilities 
02. 
Libraries 
03. 
Base 
04. 
Layout 
05. 
Modules 
06. 
States 
07. 
@font-­‐face 
08. 
Print 
states/_...
!important
shame.css
_shame.scss
01. 
Utilities 
02. 
Libraries 
03. 
Base 
04. 
Layout 
05. 
Modules 
06. 
States 
07. 
@font-­‐face 
08. 
Print 
09. 
Sha...
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
SMACSS Your Sass Up
SMACSS Your Sass Up
SMACSS Your Sass Up
SMACSS Your Sass Up
SMACSS Your Sass Up
SMACSS Your Sass Up
SMACSS Your Sass Up
SMACSS Your Sass Up
SMACSS Your Sass Up
SMACSS Your Sass Up
SMACSS Your Sass Up
SMACSS Your Sass Up
SMACSS Your Sass Up
Upcoming SlideShare
Loading in …5
×

SMACSS Your Sass Up

1,314 views

Published on

I often ask myself these questions: Will this code be easy for the others to edit? Does it scale? Can I forget it and change it later without being lost?

While Scalable and Modular Architecture for CSS (SMACSS) is just one methodology, the principals of modular CSS are applicable to sites large and small. Using a modular approach in tandem with Sass can greatly improve development efficiency and project maintenance. I'll discuss specific techniques, such as selector inheritance and interpolation, that can greatly reduce the amount of code written. Your code will be more portable, making it easier to use code on other projects.

Published in: Technology

SMACSS Your Sass Up

  1. 1. smacss your up
  2. 2. @minamarkham
  3. 3. “I need two demo sites” “And I need them in two days”
  4. 4. CSS is easy.
  5. 5. hard CSS is easy.
  6. 6. CSS is bullshit.
  7. 7. Modular CSS
  8. 8. Focusing on creating healthy front-end modules instead of complete pages can help break complex page layouts into reusable solutions.” “ - Dave Rupert
  9. 9. small pieces independent portable
  10. 10. Navigation, Tabs, Tables, Accordions, Lists, Dropdowns Pagination, Buttons, Labels, Inputs, Breadcrumbs, etc.
  11. 11. “Tiny Bootstraps”
  12. 12. Module, Pattern, Component, etc.
  13. 13. MVCSS, BEM, OOCSS, Suit, intuit.css
  14. 14. SMACSS
  15. 15. Scalable & Modular Architecture for CSS
  16. 16. Framework
  17. 17. categorization naming conventions depth of applicability
  18. 18. Categorization
  19. 19. base layout modules states themes
  20. 20. Base CSS resets, default styles (ex. html, body, h1, ul, etc)
  21. 21. Layout grid, major components ex. header, sidebar, nav
  22. 22. header content footer
  23. 23. sidebar header main content
  24. 24. Modules content patterns (ex. search-box, navigation, content-box)
  25. 25. navigation hero promo promo promo promo footer-text link-list
  26. 26. States module in various states
  27. 27. Themes module in various contexts
  28. 28. jessicahische.is
  29. 29. Naming Conventions
  30. 30. Base h1, h2, p, a, etc.
  31. 31. Layout .layout-*, .l-*
  32. 32. Module .<name>
  33. 33. Module .button
  34. 34. Sub-module .<name>-<state>
  35. 35. Sub-module .button-secondary
  36. 36. State .is-*
  37. 37. Theme .theme-*
  38. 38. Theme .theme-*
  39. 39. Depth of Applicability
  40. 40. header#top-menu > nav > ul > li a + div > ul > li > ul li:hover > a {…}
  41. 41. 10 generations!
  42. 42. http://specificity.keegan.st/ , , , Specificity = 0,1,1,11
  43. 43. header#top-menu > nav > ul > li a + div > ul > li > ul li:hover > a {…}
  44. 44. header#top-menu > nav > ul > li a + div > ul > li > ul li:hover > a {…}
  45. 45. .nav-subitem
  46. 46. http://specificity.keegan.st/ , , , Specificity = 0,0,1,0
  47. 47. .nav-subitem > a
  48. 48. http://specificity.keegan.st/ , , , Specificity = 0,0,1,1
  49. 49. child selectors class selectors naming conventions
  50. 50. Recap
  51. 51. categorize css rules meaningful names shallow selectors
  52. 52. add some
  53. 53. not SASS
  54. 54. Namespacing
  55. 55. the almighty ampersand
  56. 56. .btn { &:hover {…} }
  57. 57. .btn:hover {…}
  58. 58. .btn { form & {…} }
  59. 59. form .btn {…}
  60. 60. &- or &_
  61. 61. .btn { &-secondary {…} &_secondary {…} }
  62. 62. .btn-secondary {…} .btn_secondary {…}
  63. 63. nesting
  64. 64. inception rule
  65. 65. < 3 levels deep
  66. 66. .btn { &-secondary { &-icon {…} } }
  67. 67. .btn-secondary {…} .btn-secondary-icon {…}
  68. 68. .btn {…} .btn-large {…} ! <div class=“btn btn-large”>
  69. 69. @extend all the things!
  70. 70. .btn {…} .btn-large {@extend .btn;} ! <div class=“btn-large”>
  71. 71. %btn {…} .btn-large {@extend %btn;} ! <div class=“btn-large”>
  72. 72. don’t @extend between modules
  73. 73. File Structure
  74. 74. @import
  75. 75. 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.
  76. 76. 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
  77. 77. base/_index.scss @import ‘normalize'; @import 'base'; CSS resets, Normalize, element styles 01. Utilities 02. Libraries 03. Base
  78. 78. 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
  79. 79. 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
  80. 80. 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
  81. 81. 01. Utilities 02. Libraries 03. Base 04. Layout 05. Modules 06. States 07. @font-­‐face utilities/_fonts.scss Web fonts imports & declarations
  82. 82. 01. Utilities 02. Libraries 03. Base 04. Layout 05. Modules 06. States 07. @font-­‐face 08. Print states/_print.scss Print styles
  83. 83. !important
  84. 84. shame.css
  85. 85. _shame.scss
  86. 86. 01. Utilities 02. Libraries 03. Base 04. Layout 05. Modules 06. States 07. @font-­‐face 08. Print 09. Shame _shame.scss because hacks happen
  87. 87. small and readable
  88. 88. mina.so/sassyStarter
  89. 89. Theming
  90. 90. @mixin theme($name) { @if $theme == $name { @content; } }
  91. 91. $theme: rebeccapurple
  92. 92. @include theme($rebeccapurple)
  93. 93. refactor all the things!
  94. 94. refactor all the things?
  95. 95. Baby steps
  96. 96. extract components create variables apply naming conventions nest and @extend
  97. 97. mina.so/smacss-menu
  98. 98. Before: 161 lines After: 97 lines
  99. 99. Recap
  100. 100. namespace with ampersands & @extends break modules into partials refactor in chunks
  101. 101. Resources
  102. 102. smacss.com
  103. 103. sass-lang.com
  104. 104. sassmeister.com
  105. 105. mina.so/smacss thanks! @minamarkham

×