There's a huge difference between writing CSS for a 10-page website and a 1000+ page website. Figure out what makes CSS scale and patterns you can follow to keep yourself from hating yourself six months from now. Video here: http://www.infoq.com/presentations/css-patterns

1. Stop Hitting
Yourself:CSS
Design Patterns
that
Scale

2. @klamping

14. What works for
BIG
Doesn’t work for
small

15. Because we build for small

16. Because we build for small
We struggle
with BIG

17. ScaleThe ability to

18. reuse add fix
ScaleThe ability to
CODE

19. reuse add fix
ScaleThe ability to
CODE

20. reuse add fix
ScaleThe ability to
CODE

21. Reuse Code

22. Specific code
is too specific

23. Name Required
Error

24. Name Required
Error
#E9F2F9

25. Name Required
Error
#E9F2F9
#9CC4E4

26. <div class="error">
<h1>Error:</h1>
<p>Name Required</p>
</div>

27. .error h1 {
color: #E9F2F9;
}
.error p {
color: #9CC4E4;
}

28. But is it reusable?
Simple and
Semantic

29. Think

30. Think

31. Things I hate:
•Lists
•Irony
•Clichés
My Life

32. Things I hate:
•Lists
•Irony
•Clichés
My Life #E9F2F9
#9CC4E4

33. <div id="content">
<h1>My Life</h1>
<aside>
<h2>Things I Hate</h2>
<ul>
<li>Lists</li>
<li>Irony</li>
<li>Clichés</li>
</ul>
</aside>
</div>

34. .error h1,
#content h2 {...}
.error p,
#content li {...}

35. <div class="error box">
<h1 class="box-title">...</h1>
<p class="box-content">...</p>
</div>

36. .box .box-title {...}
.box .box-content {...}

37. <div id="content">
<h1>My Life</h1>
<aside class="box">
<h2 class="box-title">...</h2>
<ul class="box-content">
<li>Lists</li>
<li>Irony</li>
<li>Clichés</li>
</ul>
</aside>
</div>

38. <div id="content">
<h1>My Life</h1>
<aside class="box">
<h2 class="box-title">...</h2>
<ul class="box-content">
<li>Lists</li>
<li>Irony</li>
<li>Clichés</li>
</ul>
</aside>
</div>

40. Design
outsideyour needs

41. Design
outsideyour needs
Abstract your CSS,
just like other code

42. Design
outsideyour needs
Build components,
not implementations

43. Design
outsideyour needs
Literally,
think outside the box

44. Design
outsideyour needs
No “Magic Numbers”

46. .site-title {
height: 30px;
}

47. .site-title {
height: 30px;
}

48. .site-title {
min-height: 30px;
}

49. .site-title {
min-height: 30px;
}

50. .site-title {
min-height: 30px;
}
css-tricks.com/magic-numbers-in-css/

51. Documentation,
Examples, Styleguide
Component
Dashboards

53. Component List

54. Documentation

55. Examples

56. Code Sample

58. // A button suitable for giving stars to someone.
//
// :hover - Subtle hover highlight.
// .stars-given - A highlight indicating you've already
// given a star.
// .stars-given:hover - Subtle hover highlight on top of stars-
// given styling.
// .disabled - Dims the button to indicate it cannot
// be used.
//
// Styleguide 1.1.
a.button.star{
...
&.star-given{
...
}
&.disabled{
...
}
}

59. // A button suitable for giving stars to someone.
//
// :hover - Subtle hover highlight.
// .stars-given - A highlight indicating you've already
// given a star.
// .stars-given:hover - Subtle hover highlight on top of stars-
// given styling.
// .disabled - Dims the button to indicate it cannot
// be used.
//
// Styleguide 1.1.
a.button.star{
...
&.star-given{
...
}
&.disabled{
...
}
}
Structure

60. // A button suitable for giving stars to someone.
//
// :hover - Subtle hover highlight.
// .stars-given - A highlight indicating you've already
// given a star.
// .stars-given:hover - Subtle hover highlight on top of stars-
// given styling.
// .disabled - Dims the button to indicate it cannot
// be used.
//
// Styleguide 1.1.
a.button.star{
...
&.star-given{
...
}
&.disabled{
...
}
}
Description

