Reaching Stylesheet Nirvana, Web Design World 2008, Boston

930 views

Published on

Published in: Technology, Business
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
930
On SlideShare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
23
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Reaching Stylesheet Nirvana, Web Design World 2008, Boston

  1. 1. Reaching Stylesheet Nirvana Web Design World Boston, 2008 » Dan Rubin Sidebar Creative
  2. 2. Reaching Stylesheet Nirvana Web Design World Boston, 2008 Hi! Me, according to nGen works @ http://happywebbies.com/ ©2008 Dan Rubin » http://superfluousbanter.org/presentations/2008/
  3. 3. Reaching Stylesheet Nirvana Web Design World Boston, 2008 Pro CSS Techniques by Jeff Croft Ian Lloyd Dan Rubin ©2008 Dan Rubin » http://superfluousbanter.org/presentations/2008/
  4. 4. Reaching Stylesheet Nirvana Web Design World Boston, 2008 What you’ll learn: ✓ Organization ✓ Management ✓ Optimization ✓ a TINY bit about CSS3 ©2008 Dan Rubin » http://superfluousbanter.org/presentations/2008/
  5. 5. Reaching Stylesheet Nirvana Web Design World Boston, 2008 Organize ©2008 Dan Rubin » http://superfluousbanter.org/presentations/2008/
  6. 6. Reaching Stylesheet Nirvana Web Design World Boston, 2008 Why? Keeping your stylesheet organized makes your life easier and creates patterns which improve workflow. ©2008 Dan Rubin » http://superfluousbanter.org/presentations/2008/
  7. 7. Reaching Stylesheet Nirvana Web Design World Boston, 2008 How? Patterns already exist in the markup, styles, and in the design, so let’s start by looking at a few… ©2008 Dan Rubin » http://superfluousbanter.org/presentations/2008/
  8. 8. Reaching Stylesheet Nirvana Web Design World Boston, 2008 Follow the markup Mimic the flow of your markup from top to bottom, grouping related rules as you go. ©2008 Dan Rubin » http://superfluousbanter.org/presentations/2008/
  9. 9. Reaching Stylesheet Nirvana Web Design World Boston, 2008 Markup <body> Example: <div id=quot;headerquot;>...</div> <div id=quot;contentquot;>...</div> <div id=quot;footerquot;>...</div> </body> Styles body {...} #header {...} #content {...} #footer {...} ©2008 Dan Rubin » http://superfluousbanter.org/presentations/2008/
  10. 10. Reaching Stylesheet Nirvana Web Design World Boston, 2008 Separate by purpose Group rules based on what they control, e.g. layout, text, colors, etc. ©2008 Dan Rubin » http://superfluousbanter.org/presentations/2008/
  11. 11. Reaching Stylesheet Nirvana Web Design World Boston, 2008 Styles /* layout */ Example: #header {...} #content {...} #footer {...} /* navigation */ #nav {...} #nav li {...} #nav li a {...} /* text headings */ h1 {...} h2 {...} h3 {...} ©2008 Dan Rubin » http://superfluousbanter.org/presentations/2008/
  12. 12. Reaching Stylesheet Nirvana Web Design World Boston, 2008 Sort your properties Use a consistent method to order the properties within each rule to speed creation and editing. ©2008 Dan Rubin » http://superfluousbanter.org/presentations/2008/
  13. 13. Reaching Stylesheet Nirvana Web Design World Boston, 2008 Alphabetical h1 { Example: background:; border:; color:; font-family:; left:; margin:; opacity:; padding:; position:; text-align:; top:; z-index:; } ©2008 Dan Rubin » http://superfluousbanter.org/presentations/2008/
  14. 14. Reaching Stylesheet Nirvana Web Design World Boston, 2008 Functional h1 { Example: position:; top:; left:; z-index:; margin:; padding:; background:; border:; opacity:; color:; font-family:; text-align:; } ©2008 Dan Rubin » http://superfluousbanter.org/presentations/2008/
  15. 15. Reaching Stylesheet Nirvana Web Design World Boston, 2008 Comment, comment, comment. Use comments to keep your rules grouped, and make it easier for multiple people to maintain the same stylesheet. ©2008 Dan Rubin » http://superfluousbanter.org/presentations/2008/
  16. 16. Reaching Stylesheet Nirvana Web Design World Boston, 2008 Structural /* layout */ Example: #header {...} #content {...} #footer {...} /* navigation */ #nav {...} #nav li {...} #nav li a {...} Maintenance /* hook for extra background image */ #header li a em span {...} ©2008 Dan Rubin » http://superfluousbanter.org/presentations/2008/
  17. 17. Reaching Stylesheet Nirvana Web Design World Boston, 2008 Do what works best for you. ©2008 Dan Rubin » http://superfluousbanter.org/presentations/2008/
  18. 18. Reaching Stylesheet Nirvana Web Design World Boston, 2008 Manage ©2008 Dan Rubin » http://superfluousbanter.org/presentations/2008/
  19. 19. Reaching Stylesheet Nirvana Web Design World Boston, 2008 Multiple stylesheets Use separate stylesheets to organize layout, typography, and colors into their own files. ©2008 Dan Rubin » http://superfluousbanter.org/presentations/2008/
  20. 20. Reaching Stylesheet Nirvana Web Design World Boston, 2008 Multiple stylesheets styles.css layout.css type.css color.css ©2008 Dan Rubin » http://superfluousbanter.org/presentations/2008/
  21. 21. Reaching Stylesheet Nirvana Web Design World Boston, 2008 Hacks & conditional comments If you use hacks to fix Internet Explorer bugs, place them in their own stylesheet(s), and reference the hack in the main stylesheet. ©2008 Dan Rubin » http://superfluousbanter.org/presentations/2008/
  22. 22. Reaching Stylesheet Nirvana Web Design World Boston, 2008 Targeting all versions of IE <!--[if IE]> Example: <link href=quot;/css/ie.cssquot; /> <![endif]--> Targeting IE6 only <!--[if IE 6]> <link href=quot;/css/ie6-only.cssquot; /> <![endif]--> Targeting IE6 or lower <!--[if lte IE 6]> <link href=quot;/css/ie6-older.cssquot; /> <![endif]--> ©2008 Dan Rubin » http://superfluousbanter.org/presentations/2008/
  23. 23. Reaching Stylesheet Nirvana Web Design World Boston, 2008 Reference your hacks with comments Example: #header ul#nav li {...} /* IE6 float bug fixed (see ie6.css) */ ©2008 Dan Rubin » http://superfluousbanter.org/presentations/2008/
  24. 24. Reaching Stylesheet Nirvana Web Design World Boston, 2008 Hacks & conditional comments index.html styles.css ie.css scripts.js ©2008 Dan Rubin » http://superfluousbanter.org/presentations/2008/
  25. 25. Reaching Stylesheet Nirvana Web Design World Boston, 2008 Don't use !important or inline styles !important makes editing and testing more difficult, and gets in the way of user stylesheets. Inline styles defeat the purpose of using a common stylesheet. ©2008 Dan Rubin » http://superfluousbanter.org/presentations/2008/
  26. 26. Reaching Stylesheet Nirvana Web Design World Boston, 2008 Optimize ©2008 Dan Rubin » http://superfluousbanter.org/presentations/2008/
  27. 27. Reaching Stylesheet Nirvana Web Design World Boston, 2008 Shorthand properties Use shorthand properties to streamline your rules and remove unnecessary clutter. ©2008 Dan Rubin » http://superfluousbanter.org/presentations/2008/
  28. 28. Reaching Stylesheet Nirvana Web Design World Boston, 2008 Available shorthand properties ✓ background ✓ border-top ✓ font ✓ border ✓ border-right ✓ list-style ✓ border-color ✓ border-bottom ✓ margin ✓ border-style ✓ border-left ✓ outline ✓ border-width ✓ padding ©2008 Dan Rubin » http://superfluousbanter.org/presentations/2008/
  29. 29. Reaching Stylesheet Nirvana Web Design World Boston, 2008 Start here, moving clockwise Top Before margin-top:10px; 12 margin-right:25px; margin-bottom:20px; margin-left:15px; Left 9 3 Right After 6 margin:10px 25px 20px 15px; Bottom ©2008 Dan Rubin » http://superfluousbanter.org/presentations/2008/
  30. 30. Reaching Stylesheet Nirvana Web Design World Boston, 2008 Before #header { Example: background-color:#fff; background-image:url(bg.png); background-repeat:no-repeat; margin-top:0; margin-right:25px; margin-bottom:20px; margin-left:25px; } After #header { background:#fff url(bg.png) no-repeat; margin:0 25px 20px; } ©2008 Dan Rubin » http://superfluousbanter.org/presentations/2008/
  31. 31. Reaching Stylesheet Nirvana Web Design World Boston, 2008 Format rules on a single line Using single-line rules can make it easier to read your stylesheet and see its structure. ©2008 Dan Rubin » http://superfluousbanter.org/presentations/2008/
  32. 32. Reaching Stylesheet Nirvana Web Design World Boston, 2008 Before #header { Example: background:#fff url(bg.png) no-repeat; margin:0 25px 20px; } #content { float:left padding:20px; } After #header {...} #content {...} #footer {...} ©2008 Dan Rubin » http://superfluousbanter.org/presentations/2008/
  33. 33. Reaching Stylesheet Nirvana Web Design World Boston, 2008 Let’s see that in real life. ©2008 Dan Rubin » http://superfluousbanter.org/presentations/2008/
  34. 34. Reaching Stylesheet Nirvana Web Design World Boston, 2008 More on single-line CSS → http://orderedlist.com/articles/ single-line-css → http://superfluousbanter.org/ archives/2008/08/regex- patterns-for-single-line-css/ ©2008 Dan Rubin » http://superfluousbanter.org/presentations/2008/
  35. 35. Reaching Stylesheet Nirvana Web Design World Boston, 2008 Tools for optimization → http://cssoptimiser.com → http://codebeautifier.com → http://iceyboard.no-ip.org/ projects/css_compressor ©2008 Dan Rubin » http://superfluousbanter.org/presentations/2008/
  36. 36. Reaching Stylesheet Nirvana Web Design World Boston, 2008 CSS3 ©2008 Dan Rubin » http://superfluousbanter.org/presentations/2008/
  37. 37. Reaching Stylesheet Nirvana Web Design World Boston, 2008 What CSS3 will give us ✓ Multiple background images ✓ Multi-column layout ✓ Grid positioning ✓ Advanced selectors (nth-child, nth-last-child, nth-of-type) ©2008 Dan Rubin » http://superfluousbanter.org/presentations/2008/
  38. 38. Reaching Stylesheet Nirvana Web Design World Boston, 2008 But how soon can we use CSS3? ©2008 Dan Rubin » http://superfluousbanter.org/presentations/2008/
  39. 39. Reaching Stylesheet Nirvana Web Design World Boston, 2008 Browser support for CSS3 properties: [1] Webkit-only, not part of CSS3 Source: http://westciv.com/iphonetests/ ©2008 Dan Rubin » http://superfluousbanter.org/presentations/2008/
  40. 40. Reaching Stylesheet Nirvana Web Design World Boston, 2008 Before <div class=quot;rounded-boxquot;> Example: <div> <div> <div>...</div> </div> </div> </div> After <div class=quot;rounded-boxquot;>...</div> ©2008 Dan Rubin » http://superfluousbanter.org/presentations/2008/
  41. 41. Reaching Stylesheet Nirvana Web Design World Boston, 2008 .rounded-box { background-image: url(top-left.gif), Example: url(bottom-left.gif), url(top-right.gif), url(bottom-right.gif); background-repeat:no-repeat; background-position: top left, bottom left, top right, bottom right; } ©2008 Dan Rubin » http://superfluousbanter.org/presentations/2008/
  42. 42. Reaching Stylesheet Nirvana Web Design World Boston, 2008 ©2008 Dan Rubin » http://superfluousbanter.org/presentations/2008/
  43. 43. Reaching Stylesheet Nirvana Web Design World Boston, 2008 http://superfluousbanter.org/ presentations/2008/ (download the slides here) ©2008 Dan Rubin » http://superfluousbanter.org/presentations/2008/
  44. 44. Reaching Stylesheet Nirvana Web Design World Boston, 2008 Q&A ©2008 Dan Rubin » http://superfluousbanter.org/presentations/2008/

×