stop hitting yourself: css design patterns that scale
DESCRIPTION
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-patternsTRANSCRIPT
![Page 1: Stop Hitting Yourself: CSS Design Patterns that Scale](https://reader033.vdocuments.net/reader033/viewer/2022042714/54b79eac4a795997768b45b1/html5/thumbnails/1.jpg)
Stop Hitting Yourself:CSSDesign PatternsthatScale
![Page 2: Stop Hitting Yourself: CSS Design Patterns that Scale](https://reader033.vdocuments.net/reader033/viewer/2022042714/54b79eac4a795997768b45b1/html5/thumbnails/2.jpg)
@klamping
![Page 3: Stop Hitting Yourself: CSS Design Patterns that Scale](https://reader033.vdocuments.net/reader033/viewer/2022042714/54b79eac4a795997768b45b1/html5/thumbnails/3.jpg)
![Page 4: Stop Hitting Yourself: CSS Design Patterns that Scale](https://reader033.vdocuments.net/reader033/viewer/2022042714/54b79eac4a795997768b45b1/html5/thumbnails/4.jpg)
![Page 5: Stop Hitting Yourself: CSS Design Patterns that Scale](https://reader033.vdocuments.net/reader033/viewer/2022042714/54b79eac4a795997768b45b1/html5/thumbnails/5.jpg)
![Page 6: Stop Hitting Yourself: CSS Design Patterns that Scale](https://reader033.vdocuments.net/reader033/viewer/2022042714/54b79eac4a795997768b45b1/html5/thumbnails/6.jpg)
![Page 7: Stop Hitting Yourself: CSS Design Patterns that Scale](https://reader033.vdocuments.net/reader033/viewer/2022042714/54b79eac4a795997768b45b1/html5/thumbnails/7.jpg)
![Page 8: Stop Hitting Yourself: CSS Design Patterns that Scale](https://reader033.vdocuments.net/reader033/viewer/2022042714/54b79eac4a795997768b45b1/html5/thumbnails/8.jpg)
![Page 9: Stop Hitting Yourself: CSS Design Patterns that Scale](https://reader033.vdocuments.net/reader033/viewer/2022042714/54b79eac4a795997768b45b1/html5/thumbnails/9.jpg)
![Page 10: Stop Hitting Yourself: CSS Design Patterns that Scale](https://reader033.vdocuments.net/reader033/viewer/2022042714/54b79eac4a795997768b45b1/html5/thumbnails/10.jpg)
![Page 11: Stop Hitting Yourself: CSS Design Patterns that Scale](https://reader033.vdocuments.net/reader033/viewer/2022042714/54b79eac4a795997768b45b1/html5/thumbnails/11.jpg)
![Page 12: Stop Hitting Yourself: CSS Design Patterns that Scale](https://reader033.vdocuments.net/reader033/viewer/2022042714/54b79eac4a795997768b45b1/html5/thumbnails/12.jpg)
![Page 13: Stop Hitting Yourself: CSS Design Patterns that Scale](https://reader033.vdocuments.net/reader033/viewer/2022042714/54b79eac4a795997768b45b1/html5/thumbnails/13.jpg)
![Page 14: Stop Hitting Yourself: CSS Design Patterns that Scale](https://reader033.vdocuments.net/reader033/viewer/2022042714/54b79eac4a795997768b45b1/html5/thumbnails/14.jpg)
What works for
BIGDoesn’t work for
small
![Page 15: Stop Hitting Yourself: CSS Design Patterns that Scale](https://reader033.vdocuments.net/reader033/viewer/2022042714/54b79eac4a795997768b45b1/html5/thumbnails/15.jpg)
Because we build for small
![Page 16: Stop Hitting Yourself: CSS Design Patterns that Scale](https://reader033.vdocuments.net/reader033/viewer/2022042714/54b79eac4a795997768b45b1/html5/thumbnails/16.jpg)
Because we build for small
We struggle with BIG
![Page 17: Stop Hitting Yourself: CSS Design Patterns that Scale](https://reader033.vdocuments.net/reader033/viewer/2022042714/54b79eac4a795997768b45b1/html5/thumbnails/17.jpg)
Scale The ability to
![Page 18: Stop Hitting Yourself: CSS Design Patterns that Scale](https://reader033.vdocuments.net/reader033/viewer/2022042714/54b79eac4a795997768b45b1/html5/thumbnails/18.jpg)
reuse add fixScale The ability to
CODE
![Page 19: Stop Hitting Yourself: CSS Design Patterns that Scale](https://reader033.vdocuments.net/reader033/viewer/2022042714/54b79eac4a795997768b45b1/html5/thumbnails/19.jpg)
reuse add fixScale The ability to
CODE
![Page 20: Stop Hitting Yourself: CSS Design Patterns that Scale](https://reader033.vdocuments.net/reader033/viewer/2022042714/54b79eac4a795997768b45b1/html5/thumbnails/20.jpg)
reuse add fixScale The ability to
CODE
![Page 21: Stop Hitting Yourself: CSS Design Patterns that Scale](https://reader033.vdocuments.net/reader033/viewer/2022042714/54b79eac4a795997768b45b1/html5/thumbnails/21.jpg)
Reuse Code
![Page 22: Stop Hitting Yourself: CSS Design Patterns that Scale](https://reader033.vdocuments.net/reader033/viewer/2022042714/54b79eac4a795997768b45b1/html5/thumbnails/22.jpg)
Specific codeis too specific
![Page 23: Stop Hitting Yourself: CSS Design Patterns that Scale](https://reader033.vdocuments.net/reader033/viewer/2022042714/54b79eac4a795997768b45b1/html5/thumbnails/23.jpg)
Name Required
Error
![Page 24: Stop Hitting Yourself: CSS Design Patterns that Scale](https://reader033.vdocuments.net/reader033/viewer/2022042714/54b79eac4a795997768b45b1/html5/thumbnails/24.jpg)
Name Required
Error#E9F2F9
![Page 25: Stop Hitting Yourself: CSS Design Patterns that Scale](https://reader033.vdocuments.net/reader033/viewer/2022042714/54b79eac4a795997768b45b1/html5/thumbnails/25.jpg)
Name Required
Error#E9F2F9
#9CC4E4
![Page 26: Stop Hitting Yourself: CSS Design Patterns that Scale](https://reader033.vdocuments.net/reader033/viewer/2022042714/54b79eac4a795997768b45b1/html5/thumbnails/26.jpg)
<div class="error"> <h1>Error:</h1> <p>Name Required</p></div>
![Page 27: Stop Hitting Yourself: CSS Design Patterns that Scale](https://reader033.vdocuments.net/reader033/viewer/2022042714/54b79eac4a795997768b45b1/html5/thumbnails/27.jpg)
.error h1 { color: #E9F2F9;}.error p { color: #9CC4E4;}
![Page 28: Stop Hitting Yourself: CSS Design Patterns that Scale](https://reader033.vdocuments.net/reader033/viewer/2022042714/54b79eac4a795997768b45b1/html5/thumbnails/28.jpg)
But is it reusable?
Simple and Semantic
![Page 29: Stop Hitting Yourself: CSS Design Patterns that Scale](https://reader033.vdocuments.net/reader033/viewer/2022042714/54b79eac4a795997768b45b1/html5/thumbnails/29.jpg)
Think
![Page 30: Stop Hitting Yourself: CSS Design Patterns that Scale](https://reader033.vdocuments.net/reader033/viewer/2022042714/54b79eac4a795997768b45b1/html5/thumbnails/30.jpg)
Think
![Page 31: Stop Hitting Yourself: CSS Design Patterns that Scale](https://reader033.vdocuments.net/reader033/viewer/2022042714/54b79eac4a795997768b45b1/html5/thumbnails/31.jpg)
Things I hate:•Lists•Irony•Clichés
My Life
![Page 32: Stop Hitting Yourself: CSS Design Patterns that Scale](https://reader033.vdocuments.net/reader033/viewer/2022042714/54b79eac4a795997768b45b1/html5/thumbnails/32.jpg)
Things I hate:•Lists•Irony•Clichés
My Life #E9F2F9
#9CC4E4
![Page 33: Stop Hitting Yourself: CSS Design Patterns that Scale](https://reader033.vdocuments.net/reader033/viewer/2022042714/54b79eac4a795997768b45b1/html5/thumbnails/33.jpg)
<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>
![Page 34: Stop Hitting Yourself: CSS Design Patterns that Scale](https://reader033.vdocuments.net/reader033/viewer/2022042714/54b79eac4a795997768b45b1/html5/thumbnails/34.jpg)
.error h1,#content h2 {...}.error p,#content li {...}
![Page 35: Stop Hitting Yourself: CSS Design Patterns that Scale](https://reader033.vdocuments.net/reader033/viewer/2022042714/54b79eac4a795997768b45b1/html5/thumbnails/35.jpg)
<div class="error box"> <h1 class="box-title">...</h1> <p class="box-content">...</p></div>
![Page 36: Stop Hitting Yourself: CSS Design Patterns that Scale](https://reader033.vdocuments.net/reader033/viewer/2022042714/54b79eac4a795997768b45b1/html5/thumbnails/36.jpg)
.box .box-title {...}
.box .box-content {...}
![Page 37: Stop Hitting Yourself: CSS Design Patterns that Scale](https://reader033.vdocuments.net/reader033/viewer/2022042714/54b79eac4a795997768b45b1/html5/thumbnails/37.jpg)
<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>
![Page 38: Stop Hitting Yourself: CSS Design Patterns that Scale](https://reader033.vdocuments.net/reader033/viewer/2022042714/54b79eac4a795997768b45b1/html5/thumbnails/38.jpg)
<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>
![Page 39: Stop Hitting Yourself: CSS Design Patterns that Scale](https://reader033.vdocuments.net/reader033/viewer/2022042714/54b79eac4a795997768b45b1/html5/thumbnails/39.jpg)
![Page 40: Stop Hitting Yourself: CSS Design Patterns that Scale](https://reader033.vdocuments.net/reader033/viewer/2022042714/54b79eac4a795997768b45b1/html5/thumbnails/40.jpg)
Design outside
your needs
![Page 41: Stop Hitting Yourself: CSS Design Patterns that Scale](https://reader033.vdocuments.net/reader033/viewer/2022042714/54b79eac4a795997768b45b1/html5/thumbnails/41.jpg)
Design outside
your needs
Abstract your CSS, just like other code
![Page 42: Stop Hitting Yourself: CSS Design Patterns that Scale](https://reader033.vdocuments.net/reader033/viewer/2022042714/54b79eac4a795997768b45b1/html5/thumbnails/42.jpg)
Design outside
your needs
Build components, not implementations
![Page 43: Stop Hitting Yourself: CSS Design Patterns that Scale](https://reader033.vdocuments.net/reader033/viewer/2022042714/54b79eac4a795997768b45b1/html5/thumbnails/43.jpg)
Design outside
your needs
Literally, think outside the box
![Page 44: Stop Hitting Yourself: CSS Design Patterns that Scale](https://reader033.vdocuments.net/reader033/viewer/2022042714/54b79eac4a795997768b45b1/html5/thumbnails/44.jpg)
Design outside
your needs
No “Magic Numbers”
![Page 45: Stop Hitting Yourself: CSS Design Patterns that Scale](https://reader033.vdocuments.net/reader033/viewer/2022042714/54b79eac4a795997768b45b1/html5/thumbnails/45.jpg)
![Page 46: Stop Hitting Yourself: CSS Design Patterns that Scale](https://reader033.vdocuments.net/reader033/viewer/2022042714/54b79eac4a795997768b45b1/html5/thumbnails/46.jpg)
.site-title { height: 30px;}
![Page 47: Stop Hitting Yourself: CSS Design Patterns that Scale](https://reader033.vdocuments.net/reader033/viewer/2022042714/54b79eac4a795997768b45b1/html5/thumbnails/47.jpg)
.site-title { height: 30px;}
![Page 48: Stop Hitting Yourself: CSS Design Patterns that Scale](https://reader033.vdocuments.net/reader033/viewer/2022042714/54b79eac4a795997768b45b1/html5/thumbnails/48.jpg)
.site-title { min-height: 30px;}
![Page 49: Stop Hitting Yourself: CSS Design Patterns that Scale](https://reader033.vdocuments.net/reader033/viewer/2022042714/54b79eac4a795997768b45b1/html5/thumbnails/49.jpg)
.site-title { min-height: 30px;}
![Page 50: Stop Hitting Yourself: CSS Design Patterns that Scale](https://reader033.vdocuments.net/reader033/viewer/2022042714/54b79eac4a795997768b45b1/html5/thumbnails/50.jpg)
.site-title { min-height: 30px;}css-tricks.com/magic-numbers-in-css/
![Page 51: Stop Hitting Yourself: CSS Design Patterns that Scale](https://reader033.vdocuments.net/reader033/viewer/2022042714/54b79eac4a795997768b45b1/html5/thumbnails/51.jpg)
Documentation, Examples, Styleguide
ComponentDashboards
![Page 52: Stop Hitting Yourself: CSS Design Patterns that Scale](https://reader033.vdocuments.net/reader033/viewer/2022042714/54b79eac4a795997768b45b1/html5/thumbnails/52.jpg)
![Page 53: Stop Hitting Yourself: CSS Design Patterns that Scale](https://reader033.vdocuments.net/reader033/viewer/2022042714/54b79eac4a795997768b45b1/html5/thumbnails/53.jpg)
Component List
![Page 54: Stop Hitting Yourself: CSS Design Patterns that Scale](https://reader033.vdocuments.net/reader033/viewer/2022042714/54b79eac4a795997768b45b1/html5/thumbnails/54.jpg)
Documentation
![Page 55: Stop Hitting Yourself: CSS Design Patterns that Scale](https://reader033.vdocuments.net/reader033/viewer/2022042714/54b79eac4a795997768b45b1/html5/thumbnails/55.jpg)
Examples
![Page 56: Stop Hitting Yourself: CSS Design Patterns that Scale](https://reader033.vdocuments.net/reader033/viewer/2022042714/54b79eac4a795997768b45b1/html5/thumbnails/56.jpg)
Code Sample
![Page 57: Stop Hitting Yourself: CSS Design Patterns that Scale](https://reader033.vdocuments.net/reader033/viewer/2022042714/54b79eac4a795997768b45b1/html5/thumbnails/57.jpg)
![Page 58: Stop Hitting Yourself: CSS Design Patterns that Scale](https://reader033.vdocuments.net/reader033/viewer/2022042714/54b79eac4a795997768b45b1/html5/thumbnails/58.jpg)
// 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{ ... }}
![Page 59: Stop Hitting Yourself: CSS Design Patterns that Scale](https://reader033.vdocuments.net/reader033/viewer/2022042714/54b79eac4a795997768b45b1/html5/thumbnails/59.jpg)
// 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
![Page 60: Stop Hitting Yourself: CSS Design Patterns that Scale](https://reader033.vdocuments.net/reader033/viewer/2022042714/54b79eac4a795997768b45b1/html5/thumbnails/60.jpg)
// 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
![Page 61: Stop Hitting Yourself: CSS Design Patterns that Scale](https://reader033.vdocuments.net/reader033/viewer/2022042714/54b79eac4a795997768b45b1/html5/thumbnails/61.jpg)
// 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
![Page 62: Stop Hitting Yourself: CSS Design Patterns that Scale](https://reader033.vdocuments.net/reader033/viewer/2022042714/54b79eac4a795997768b45b1/html5/thumbnails/62.jpg)
![Page 63: Stop Hitting Yourself: CSS Design Patterns that Scale](https://reader033.vdocuments.net/reader033/viewer/2022042714/54b79eac4a795997768b45b1/html5/thumbnails/63.jpg)
Add Code
![Page 64: Stop Hitting Yourself: CSS Design Patterns that Scale](https://reader033.vdocuments.net/reader033/viewer/2022042714/54b79eac4a795997768b45b1/html5/thumbnails/64.jpg)
SpecificityOne ID to rule them all
![Page 65: Stop Hitting Yourself: CSS Design Patterns that Scale](https://reader033.vdocuments.net/reader033/viewer/2022042714/54b79eac4a795997768b45b1/html5/thumbnails/65.jpg)
<div id="content"> <h1>One does not simply:</h1> <ul> <li>Walk into Mordor</li> <li>Override an ID</li> </ul></div>
![Page 66: Stop Hitting Yourself: CSS Design Patterns that Scale](https://reader033.vdocuments.net/reader033/viewer/2022042714/54b79eac4a795997768b45b1/html5/thumbnails/66.jpg)
<div id="content"> <h1>One does not simply:</h1> <ul> <li>Walk into Mordor</li> <li>Override an ID</li> </ul></div>
![Page 67: Stop Hitting Yourself: CSS Design Patterns that Scale](https://reader033.vdocuments.net/reader033/viewer/2022042714/54b79eac4a795997768b45b1/html5/thumbnails/67.jpg)
<div id="content"> <h1>One does not simply:</h1> <ul> <li>Walk into Mordor</li> <li>Override an ID</li> </ul></div>
![Page 68: Stop Hitting Yourself: CSS Design Patterns that Scale](https://reader033.vdocuments.net/reader033/viewer/2022042714/54b79eac4a795997768b45b1/html5/thumbnails/68.jpg)
#content ul { margin-left: 10px;}#content ul li { list-style: square;}
![Page 69: Stop Hitting Yourself: CSS Design Patterns that Scale](https://reader033.vdocuments.net/reader033/viewer/2022042714/54b79eac4a795997768b45b1/html5/thumbnails/69.jpg)
<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> ...
![Page 70: Stop Hitting Yourself: CSS Design Patterns that Scale](https://reader033.vdocuments.net/reader033/viewer/2022042714/54b79eac4a795997768b45b1/html5/thumbnails/70.jpg)
#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);}
![Page 71: Stop Hitting Yourself: CSS Design Patterns that Scale](https://reader033.vdocuments.net/reader033/viewer/2022042714/54b79eac4a795997768b45b1/html5/thumbnails/71.jpg)
#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
![Page 72: Stop Hitting Yourself: CSS Design Patterns that Scale](https://reader033.vdocuments.net/reader033/viewer/2022042714/54b79eac4a795997768b45b1/html5/thumbnails/72.jpg)
#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
![Page 73: Stop Hitting Yourself: CSS Design Patterns that Scale](https://reader033.vdocuments.net/reader033/viewer/2022042714/54b79eac4a795997768b45b1/html5/thumbnails/73.jpg)
<div id="content"> ... <aside id="related"> <div class="warning"> <h2>This post contains:</h2> <ul> <li>Vulgarity</li> <li>Grumpy Cats</li> </ul> </div> ...
![Page 74: Stop Hitting Yourself: CSS Design Patterns that Scale](https://reader033.vdocuments.net/reader033/viewer/2022042714/54b79eac4a795997768b45b1/html5/thumbnails/74.jpg)
#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;}
![Page 75: Stop Hitting Yourself: CSS Design Patterns that Scale](https://reader033.vdocuments.net/reader033/viewer/2022042714/54b79eac4a795997768b45b1/html5/thumbnails/75.jpg)
![Page 76: Stop Hitting Yourself: CSS Design Patterns that Scale](https://reader033.vdocuments.net/reader033/viewer/2022042714/54b79eac4a795997768b45b1/html5/thumbnails/76.jpg)
<div class="content"> <h1>One does not simply:</h1> <ul class="list"> <li class="item">...</li> <li class="item">...</li> </ul></div>
![Page 77: Stop Hitting Yourself: CSS Design Patterns that Scale](https://reader033.vdocuments.net/reader033/viewer/2022042714/54b79eac4a795997768b45b1/html5/thumbnails/77.jpg)
<div class="content"> <h1>One does not simply:</h1> <ul class="list"> <li class="item">...</li> <li class="item">...</li> </ul></div>
What?!
![Page 78: Stop Hitting Yourself: CSS Design Patterns that Scale](https://reader033.vdocuments.net/reader033/viewer/2022042714/54b79eac4a795997768b45b1/html5/thumbnails/78.jpg)
![Page 79: Stop Hitting Yourself: CSS Design Patterns that Scale](https://reader033.vdocuments.net/reader033/viewer/2022042714/54b79eac4a795997768b45b1/html5/thumbnails/79.jpg)
.content .list { margin-left: 10px;}.content .list .item { list-style: square;}
![Page 80: Stop Hitting Yourself: CSS Design Patterns that Scale](https://reader033.vdocuments.net/reader033/viewer/2022042714/54b79eac4a795997768b45b1/html5/thumbnails/80.jpg)
<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> ...
![Page 81: Stop Hitting Yourself: CSS Design Patterns that Scale](https://reader033.vdocuments.net/reader033/viewer/2022042714/54b79eac4a795997768b45b1/html5/thumbnails/81.jpg)
.content .list {...}
.content .list .item {...}
.rage-list .item { background: url(rage-face.png);}
![Page 82: Stop Hitting Yourself: CSS Design Patterns that Scale](https://reader033.vdocuments.net/reader033/viewer/2022042714/54b79eac4a795997768b45b1/html5/thumbnails/82.jpg)
.content .list {...}
.content .list .item {...}
.rage-list .item { background: url(rage-face.png);}
Look Ma!
No Overrides
![Page 83: Stop Hitting Yourself: CSS Design Patterns that Scale](https://reader033.vdocuments.net/reader033/viewer/2022042714/54b79eac4a795997768b45b1/html5/thumbnails/83.jpg)
<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> ...
![Page 84: Stop Hitting Yourself: CSS Design Patterns that Scale](https://reader033.vdocuments.net/reader033/viewer/2022042714/54b79eac4a795997768b45b1/html5/thumbnails/84.jpg)
<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> ...
![Page 85: Stop Hitting Yourself: CSS Design Patterns that Scale](https://reader033.vdocuments.net/reader033/viewer/2022042714/54b79eac4a795997768b45b1/html5/thumbnails/85.jpg)
.content .list {...}
.content .list .item {...}
.rage-list .item {...}
.warning .list .item { list-style: disc;}
![Page 86: Stop Hitting Yourself: CSS Design Patterns that Scale](https://reader033.vdocuments.net/reader033/viewer/2022042714/54b79eac4a795997768b45b1/html5/thumbnails/86.jpg)
#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;}
![Page 87: Stop Hitting Yourself: CSS Design Patterns that Scale](https://reader033.vdocuments.net/reader033/viewer/2022042714/54b79eac4a795997768b45b1/html5/thumbnails/87.jpg)
.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;}
![Page 88: Stop Hitting Yourself: CSS Design Patterns that Scale](https://reader033.vdocuments.net/reader033/viewer/2022042714/54b79eac4a795997768b45b1/html5/thumbnails/88.jpg)
.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
![Page 89: Stop Hitting Yourself: CSS Design Patterns that Scale](https://reader033.vdocuments.net/reader033/viewer/2022042714/54b79eac4a795997768b45b1/html5/thumbnails/89.jpg)
.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
![Page 90: Stop Hitting Yourself: CSS Design Patterns that Scale](https://reader033.vdocuments.net/reader033/viewer/2022042714/54b79eac4a795997768b45b1/html5/thumbnails/90.jpg)
.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
![Page 91: Stop Hitting Yourself: CSS Design Patterns that Scale](https://reader033.vdocuments.net/reader033/viewer/2022042714/54b79eac4a795997768b45b1/html5/thumbnails/91.jpg)
.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
![Page 92: Stop Hitting Yourself: CSS Design Patterns that Scale](https://reader033.vdocuments.net/reader033/viewer/2022042714/54b79eac4a795997768b45b1/html5/thumbnails/92.jpg)
Write to Re-write
![Page 93: Stop Hitting Yourself: CSS Design Patterns that Scale](https://reader033.vdocuments.net/reader033/viewer/2022042714/54b79eac4a795997768b45b1/html5/thumbnails/93.jpg)
Fix Bugs
![Page 95: Stop Hitting Yourself: CSS Design Patterns that Scale](https://reader033.vdocuments.net/reader033/viewer/2022042714/54b79eac4a795997768b45b1/html5/thumbnails/95.jpg)
Fixing Bugs
![Page 96: Stop Hitting Yourself: CSS Design Patterns that Scale](https://reader033.vdocuments.net/reader033/viewer/2022042714/54b79eac4a795997768b45b1/html5/thumbnails/96.jpg)
Fixing Bugsnot the fall that
kills you
bug^It’s
![Page 97: Stop Hitting Yourself: CSS Design Patterns that Scale](https://reader033.vdocuments.net/reader033/viewer/2022042714/54b79eac4a795997768b45b1/html5/thumbnails/97.jpg)
the sudden stop
Fixing Bugs
backwards compatibility^It’s
![Page 98: Stop Hitting Yourself: CSS Design Patterns that Scale](https://reader033.vdocuments.net/reader033/viewer/2022042714/54b79eac4a795997768b45b1/html5/thumbnails/98.jpg)
Fear of Regression
![Page 99: Stop Hitting Yourself: CSS Design Patterns that Scale](https://reader033.vdocuments.net/reader033/viewer/2022042714/54b79eac4a795997768b45b1/html5/thumbnails/99.jpg)
Fear of Regressionis a friction
![Page 100: Stop Hitting Yourself: CSS Design Patterns that Scale](https://reader033.vdocuments.net/reader033/viewer/2022042714/54b79eac4a795997768b45b1/html5/thumbnails/100.jpg)
Fear of Regressionslows progress
![Page 101: Stop Hitting Yourself: CSS Design Patterns that Scale](https://reader033.vdocuments.net/reader033/viewer/2022042714/54b79eac4a795997768b45b1/html5/thumbnails/101.jpg)
Fear of Regressionstifles innovation
![Page 102: Stop Hitting Yourself: CSS Design Patterns that Scale](https://reader033.vdocuments.net/reader033/viewer/2022042714/54b79eac4a795997768b45b1/html5/thumbnails/102.jpg)
Fear of Regressionis what stops you
![Page 103: Stop Hitting Yourself: CSS Design Patterns that Scale](https://reader033.vdocuments.net/reader033/viewer/2022042714/54b79eac4a795997768b45b1/html5/thumbnails/103.jpg)
No FearVersion your code
![Page 104: Stop Hitting Yourself: CSS Design Patterns that Scale](https://reader033.vdocuments.net/reader033/viewer/2022042714/54b79eac4a795997768b45b1/html5/thumbnails/104.jpg)
Don’t PushLet teams pull
![Page 105: Stop Hitting Yourself: CSS Design Patterns that Scale](https://reader033.vdocuments.net/reader033/viewer/2022042714/54b79eac4a795997768b45b1/html5/thumbnails/105.jpg)
But I only have one CSS file!
![Page 106: Stop Hitting Yourself: CSS Design Patterns that Scale](https://reader033.vdocuments.net/reader033/viewer/2022042714/54b79eac4a795997768b45b1/html5/thumbnails/106.jpg)
One file per componentBut I only have one
CSS file!
![Page 107: Stop Hitting Yourself: CSS Design Patterns that Scale](https://reader033.vdocuments.net/reader033/viewer/2022042714/54b79eac4a795997768b45b1/html5/thumbnails/107.jpg)
Man, I hatethis solution...but it works ”
“
![Page 108: Stop Hitting Yourself: CSS Design Patterns that Scale](https://reader033.vdocuments.net/reader033/viewer/2022042714/54b79eac4a795997768b45b1/html5/thumbnails/108.jpg)
Man,this solutionis messed up; what does it even do? ”
“
![Page 109: Stop Hitting Yourself: CSS Design Patterns that Scale](https://reader033.vdocuments.net/reader033/viewer/2022042714/54b79eac4a795997768b45b1/html5/thumbnails/109.jpg)
div { background/**/: blue;}
![Page 110: Stop Hitting Yourself: CSS Design Patterns that Scale](https://reader033.vdocuments.net/reader033/viewer/2022042714/54b79eac4a795997768b45b1/html5/thumbnails/110.jpg)
div { background/**/: blue;}
Hack or fat-finger?
![Page 111: Stop Hitting Yourself: CSS Design Patterns that Scale](https://reader033.vdocuments.net/reader033/viewer/2022042714/54b79eac4a795997768b45b1/html5/thumbnails/111.jpg)
div { #color: blue;}
![Page 112: Stop Hitting Yourself: CSS Design Patterns that Scale](https://reader033.vdocuments.net/reader033/viewer/2022042714/54b79eac4a795997768b45b1/html5/thumbnails/112.jpg)
div { #color: blue;}Huh?
![Page 113: Stop Hitting Yourself: CSS Design Patterns that Scale](https://reader033.vdocuments.net/reader033/viewer/2022042714/54b79eac4a795997768b45b1/html5/thumbnails/113.jpg)
CSSDoc
![Page 114: Stop Hitting Yourself: CSS Design Patterns that Scale](https://reader033.vdocuments.net/reader033/viewer/2022042714/54b79eac4a795997768b45b1/html5/thumbnails/114.jpg)
div { /** * @workaround IE color bug * @affected IE6, IE7, IE8 * @css-for IE6, IE7 */ #color: blue;}
![Page 115: Stop Hitting Yourself: CSS Design Patterns that Scale](https://reader033.vdocuments.net/reader033/viewer/2022042714/54b79eac4a795997768b45b1/html5/thumbnails/115.jpg)
div { /** * @workaround IE color bug * @affected IE6, IE7, IE8 * @css-for IE6, IE7 */ #color: blue;}
![Page 116: Stop Hitting Yourself: CSS Design Patterns that Scale](https://reader033.vdocuments.net/reader033/viewer/2022042714/54b79eac4a795997768b45b1/html5/thumbnails/116.jpg)
div { /** * @workaround IE color bug * @affected IE6, IE7, IE8 * @css-for IE6, IE7 */ #color: blue;}
![Page 117: Stop Hitting Yourself: CSS Design Patterns that Scale](https://reader033.vdocuments.net/reader033/viewer/2022042714/54b79eac4a795997768b45b1/html5/thumbnails/117.jpg)
div { /** * @workaround IE color bug * @affected IE6, IE7, IE8 * @css-for IE6, IE7 */ #color: blue;}
![Page 118: Stop Hitting Yourself: CSS Design Patterns that Scale](https://reader033.vdocuments.net/reader033/viewer/2022042714/54b79eac4a795997768b45b1/html5/thumbnails/118.jpg)
div { /** * @workaround IE color bug * @affected IE6, IE7, IE8 * @css-for IE6, IE7 */ #color: blue;}
![Page 119: Stop Hitting Yourself: CSS Design Patterns that Scale](https://reader033.vdocuments.net/reader033/viewer/2022042714/54b79eac4a795997768b45b1/html5/thumbnails/119.jpg)
div { /** * @workaround IE color bug * @affected IE6, IE7, IE8 * @css-for IE6, IE7 */ #color: blue;}
![Page 120: Stop Hitting Yourself: CSS Design Patterns that Scale](https://reader033.vdocuments.net/reader033/viewer/2022042714/54b79eac4a795997768b45b1/html5/thumbnails/120.jpg)
![Page 121: Stop Hitting Yourself: CSS Design Patterns that Scale](https://reader033.vdocuments.net/reader033/viewer/2022042714/54b79eac4a795997768b45b1/html5/thumbnails/121.jpg)
div { color: blue; height :12px; }p{ color:#339;}
![Page 122: Stop Hitting Yourself: CSS Design Patterns that Scale](https://reader033.vdocuments.net/reader033/viewer/2022042714/54b79eac4a795997768b45b1/html5/thumbnails/122.jpg)
div { color: #0F0; height: 12px; }p { color: #339;}
![Page 123: Stop Hitting Yourself: CSS Design Patterns that Scale](https://reader033.vdocuments.net/reader033/viewer/2022042714/54b79eac4a795997768b45b1/html5/thumbnails/123.jpg)
Use Design Patterns
You already know them
![Page 124: Stop Hitting Yourself: CSS Design Patterns that Scale](https://reader033.vdocuments.net/reader033/viewer/2022042714/54b79eac4a795997768b45b1/html5/thumbnails/124.jpg)
Leave out the details that don’t matter
![Page 125: Stop Hitting Yourself: CSS Design Patterns that Scale](https://reader033.vdocuments.net/reader033/viewer/2022042714/54b79eac4a795997768b45b1/html5/thumbnails/125.jpg)
Build a pattern library
![Page 126: Stop Hitting Yourself: CSS Design Patterns that Scale](https://reader033.vdocuments.net/reader033/viewer/2022042714/54b79eac4a795997768b45b1/html5/thumbnails/126.jpg)
Don’t start an arms race with selectors
![Page 127: Stop Hitting Yourself: CSS Design Patterns that Scale](https://reader033.vdocuments.net/reader033/viewer/2022042714/54b79eac4a795997768b45b1/html5/thumbnails/127.jpg)
Version your CSS and live free again
![Page 128: Stop Hitting Yourself: CSS Design Patterns that Scale](https://reader033.vdocuments.net/reader033/viewer/2022042714/54b79eac4a795997768b45b1/html5/thumbnails/128.jpg)
Document your intentions
![Page 129: Stop Hitting Yourself: CSS Design Patterns that Scale](https://reader033.vdocuments.net/reader033/viewer/2022042714/54b79eac4a795997768b45b1/html5/thumbnails/129.jpg)
Treat style with respect
![Page 130: Stop Hitting Yourself: CSS Design Patterns that Scale](https://reader033.vdocuments.net/reader033/viewer/2022042714/54b79eac4a795997768b45b1/html5/thumbnails/130.jpg)
SMACSSOOCSS
![Page 131: Stop Hitting Yourself: CSS Design Patterns that Scale](https://reader033.vdocuments.net/reader033/viewer/2022042714/54b79eac4a795997768b45b1/html5/thumbnails/131.jpg)
CreditsFont Awesome by Dave Gandyhttp://fortawesome.github.com/Font-Awesome
Inconsolata Fonthttp://www.levien.com/type/myfonts/inconsolata.html
Kudos to Michael P. Gilberthttp://www.mpgilbert.com/
![Page 132: Stop Hitting Yourself: CSS Design Patterns that Scale](https://reader033.vdocuments.net/reader033/viewer/2022042714/54b79eac4a795997768b45b1/html5/thumbnails/132.jpg)
Thanks@klamping