61. // A button suitable for giving stars to someone.
//
// :hover - Subtle hover highlight.
// .stars-given - A highlight indicating you've already
// given a star.
// .stars-given:hover - Subtle hover highlight on top of stars-
// given styling.
// .disabled - Dims the button to indicate it cannot
// be used.
//
// Styleguide 1.1.
a.button.star{
...
&.star-given{
...
}
&.disabled{
...
}
}
Variations

63. Add Code

64. Specificity
One ID to rule them all

65. <div id="content">
<h1>One does not simply:</h1>
<ul>
<li>Walk into Mordor</li>
<li>Override an ID</li>
</ul>
</div>

66. <div id="content">
<h1>One does not simply:</h1>
<ul>
<li>Walk into Mordor</li>
<li>Override an ID</li>
</ul>
</div>

67. <div id="content">
<h1>One does not simply:</h1>
<ul>
<li>Walk into Mordor</li>
<li>Override an ID</li>
</ul>
</div>

68. #content ul {
margin-left: 10px;
}
#content ul li {
list-style: square;
}

69. <div id="content">
...
<aside id="related">
<h2>Other overused memes:</h2>
<ul>
<li>What if I told you...</li>
<li>I don’t always...</li>
<li>Keep calm...</li>
</ul>
</aside>
...

70. #content ul {
margin-left: 10px;
}
#content ul li {
list-style: square;
}
#content #related ul {
margin-left: 0;
}
#content #related ul li {
list-style: none;
background: url(rage-face.png);
}

71. #content ul {
margin-left: 10px;
}
#content ul li {
list-style: square;
}
#content #related ul {
margin-left: 0;
}
#content #related ul li {
list-style: none;
background: url(rage-face.png);
}
Override

72. #content ul {
margin-left: 10px;
}
#content ul li {
list-style: square;
}
#content #related ul {
margin-left: 0;
}
#content #related ul li {
list-style: none;
background: url(rage-face.png);
}
IDs

73. <div id="content">
...
<aside id="related">
<div class="warning">
<h2>This post contains:</h2>
<ul>
<li>Vulgarity</li>
<li>Grumpy Cats</li>
</ul>
</div>
...

74. #content #related ul {
margin-left: 0;
}
#content #related ul li {
list-style: none;
background: url(rage-face.png);
}
#content #related .warning ul {
margin-left: 10px;
}
#content #related .warning ul li {
background: none;
list-style: disc;
}

76. <div class="content">
<h1>One does not simply:</h1>
<ul class="list">
<li class="item">...</li>
<li class="item">...</li>
</ul>
</div>

77. <div class="content">
<h1>One does not simply:</h1>
<ul class="list">
<li class="item">...</li>
<li class="item">...</li>
</ul>
</div>
What?!

79. .content .list {
margin-left: 10px;
}
.content .list .item {
list-style: square;
}

80. <div class="content">
...
<aside class="related">
<h2>Other overused memes:</h2>
<ul class="rage-list">
<li class="item">...</li>
<li class="item">...</li>
<li class="item">...</li>
</ul>
</aside>
...

81. .content .list {...}
.content .list .item {...}
.rage-list .item {
background: url(rage-face.png);
}

82. .content .list {...}
.content .list .item {...}
.rage-list .item {
background: url(rage-face.png);
}
Look Ma!
No Overrides

83. <div class="content">
...
<aside class="related">
<div class="warning">
<h2>This post contains:</h2>
<ul class="list">
<li class="item">...</li>
<li class="item">...</li>
</ul>
</div>
...

84. <div class="content">
...
<aside class="related">
<div class="warning">
<h2>This post contains:</h2>
<ul class="list">
<li class="item">...</li>
<li class="item">...</li>
</ul>
</div>
...

85. .content .list {...}
.content .list .item {...}
.rage-list .item {...}
.warning .list .item {
list-style: disc;
}

