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