Stop Hitting Yourself: CSS Design Patterns that Scale
Upcoming SlideShare
Loading in...5
×
 

Stop Hitting Yourself: CSS Design Patterns that Scale

on

  • 3,792 views

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

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

Statistics

Views

Total Views
3,792
Views on SlideShare
3,766
Embed Views
26

Actions

Likes
1
Downloads
5
Comments
1

1 Embed 26

https://twitter.com 26

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

CC Attribution License

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel

11 of 1

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
  • Actually... your example does override as soon as it sets the list-style back to 'disc' from 'square'. This is also not maintainable code... what happens when you need to change the padding on your basic .item's, but not on .rage-list .items? Back to overriding or you have to refactor your class names.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Stop Hitting Yourself: CSS Design Patterns that Scale Stop Hitting Yourself: CSS Design Patterns that Scale Presentation Transcript

    • Stop HittingYourself:CSSDesign PatternsthatScale
    • @klamping
    • What works forBIGDoesn’t work forsmall
    • Because we build for small
    • Because we build for smallWe strugglewith BIG
    • ScaleThe ability to
    • reuse add fixScaleThe ability toCODE
    • reuse add fixScaleThe ability toCODE
    • reuse add fixScaleThe ability toCODE
    • Reuse Code
    • Specific codeis too specific
    • Name RequiredError
    • Name RequiredError#E9F2F9
    • Name RequiredError#E9F2F9#9CC4E4
    • <div class="error"><h1>Error:</h1><p>Name Required</p></div>
    • .error h1 {color: #E9F2F9;}.error p {color: #9CC4E4;}
    • But is it reusable?Simple andSemantic
    • Think
    • Think
    • Things I hate:•Lists•Irony•ClichésMy Life
    • Things I hate:•Lists•Irony•ClichésMy Life #E9F2F9#9CC4E4
    • <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>
    • .error h1,#content h2 {...}.error p,#content li {...}
    • <div class="error box"><h1 class="box-title">...</h1><p class="box-content">...</p></div>
    • .box .box-title {...}.box .box-content {...}
    • <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>
    • <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>
    • Designoutsideyour needs
    • Designoutsideyour needsAbstract your CSS,just like other code
    • Designoutsideyour needsBuild components,not implementations
    • Designoutsideyour needsLiterally,think outside the box
    • Designoutsideyour needsNo “Magic Numbers”
    • .site-title {height: 30px;}
    • .site-title {height: 30px;}
    • .site-title {min-height: 30px;}
    • .site-title {min-height: 30px;}
    • .site-title {min-height: 30px;}css-tricks.com/magic-numbers-in-css/
    • Documentation,Examples, StyleguideComponentDashboards
    • Component List
    • Documentation
    • Examples
    • Code Sample
    • // A button suitable for giving stars to someone.//// :hover - Subtle hover highlight.// .stars-given - A highlight indicating youve 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{...}}
    • // A button suitable for giving stars to someone.//// :hover - Subtle hover highlight.// .stars-given - A highlight indicating youve 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
    • // A button suitable for giving stars to someone.//// :hover - Subtle hover highlight.// .stars-given - A highlight indicating youve 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
    • // A button suitable for giving stars to someone.//// :hover - Subtle hover highlight.// .stars-given - A highlight indicating youve 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
    • Add Code
    • SpecificityOne ID to rule them all
    • <div id="content"><h1>One does not simply:</h1><ul><li>Walk into Mordor</li><li>Override an ID</li></ul></div>
    • <div id="content"><h1>One does not simply:</h1><ul><li>Walk into Mordor</li><li>Override an ID</li></ul></div>
    • <div id="content"><h1>One does not simply:</h1><ul><li>Walk into Mordor</li><li>Override an ID</li></ul></div>
    • #content ul {margin-left: 10px;}#content ul li {list-style: square;}
    • <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>...
    • #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 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
    • #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
    • <div id="content">...<aside id="related"><div class="warning"><h2>This post contains:</h2><ul><li>Vulgarity</li><li>Grumpy Cats</li></ul></div>...
    • #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;}
    • <div class="content"><h1>One does not simply:</h1><ul class="list"><li class="item">...</li><li class="item">...</li></ul></div>
    • <div class="content"><h1>One does not simply:</h1><ul class="list"><li class="item">...</li><li class="item">...</li></ul></div>What?!
    • .content .list {margin-left: 10px;}.content .list .item {list-style: square;}
    • <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>...
    • .content .list {...}.content .list .item {...}.rage-list .item {background: url(rage-face.png);}
    • .content .list {...}.content .list .item {...}.rage-list .item {background: url(rage-face.png);}Look Ma!No Overrides
    • <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>...
    • <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>...
    • .content .list {...}.content .list .item {...}.rage-list .item {...}.warning .list .item {list-style: disc;}
    • #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;}
    • .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;}
    • .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
    • .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
    • .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
    • .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
    • Write toRe-write
    • Fix Bugs
    • http://xkcd.com/1172/
    • Fixing Bugs
    • Fixing Bugsnot the fall thatkills youbug^It’s
    • the sudden stopFixing Bugsbackwards compatibility^It’s
    • Fear of Regression
    • Fear of Regressionis a friction
    • Fear of Regressionslows progress
    • Fear of Regressionstifles innovation
    • Fear of Regressionis what stops you
    • No FearVersion your code
    • Don’t PushLet teams pull
    • But I only have oneCSS file!
    • One file percomponentBut I only have oneCSS file!
    • Man, I hatethis solution...but it works ”“
    • Man,this solutionis messed up;what does iteven do? ”“
    • div {background/**/: blue;}
    • div {background/**/: blue;}Hack or fat-finger?
    • div {#color: blue;}
    • div {#color: blue;}Huh?
    • CSSDoc
    • div {/*** @workaround IE color bug* @affected IE6, IE7, IE8* @css-for IE6, IE7*/#color: blue;}
    • div {/*** @workaround IE color bug* @affected IE6, IE7, IE8* @css-for IE6, IE7*/#color: blue;}
    • div {/*** @workaround IE color bug* @affected IE6, IE7, IE8* @css-for IE6, IE7*/#color: blue;}
    • div {/*** @workaround IE color bug* @affected IE6, IE7, IE8* @css-for IE6, IE7*/#color: blue;}
    • div {/*** @workaround IE color bug* @affected IE6, IE7, IE8* @css-for IE6, IE7*/#color: blue;}
    • div {/*** @workaround IE color bug* @affected IE6, IE7, IE8* @css-for IE6, IE7*/#color: blue;}
    • div {color: blue;height :12px; }p{ color:#339;}
    • div {color: #0F0;height: 12px;}p {color: #339;}
    • Use DesignPatternsYou already knowthem
    • Leave outthe detailsthat don’tmatter
    • Build apatternlibrary
    • Don’t startan armsrace withselectors
    • Version yourCSS andlive freeagain
    • Documentyourintentions
    • Treat stylewith respect
    • SMACSSOOCSS
    • CreditsFont Awesome by Dave Gandyhttp://fortawesome.github.com/Font-AwesomeInconsolata Fonthttp://www.levien.com/type/myfonts/inconsolata.htmlKudos to Michael P. Gilberthttp://www.mpgilbert.com/
    • Thanks@klamping