86. #content ul {
margin-left: 10px;
}
#content ul li {
list-style: square;
}
#content #related ul {
margin-left: 0;
}
#content #related ul li {
list-style: none;
background: url(rage-face.png);
}
#content #related .warning ul {
margin-left: 10px;
}
#content #related .warning ul li {
background: none;
list-style: disc;
}

87. .content .list {
margin-left: 10px;
}
.content .list .item {
list-style: square;
}
.rage-list .item {
background: url(rage-face.png);
}
.warning .list .item {
list-style: disc;
}

88. .content .list {
margin-left: 10px;
}
.content .list .item {
list-style: square;
}
.rage-list .item {
background: url(rage-face.png);
}
.warning .list .item {
list-style: disc;
}
Shorter Selectors

89. .content .list {
margin-left: 10px;
}
.content .list .item {
list-style: square;
}
.rage-list .item {
background: url(rage-face.png);
}
.warning .list .item {
list-style: disc;
}
Less Code

90. .content .list {
margin-left: 10px;
}
.content .list .item {
list-style: square;
}
.rage-list .item {
background: url(rage-face.png);
}
.warning .list .item {
list-style: disc;
}
Less Duplication

91. .content .list {
margin-left: 10px;
}
.content .list .item {
list-style: square;
}
.rage-list .item {
background: url(rage-face.png);
}
.warning .list .item {
list-style: disc;
}
More Re-use

92. Write to
Re-write

93. Fix Bugs

94. http://xkcd.com/1172/

95. Fixing Bugs

96. Fixing Bugs
not the fall that
kills you
bug
^It’s

97. the sudden stop
Fixing Bugs
backwards compatibility^
It’s

98. Fear of Regression

99. Fear of Regression
is a friction

100. Fear of Regression
slows progress

101. Fear of Regression
stifles innovation

102. Fear of Regression
is what stops you

103. No Fear
Version your code

104. Don’t Push
Let teams pull

105. But I only have one
CSS file!

106. One file per
component
But I only have one
CSS file!

107. Man, I hate
this solution...
but it works ”
“

108. Man,
this solution
is messed up;
what does it
even do? ”
“

109. div {
background/**/: blue;
}

110. div {
background/**/: blue;
}
Hack or fat-finger?

111. div {
#color: blue;
}

112. div {
#color: blue;
}
Huh?

113. CSSDoc

114. div {
/**
* @workaround IE color bug
* @affected IE6, IE7, IE8
* @css-for IE6, IE7
*/
#color: blue;
}

115. div {
/**
* @workaround IE color bug
* @affected IE6, IE7, IE8
* @css-for IE6, IE7
*/
#color: blue;
}

116. div {
/**
* @workaround IE color bug
* @affected IE6, IE7, IE8
* @css-for IE6, IE7
*/
#color: blue;
}

117. div {
/**
* @workaround IE color bug
* @affected IE6, IE7, IE8
* @css-for IE6, IE7
*/
#color: blue;
}

118. div {
/**
* @workaround IE color bug
* @affected IE6, IE7, IE8
* @css-for IE6, IE7
*/
#color: blue;
}

119. div {
/**
* @workaround IE color bug
* @affected IE6, IE7, IE8
* @css-for IE6, IE7
*/
#color: blue;
}

121. div {
color: blue;
height :12px; }
p{ color:#339;}

122. div {
color: #0F0;
height: 12px;
}
p {
color: #339;
}

123. Use Design
Patterns
You already know
them

124. Leave out
the details
that don’t
matter

125. Build a
pattern
library

126. Don’t start
an arms
race with
selectors

127. Version your
CSS and
live free
again

128. Document
your
intentions

129. Treat style
with respect

130. SMACSS
OOCSS

131. CreditsFont Awesome by Dave Gandy
http://fortawesome.github.com/Font-Awesome
Inconsolata Font
http://www.levien.com/type/myfonts/inconsolata.html
Kudos to Michael P. Gilbert
http://www.mpgilbert.com/

132. Thanks
@klamping