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.

1. smacss
your up

2. @minamarkham

4. “I need two demo sites”
“And I need them
in two days”

6. CSS is easy.

7. hard
CSS is easy.

10. CSS is bullshit.

11. Modular CSS

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

15. small pieces
independent
portable

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

17. “Tiny Bootstraps”

19. Module, Pattern,
Component, etc.

20. MVCSS, BEM,
OOCSS, Suit,
intuit.css

21. SMACSS

22. Scalable & Modular
Architecture for CSS

24. Framework

25. categorization
naming conventions
depth of applicability

26. Categorization

27. base
layout
modules
states
themes

28. Base
CSS resets, default styles
(ex. html, body, h1, ul, etc)

29. Layout
grid, major components
ex. header, sidebar, nav

30. header
content
footer

31. sidebar
header
main content

32. Modules
content patterns
(ex. search-box, navigation, content-box)

33. navigation
hero
promo promo promo promo
footer-text
link-list

34. States
module in various states

37. Themes
module in various contexts

38. jessicahische.is

39. Naming
Conventions

40. Base
h1, h2, p, a, etc.

41. Layout
.layout-*, .l-*

42. Module
.<name>

43. Module
.button

44. Sub-module
.<name>-<state>

45. Sub-module
.button-secondary

46. State
.is-*

47. Theme
.theme-*

48. Theme
.theme-*

49. Depth of
Applicability

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

51. 10 generations!

52. http://specificity.keegan.st/
, , ,
Specificity = 0,1,1,11

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

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

55. .nav-subitem

56. http://specificity.keegan.st/
, , ,
Specificity = 0,0,1,0

57. .nav-subitem > a

58. http://specificity.keegan.st/
, , ,
Specificity = 0,0,1,1

59. child selectors
class selectors
naming conventions

60. Recap

61. categorize css rules
meaningful names
shallow selectors

62. add some

63. not SASS

64. Namespacing

65. the almighty ampersand

66. .btn {
&:hover {…}
}

67. .btn:hover {…}

68. .btn {
form & {…}
}

69. form .btn {…}

70. &- or &_

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

72. .btn-secondary {…}
.btn_secondary {…}

73. nesting

74. inception rule

75. < 3 levels deep

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

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

78. .btn {…}
.btn-large {…}
!
<div class=“btn btn-large”>

79. @extend
all the things!

80. .btn {…}
.btn-large {@extend .btn;}
!
<div class=“btn-large”>

81. %btn {…}
.btn-large {@extend %btn;}
!
<div class=“btn-large”>

82. don’t @extend
between modules

83. File Structure

84. @import

85. 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.

86. 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

87. base/_index.scss
@import
‘normalize';
@import
'base';
CSS resets, Normalize,
element styles
01.
Utilities
02.
Libraries
03.
Base

88. 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

89. 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

90. 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

91. 01.
Utilities
02.
Libraries
03.
Base
04.
Layout
05.
Modules
06.
States
07.
@font-­‐face
utilities/_fonts.scss Web fonts imports & declarations

92. 01.
Utilities
02.
Libraries
03.
Base
04.
Layout
05.
Modules
06.
States
07.
@font-­‐face
08.
Print
states/_print.scss Print styles

93. !important

95. shame.css

96. _shame.scss

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

98. small and
readable

99. mina.so/sassyStarter

100. Theming

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

102. $theme:
rebeccapurple

103. @include theme($rebeccapurple)

105. refactor
all the things!

107. refactor
all the things?

108. Baby steps

109. extract components
create variables
apply naming conventions
nest and @extend

110. mina.so/smacss-menu

111. Before: 161 lines
After: 97 lines

112. Recap

113. namespace with
ampersands & @extends
break modules into partials
refactor in chunks

114. Resources

115. smacss.com

116. sass-lang.com

117. sassmeister.com

118. mina.so/smacss
thanks!
@minamarkham