Stop Hitting Yourself: CSS Design Patterns that Scale

4,527 views
4,378 views

Published on

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

Published in: Technology
1 Comment
2 Likes
Statistics
Notes
  • 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.
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Views
Total views
4,527
On SlideShare
0
From Embeds
0
Number of Embeds
6
Actions
Shares
0
Downloads
10
Comments
1
Likes
2
Embeds 0
No embeds

No notes for slide

Stop Hitting Yourself: CSS Design Patterns that Scale

  1. 1. Stop HittingYourself:CSSDesign PatternsthatScale
  2. 2. @klamping
  3. 3. What works forBIGDoesn’t work forsmall
  4. 4. Because we build for small
  5. 5. Because we build for smallWe strugglewith BIG
  6. 6. ScaleThe ability to
  7. 7. reuse add fixScaleThe ability toCODE
  8. 8. reuse add fixScaleThe ability toCODE
  9. 9. reuse add fixScaleThe ability toCODE
  10. 10. Reuse Code
  11. 11. Specific codeis too specific
  12. 12. Name RequiredError
  13. 13. Name RequiredError#E9F2F9
  14. 14. Name RequiredError#E9F2F9#9CC4E4
  15. 15. <div class="error"><h1>Error:</h1><p>Name Required</p></div>
  16. 16. .error h1 {color: #E9F2F9;}.error p {color: #9CC4E4;}
  17. 17. But is it reusable?Simple andSemantic
  18. 18. Think
  19. 19. Think
  20. 20. Things I hate:•Lists•Irony•ClichésMy Life
  21. 21. Things I hate:•Lists•Irony•ClichésMy Life #E9F2F9#9CC4E4
  22. 22. <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>
  23. 23. .error h1,#content h2 {...}.error p,#content li {...}
  24. 24. <div class="error box"><h1 class="box-title">...</h1><p class="box-content">...</p></div>
  25. 25. .box .box-title {...}.box .box-content {...}
  26. 26. <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>
  27. 27. <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>
  28. 28. Designoutsideyour needs
  29. 29. Designoutsideyour needsAbstract your CSS,just like other code
  30. 30. Designoutsideyour needsBuild components,not implementations
  31. 31. Designoutsideyour needsLiterally,think outside the box
  32. 32. Designoutsideyour needsNo “Magic Numbers”
  33. 33. .site-title {height: 30px;}
  34. 34. .site-title {height: 30px;}
  35. 35. .site-title {min-height: 30px;}
  36. 36. .site-title {min-height: 30px;}
  37. 37. .site-title {min-height: 30px;}css-tricks.com/magic-numbers-in-css/
  38. 38. Documentation,Examples, StyleguideComponentDashboards
  39. 39. Component List
  40. 40. Documentation
  41. 41. Examples
  42. 42. Code Sample
  43. 43. // 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{...}}
  44. 44. // 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
  45. 45. // 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
  46. 46. // 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
  47. 47. Add Code
  48. 48. SpecificityOne ID to rule them all
  49. 49. <div id="content"><h1>One does not simply:</h1><ul><li>Walk into Mordor</li><li>Override an ID</li></ul></div>
  50. 50. <div id="content"><h1>One does not simply:</h1><ul><li>Walk into Mordor</li><li>Override an ID</li></ul></div>
  51. 51. <div id="content"><h1>One does not simply:</h1><ul><li>Walk into Mordor</li><li>Override an ID</li></ul></div>
  52. 52. #content ul {margin-left: 10px;}#content ul li {list-style: square;}
  53. 53. <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>...
  54. 54. #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);}
  55. 55. #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
  56. 56. #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
  57. 57. <div id="content">...<aside id="related"><div class="warning"><h2>This post contains:</h2><ul><li>Vulgarity</li><li>Grumpy Cats</li></ul></div>...
  58. 58. #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;}
  59. 59. <div class="content"><h1>One does not simply:</h1><ul class="list"><li class="item">...</li><li class="item">...</li></ul></div>
  60. 60. <div class="content"><h1>One does not simply:</h1><ul class="list"><li class="item">...</li><li class="item">...</li></ul></div>What?!
  61. 61. .content .list {margin-left: 10px;}.content .list .item {list-style: square;}
  62. 62. <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>...
  63. 63. .content .list {...}.content .list .item {...}.rage-list .item {background: url(rage-face.png);}
  64. 64. .content .list {...}.content .list .item {...}.rage-list .item {background: url(rage-face.png);}Look Ma!No Overrides
  65. 65. <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>...
  66. 66. <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>...
  67. 67. .content .list {...}.content .list .item {...}.rage-list .item {...}.warning .list .item {list-style: disc;}
  68. 68. #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;}
  69. 69. .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;}
  70. 70. .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
  71. 71. .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
  72. 72. .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
  73. 73. .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
  74. 74. Write toRe-write
  75. 75. Fix Bugs
  76. 76. http://xkcd.com/1172/
  77. 77. Fixing Bugs
  78. 78. Fixing Bugsnot the fall thatkills youbug^It’s
  79. 79. the sudden stopFixing Bugsbackwards compatibility^It’s
  80. 80. Fear of Regression
  81. 81. Fear of Regressionis a friction
  82. 82. Fear of Regressionslows progress
  83. 83. Fear of Regressionstifles innovation
  84. 84. Fear of Regressionis what stops you
  85. 85. No FearVersion your code
  86. 86. Don’t PushLet teams pull
  87. 87. But I only have oneCSS file!
  88. 88. One file percomponentBut I only have oneCSS file!
  89. 89. Man, I hatethis solution...but it works ”“
  90. 90. Man,this solutionis messed up;what does iteven do? ”“
  91. 91. div {background/**/: blue;}
  92. 92. div {background/**/: blue;}Hack or fat-finger?
  93. 93. div {#color: blue;}
  94. 94. div {#color: blue;}Huh?
  95. 95. CSSDoc
  96. 96. div {/*** @workaround IE color bug* @affected IE6, IE7, IE8* @css-for IE6, IE7*/#color: blue;}
  97. 97. div {/*** @workaround IE color bug* @affected IE6, IE7, IE8* @css-for IE6, IE7*/#color: blue;}
  98. 98. div {/*** @workaround IE color bug* @affected IE6, IE7, IE8* @css-for IE6, IE7*/#color: blue;}
  99. 99. div {/*** @workaround IE color bug* @affected IE6, IE7, IE8* @css-for IE6, IE7*/#color: blue;}
  100. 100. div {/*** @workaround IE color bug* @affected IE6, IE7, IE8* @css-for IE6, IE7*/#color: blue;}
  101. 101. div {/*** @workaround IE color bug* @affected IE6, IE7, IE8* @css-for IE6, IE7*/#color: blue;}
  102. 102. div {color: blue;height :12px; }p{ color:#339;}
  103. 103. div {color: #0F0;height: 12px;}p {color: #339;}
  104. 104. Use DesignPatternsYou already knowthem
  105. 105. Leave outthe detailsthat don’tmatter
  106. 106. Build apatternlibrary
  107. 107. Don’t startan armsrace withselectors
  108. 108. Version yourCSS andlive freeagain
  109. 109. Documentyourintentions
  110. 110. Treat stylewith respect
  111. 111. SMACSSOOCSS
  112. 112. 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/
  113. 113. Thanks@klamping

×