highly maintainable, efficient optimized css...highly maintainable, efficient & optimized css...
TRANSCRIPT
![Page 1: Highly Maintainable, Efficient Optimized CSS...Highly Maintainable, Efficient & Optimized CSS August 31, 2010 Think Vitamin HTML & CSS Online Conference Zoe Mickley Gillenwater @ zomigi](https://reader033.vdocuments.site/reader033/viewer/2022060900/609dc10d59236a34654f3875/html5/thumbnails/1.jpg)
1
Highly Maintainable, Efficient & Optimized CSSAugust 31, 2010Think Vitamin HTML & CSS Online ConferenceZoe Mickley Gillenwater@ zomigi
![Page 2: Highly Maintainable, Efficient Optimized CSS...Highly Maintainable, Efficient & Optimized CSS August 31, 2010 Think Vitamin HTML & CSS Online Conference Zoe Mickley Gillenwater @ zomigi](https://reader033.vdocuments.site/reader033/viewer/2022060900/609dc10d59236a34654f3875/html5/thumbnails/2.jpg)
2
What I do
BooksFlexible Web Design: Creating Liquid and Elastic Layouts with CSSwww.flexiblewebbook.com
Stunning CSS3: A Project-based Guide to the Latest in CSSwww.stunningcss3.com
WebFreelance graphic designer and web developerCSS consultantMember of Adobe Task Force for WaSP
now
soon
![Page 3: Highly Maintainable, Efficient Optimized CSS...Highly Maintainable, Efficient & Optimized CSS August 31, 2010 Think Vitamin HTML & CSS Online Conference Zoe Mickley Gillenwater @ zomigi](https://reader033.vdocuments.site/reader033/viewer/2022060900/609dc10d59236a34654f3875/html5/thumbnails/3.jpg)
3
Why maintainability matters
✔ you✔ your teammates✔ your successor✔ your clients
These people need to be able to read, understand, and easily change your CSS:
![Page 4: Highly Maintainable, Efficient Optimized CSS...Highly Maintainable, Efficient & Optimized CSS August 31, 2010 Think Vitamin HTML & CSS Online Conference Zoe Mickley Gillenwater @ zomigi](https://reader033.vdocuments.site/reader033/viewer/2022060900/609dc10d59236a34654f3875/html5/thumbnails/4.jpg)
4
Why maintainability matters
✔ costs everyone time✔ bloats CSS
If they can't:
![Page 5: Highly Maintainable, Efficient Optimized CSS...Highly Maintainable, Efficient & Optimized CSS August 31, 2010 Think Vitamin HTML & CSS Online Conference Zoe Mickley Gillenwater @ zomigi](https://reader033.vdocuments.site/reader033/viewer/2022060900/609dc10d59236a34654f3875/html5/thumbnails/5.jpg)
5
Why efficiency matters✔ users like fast-loading pages✔ Google likes fast-loading pages✔ clients like happy users and happy Google
![Page 6: Highly Maintainable, Efficient Optimized CSS...Highly Maintainable, Efficient & Optimized CSS August 31, 2010 Think Vitamin HTML & CSS Online Conference Zoe Mickley Gillenwater @ zomigi](https://reader033.vdocuments.site/reader033/viewer/2022060900/609dc10d59236a34654f3875/html5/thumbnails/6.jpg)
6
Have your cake and eat it too?
Photo by Mike Chaput-Branson, “Chocolate Beet Cake,” www.flickr.com/photos/427/2508045734
![Page 7: Highly Maintainable, Efficient Optimized CSS...Highly Maintainable, Efficient & Optimized CSS August 31, 2010 Think Vitamin HTML & CSS Online Conference Zoe Mickley Gillenwater @ zomigi](https://reader033.vdocuments.site/reader033/viewer/2022060900/609dc10d59236a34654f3875/html5/thumbnails/7.jpg)
7
Often, yes.
Photo by Rich Renomeron, “All Gone,” www.flickr.com/photos/rrenomeron/3336008209
![Page 8: Highly Maintainable, Efficient Optimized CSS...Highly Maintainable, Efficient & Optimized CSS August 31, 2010 Think Vitamin HTML & CSS Online Conference Zoe Mickley Gillenwater @ zomigi](https://reader033.vdocuments.site/reader033/viewer/2022060900/609dc10d59236a34654f3875/html5/thumbnails/8.jpg)
8
But sometimes the two don't mix.
Photo by Tétine, “Vinaigrette #2 - Olive oil,” www.flickr.com/photos/83331954@N00/1374377040
![Page 9: Highly Maintainable, Efficient Optimized CSS...Highly Maintainable, Efficient & Optimized CSS August 31, 2010 Think Vitamin HTML & CSS Online Conference Zoe Mickley Gillenwater @ zomigi](https://reader033.vdocuments.site/reader033/viewer/2022060900/609dc10d59236a34654f3875/html5/thumbnails/9.jpg)
9
Maintainable but inefficient#widget { /* for Widget modules in main content area */ overflow: auto; /* for float containment */ width: 200px; background: #ccc; border: 1px solid #999; } #widget h2 { color: #39C; font-family: Georgia, "Times New Roman", Times, serif; } #widget li { background: url(bullet1.png) no-repeat; } #widget li li { background: url(bullet2.png) no-repeat; }
![Page 10: Highly Maintainable, Efficient Optimized CSS...Highly Maintainable, Efficient & Optimized CSS August 31, 2010 Think Vitamin HTML & CSS Online Conference Zoe Mickley Gillenwater @ zomigi](https://reader033.vdocuments.site/reader033/viewer/2022060900/609dc10d59236a34654f3875/html5/thumbnails/10.jpg)
10
Efficient but hard to maintain#widget{overflow:auto;width:200px;background:#ccc;border:1px solid #999}#widget h2{color:#39C;font-family: Georgia,"Times New Roman",Times,serif}#widget li{background:url(bullet1.png) no-repeat}#widget li li{background:url(bullet2.png) no-repeat}
![Page 11: Highly Maintainable, Efficient Optimized CSS...Highly Maintainable, Efficient & Optimized CSS August 31, 2010 Think Vitamin HTML & CSS Online Conference Zoe Mickley Gillenwater @ zomigi](https://reader033.vdocuments.site/reader033/viewer/2022060900/609dc10d59236a34654f3875/html5/thumbnails/11.jpg)
11
Balance maintainability and efficiency to get optimized CSS
• Which one gets more weight depends on the project
• Tools can help
![Page 12: Highly Maintainable, Efficient Optimized CSS...Highly Maintainable, Efficient & Optimized CSS August 31, 2010 Think Vitamin HTML & CSS Online Conference Zoe Mickley Gillenwater @ zomigi](https://reader033.vdocuments.site/reader033/viewer/2022060900/609dc10d59236a34654f3875/html5/thumbnails/12.jpg)
12
What we'll cover• Some things basic, some things more
complicated• Don't have to use them all• Some based on personal preference
![Page 13: Highly Maintainable, Efficient Optimized CSS...Highly Maintainable, Efficient & Optimized CSS August 31, 2010 Think Vitamin HTML & CSS Online Conference Zoe Mickley Gillenwater @ zomigi](https://reader033.vdocuments.site/reader033/viewer/2022060900/609dc10d59236a34654f3875/html5/thumbnails/13.jpg)
13
Maintainable CSS is:✔ organized✔ readable✔ streamlined
![Page 14: Highly Maintainable, Efficient Optimized CSS...Highly Maintainable, Efficient & Optimized CSS August 31, 2010 Think Vitamin HTML & CSS Online Conference Zoe Mickley Gillenwater @ zomigi](https://reader033.vdocuments.site/reader033/viewer/2022060900/609dc10d59236a34654f3875/html5/thumbnails/14.jpg)
14
1OrganizedHow you should divide up (or not) your style sheets and the rules within them to make it easier to find and work with what you need.
![Page 15: Highly Maintainable, Efficient Optimized CSS...Highly Maintainable, Efficient & Optimized CSS August 31, 2010 Think Vitamin HTML & CSS Online Conference Zoe Mickley Gillenwater @ zomigi](https://reader033.vdocuments.site/reader033/viewer/2022060900/609dc10d59236a34654f3875/html5/thumbnails/15.jpg)
15
No embedded or inline CSS<!DOCTYPE html><html lang="en"><head><meta charset="utf-8"><title>Widgets – Acme Inc.</title><link rel="stylesheet" type="text/css" href="css/main.css"><style>body { background: #C0BCDF }</style></head>
<body><div id="wrapper"> <div id="header"> <img src="images/logo.png" width="200" height="80"> <h1 style="color: #211587">Widgets</h1>
![Page 16: Highly Maintainable, Efficient Optimized CSS...Highly Maintainable, Efficient & Optimized CSS August 31, 2010 Think Vitamin HTML & CSS Online Conference Zoe Mickley Gillenwater @ zomigi](https://reader033.vdocuments.site/reader033/viewer/2022060900/609dc10d59236a34654f3875/html5/thumbnails/16.jpg)
16
Separating into multiple sheets• Media types• Rule types (layout.css, text.css, etc)• Site sections (home.css, store.css, etc)• IE hacks via conditional comments• CSS3 browser-prefixed properties
![Page 17: Highly Maintainable, Efficient Optimized CSS...Highly Maintainable, Efficient & Optimized CSS August 31, 2010 Think Vitamin HTML & CSS Online Conference Zoe Mickley Gillenwater @ zomigi](https://reader033.vdocuments.site/reader033/viewer/2022060900/609dc10d59236a34654f3875/html5/thumbnails/17.jpg)
17
Separating media types
<link href="main.css" media="screen" rel="stylesheet" type="text/css"><link href="print.css" media="print" rel="stylesheet" type="text/css">
Separate screen and print styles:
<link href="main.css" rel="stylesheet" type="text/css"><link href="print.css" media="print" rel="stylesheet" type="text/css">
Overlapped screen and print styles:
![Page 18: Highly Maintainable, Efficient Optimized CSS...Highly Maintainable, Efficient & Optimized CSS August 31, 2010 Think Vitamin HTML & CSS Online Conference Zoe Mickley Gillenwater @ zomigi](https://reader033.vdocuments.site/reader033/viewer/2022060900/609dc10d59236a34654f3875/html5/thumbnails/18.jpg)
18
Keeping media types together
• One less HTTP request• Easier to remember non-screen styles
body { color:#333; background-color:#ccc;}@media screen, projection { body { background-image:url(background.png); }}@media print { body { background-color: #fff; color:#000; }}
![Page 19: Highly Maintainable, Efficient Optimized CSS...Highly Maintainable, Efficient & Optimized CSS August 31, 2010 Think Vitamin HTML & CSS Online Conference Zoe Mickley Gillenwater @ zomigi](https://reader033.vdocuments.site/reader033/viewer/2022060900/609dc10d59236a34654f3875/html5/thumbnails/19.jpg)
19
Separating by rule type or site sections• Pros:+ Easy to know where to look for a style+ Pick and choose which page gets which
CSS files• Cons:– Redundancy of styles between sheets– Hard to know where to look for a style– Extra HTTP requests
• Bottom line: depends on project
![Page 20: Highly Maintainable, Efficient Optimized CSS...Highly Maintainable, Efficient & Optimized CSS August 31, 2010 Think Vitamin HTML & CSS Online Conference Zoe Mickley Gillenwater @ zomigi](https://reader033.vdocuments.site/reader033/viewer/2022060900/609dc10d59236a34654f3875/html5/thumbnails/20.jpg)
20
Separating IE hacks with conditional comments
<!--[if lte IE 8]> <link rel="stylesheet" href="ie_all.css" type="text/css"><![endif]-->
One IE sheet:
<!--[if IE 6]> <link rel="stylesheet" href="ie_6.css" type="text/css"><![endif]--><!--[if IE 7]> <link rel="stylesheet" href="ie_7.css" type="text/css"><![endif]--><!--[if IE 8]> <link rel="stylesheet" href="ie_8.css" type="text/css"><![endif]-->
Different IE sheets for different IE versions:
![Page 21: Highly Maintainable, Efficient Optimized CSS...Highly Maintainable, Efficient & Optimized CSS August 31, 2010 Think Vitamin HTML & CSS Online Conference Zoe Mickley Gillenwater @ zomigi](https://reader033.vdocuments.site/reader033/viewer/2022060900/609dc10d59236a34654f3875/html5/thumbnails/21.jpg)
21
Separating IE hacks with conditional comments• Pros:+ No invalid/confusing hacks in main sheet+ Non-IE don't download kb they don't need+ Easy to get rid of later when not needed (ha)
• Cons:– Rules for single widget kept in two or more
places– Extra HTTP requests– Triggers IE 8 to wait for main sheet to load
completely before loading anything else
![Page 22: Highly Maintainable, Efficient Optimized CSS...Highly Maintainable, Efficient & Optimized CSS August 31, 2010 Think Vitamin HTML & CSS Online Conference Zoe Mickley Gillenwater @ zomigi](https://reader033.vdocuments.site/reader033/viewer/2022060900/609dc10d59236a34654f3875/html5/thumbnails/22.jpg)
22
Conditional comments to add IE classes to html tag
<!--[if lt IE 7]> <html class="ie6"> <![endif]--> <!--[if IE 7]> <html class="ie7"> <![endif]--> <!--[if IE 8]> <html class="ie8"> <![endif]--> <!--[if IE 9]> <html class="ie9"> <![endif]--> <!--[if gt IE 9]> <html> <![endif]--><!--[if !IE]>--> <html> <!--<![endif]-->
The HTML:
#widget { min-height: 100px; }.ie6 #widget { height: 100px; }
The CSS:
![Page 23: Highly Maintainable, Efficient Optimized CSS...Highly Maintainable, Efficient & Optimized CSS August 31, 2010 Think Vitamin HTML & CSS Online Conference Zoe Mickley Gillenwater @ zomigi](https://reader033.vdocuments.site/reader033/viewer/2022060900/609dc10d59236a34654f3875/html5/thumbnails/23.jpg)
23
Separating CSS3 browser-prefixed properties
#widget { transform: rotate(90deg); }In main style sheet:
#widget { -moz-transform: rotate(90deg); -o-transform: rotate(90deg); -webkit-transform: rotate(90deg);}
In prefixes.css:
<link href="prefixes.css" rel="stylesheet" type="text/css"><link href="main.css" rel="stylesheet" type="text/css">
Put sheet with prefixes first in HTML:
![Page 24: Highly Maintainable, Efficient Optimized CSS...Highly Maintainable, Efficient & Optimized CSS August 31, 2010 Think Vitamin HTML & CSS Online Conference Zoe Mickley Gillenwater @ zomigi](https://reader033.vdocuments.site/reader033/viewer/2022060900/609dc10d59236a34654f3875/html5/thumbnails/24.jpg)
24
Separating CSS3 browser-prefixed properties• Pros:+ No invalid properties in main sheet+ Easy to get rid of later when not needed+ Clean code makes you feel warm and fuzzy
• Cons:– Extra HTTP request– Rules for single widget kept in two places– Easy to forget prefixed properties are
subject to change
![Page 25: Highly Maintainable, Efficient Optimized CSS...Highly Maintainable, Efficient & Optimized CSS August 31, 2010 Think Vitamin HTML & CSS Online Conference Zoe Mickley Gillenwater @ zomigi](https://reader033.vdocuments.site/reader033/viewer/2022060900/609dc10d59236a34654f3875/html5/thumbnails/25.jpg)
25
Zoe's rule of thumb regarding organizing style sheets• Unless working on a very large site, keep
everything together as much as possible• Why:+ Avoids errors+ Less debugging and maintenance time+ Avoids redundancies+More efficient
![Page 26: Highly Maintainable, Efficient Optimized CSS...Highly Maintainable, Efficient & Optimized CSS August 31, 2010 Think Vitamin HTML & CSS Online Conference Zoe Mickley Gillenwater @ zomigi](https://reader033.vdocuments.site/reader033/viewer/2022060900/609dc10d59236a34654f3875/html5/thumbnails/26.jpg)
26
Organizing rules within a sheet
/* LAYOUT ------------------ */#wrapper { ... }#header { ... }
/* TEXT -------------------- */h1, h2, h3, h4, h5, h6 { ... }
/* IMAGES ------------------ */.chart { ... }
/* FORMS ------------------- */label { ... }
/* ARTICLES ---------------- */.pullquote { ... }
Use comments to group related rules
![Page 27: Highly Maintainable, Efficient Optimized CSS...Highly Maintainable, Efficient & Optimized CSS August 31, 2010 Think Vitamin HTML & CSS Online Conference Zoe Mickley Gillenwater @ zomigi](https://reader033.vdocuments.site/reader033/viewer/2022060900/609dc10d59236a34654f3875/html5/thumbnails/27.jpg)
27
Finding rules within a sheet
/* This sheet contains rules for: *//* LAYOUT, TEXT, IMAGES, FORMS, ARTICLES */
Add table of contents to top of sheet referring to commented sections
/* =ARTICLES ---------------- */.pullquote { ... }
Add special character as searching aid
![Page 28: Highly Maintainable, Efficient Optimized CSS...Highly Maintainable, Efficient & Optimized CSS August 31, 2010 Think Vitamin HTML & CSS Online Conference Zoe Mickley Gillenwater @ zomigi](https://reader033.vdocuments.site/reader033/viewer/2022060900/609dc10d59236a34654f3875/html5/thumbnails/28.jpg)
28
2ReadableUnderstandable by humans just looking at your CSS out of context. Formatting rules to make it easy to tell what does what.
![Page 29: Highly Maintainable, Efficient Optimized CSS...Highly Maintainable, Efficient & Optimized CSS August 31, 2010 Think Vitamin HTML & CSS Online Conference Zoe Mickley Gillenwater @ zomigi](https://reader033.vdocuments.site/reader033/viewer/2022060900/609dc10d59236a34654f3875/html5/thumbnails/29.jpg)
29
Indent related rules#widget { overflow: auto; width: 200px; background: #ccc; border: 1px solid #999; } #widget h2 { color: #39C; font-family: Georgia, "Times New Roman", Times, serif; } #widget li { background: url(bullet1.png) no-repeat; } #widget li li { background: url(bullet2.png) no-repeat; }
![Page 30: Highly Maintainable, Efficient Optimized CSS...Highly Maintainable, Efficient & Optimized CSS August 31, 2010 Think Vitamin HTML & CSS Online Conference Zoe Mickley Gillenwater @ zomigi](https://reader033.vdocuments.site/reader033/viewer/2022060900/609dc10d59236a34654f3875/html5/thumbnails/30.jpg)
30
Order of declarations in a rule• Choose a system, document it, and stick
with it• Options:– Alphabetical– Group related properties (eg: position, top, left)
– Layout related properties first (eg: display, then positioning, then box model, then text)
![Page 31: Highly Maintainable, Efficient Optimized CSS...Highly Maintainable, Efficient & Optimized CSS August 31, 2010 Think Vitamin HTML & CSS Online Conference Zoe Mickley Gillenwater @ zomigi](https://reader033.vdocuments.site/reader033/viewer/2022060900/609dc10d59236a34654f3875/html5/thumbnails/31.jpg)
31
Formatting declarations
#widget { overflow: auto; width: 200px; background: #ccc; }
Each declaration on new line
#widget { overflow:auto; width:200px; background:#ccc; }Each declaration on same line
![Page 32: Highly Maintainable, Efficient Optimized CSS...Highly Maintainable, Efficient & Optimized CSS August 31, 2010 Think Vitamin HTML & CSS Online Conference Zoe Mickley Gillenwater @ zomigi](https://reader033.vdocuments.site/reader033/viewer/2022060900/609dc10d59236a34654f3875/html5/thumbnails/32.jpg)
32
Meaningful class/ID names
.big-red-box { background: #f00; color: #fff; font-size: 150%; }
Bad:
.warning { background: #f00; color: #fff; font-size: 150% }
Good:
![Page 33: Highly Maintainable, Efficient Optimized CSS...Highly Maintainable, Efficient & Optimized CSS August 31, 2010 Think Vitamin HTML & CSS Online Conference Zoe Mickley Gillenwater @ zomigi](https://reader033.vdocuments.site/reader033/viewer/2022060900/609dc10d59236a34654f3875/html5/thumbnails/33.jpg)
33
Informational comments• Meta info: author, creation date, etc.• Key of color codes• Explanations for confusing things
– Hacks– CSS3 browser prefixes– Non-intuitive properties/values– Items in progress
![Page 34: Highly Maintainable, Efficient Optimized CSS...Highly Maintainable, Efficient & Optimized CSS August 31, 2010 Think Vitamin HTML & CSS Online Conference Zoe Mickley Gillenwater @ zomigi](https://reader033.vdocuments.site/reader033/viewer/2022060900/609dc10d59236a34654f3875/html5/thumbnails/34.jpg)
34
CSS practices that aren't so readable• Sprites– Bloated, non-intuitive CSS– But efficient: avoids HTTP requests– CSS3 can reduce need
• Frameworks– Class names often don't make sense out of
context– Whole team needs to be and stay familiar
with framework's conventions– Make your own
![Page 35: Highly Maintainable, Efficient Optimized CSS...Highly Maintainable, Efficient & Optimized CSS August 31, 2010 Think Vitamin HTML & CSS Online Conference Zoe Mickley Gillenwater @ zomigi](https://reader033.vdocuments.site/reader033/viewer/2022060900/609dc10d59236a34654f3875/html5/thumbnails/35.jpg)
35
3StreamlinedAchieve a particular look with as little CSS as possible.
![Page 36: Highly Maintainable, Efficient Optimized CSS...Highly Maintainable, Efficient & Optimized CSS August 31, 2010 Think Vitamin HTML & CSS Online Conference Zoe Mickley Gillenwater @ zomigi](https://reader033.vdocuments.site/reader033/viewer/2022060900/609dc10d59236a34654f3875/html5/thumbnails/36.jpg)
36
Consolidate properties• Shorthand properties to group related
properties• Resets to remove browser defaults in
one place instead of several• Inheritance to set default values in one
place, then override only when needed
![Page 37: Highly Maintainable, Efficient Optimized CSS...Highly Maintainable, Efficient & Optimized CSS August 31, 2010 Think Vitamin HTML & CSS Online Conference Zoe Mickley Gillenwater @ zomigi](https://reader033.vdocuments.site/reader033/viewer/2022060900/609dc10d59236a34654f3875/html5/thumbnails/37.jpg)
37
Inheritance
#sidebar h3 { color: #000; }.sale h3 { color: #fff; }.article h3 { color: #000; }.news h3 { color: #000; }
Bad:
#sidebar h3, .article h3, .news h3 { color: #000; }.sale h3 { color: #fff; }
Better:
h3 { color: #000; }.sale h3 { color: #fff; }
Best:
![Page 38: Highly Maintainable, Efficient Optimized CSS...Highly Maintainable, Efficient & Optimized CSS August 31, 2010 Think Vitamin HTML & CSS Online Conference Zoe Mickley Gillenwater @ zomigi](https://reader033.vdocuments.site/reader033/viewer/2022060900/609dc10d59236a34654f3875/html5/thumbnails/38.jpg)
38
Consolidate rules• Grouped selectors• Classes instead of IDs• Classes instead of styling generic-
elements based on their location• Classes with reusably broad names
![Page 39: Highly Maintainable, Efficient Optimized CSS...Highly Maintainable, Efficient & Optimized CSS August 31, 2010 Think Vitamin HTML & CSS Online Conference Zoe Mickley Gillenwater @ zomigi](https://reader033.vdocuments.site/reader033/viewer/2022060900/609dc10d59236a34654f3875/html5/thumbnails/39.jpg)
39
Classes instead of IDs
#sidebar-news li { border-bottom: 1px dashed #ccc; }#footer-news li { border-bottom: 1px dashed #ccc; }#press-releases li { border-bottom: 1px dashed #ccc; }
Bad:
.news li { border-bottom: 1px dashed #ccc; }Good:
![Page 40: Highly Maintainable, Efficient Optimized CSS...Highly Maintainable, Efficient & Optimized CSS August 31, 2010 Think Vitamin HTML & CSS Online Conference Zoe Mickley Gillenwater @ zomigi](https://reader033.vdocuments.site/reader033/viewer/2022060900/609dc10d59236a34654f3875/html5/thumbnails/40.jpg)
40
Classes instead of location-based element styles
#sidebar li { border-bottom: 1px dashed #ccc; }Bad:
.news li { border-bottom: 1px dashed #ccc; }
.twitter { color: #3C9; }
Good:
#sidebar li { border-bottom: 1px dashed #ccc; }#sidebar .twitter li { border-bottom: none; color: #3C9; }#footer-news li { border-bottom: 1px dashed #ccc; }
Could end up looking like this:
![Page 41: Highly Maintainable, Efficient Optimized CSS...Highly Maintainable, Efficient & Optimized CSS August 31, 2010 Think Vitamin HTML & CSS Online Conference Zoe Mickley Gillenwater @ zomigi](https://reader033.vdocuments.site/reader033/viewer/2022060900/609dc10d59236a34654f3875/html5/thumbnails/41.jpg)
41
Give classes broad names
.contact-form-error { color: #f00; }
.login-form-error { color: #f00; }
.search-form-error { color: #f00; }
Bad:
.error { color: #f00; }Good:
![Page 42: Highly Maintainable, Efficient Optimized CSS...Highly Maintainable, Efficient & Optimized CSS August 31, 2010 Think Vitamin HTML & CSS Online Conference Zoe Mickley Gillenwater @ zomigi](https://reader033.vdocuments.site/reader033/viewer/2022060900/609dc10d59236a34654f3875/html5/thumbnails/42.jpg)
42
Remove unused rules using Dust-Me Selectors• www.sitepoint.com/dustmeselectors• Firefox extension that analyzes your
page or entire site and creates report of selectors that don't apply to anything
![Page 43: Highly Maintainable, Efficient Optimized CSS...Highly Maintainable, Efficient & Optimized CSS August 31, 2010 Think Vitamin HTML & CSS Online Conference Zoe Mickley Gillenwater @ zomigi](https://reader033.vdocuments.site/reader033/viewer/2022060900/609dc10d59236a34654f3875/html5/thumbnails/43.jpg)
43
Efficient CSS is quick to:✔ download✔ render/redraw
![Page 44: Highly Maintainable, Efficient Optimized CSS...Highly Maintainable, Efficient & Optimized CSS August 31, 2010 Think Vitamin HTML & CSS Online Conference Zoe Mickley Gillenwater @ zomigi](https://reader033.vdocuments.site/reader033/viewer/2022060900/609dc10d59236a34654f3875/html5/thumbnails/44.jpg)
44
Reduce load times• Reduce file size:– Remove unnecessary characters– Use Gzip compression
• Reduce HTTP requests:– Combine multiple CSS files– Use sprites– Use CSS3
• Improve parallel downloading:– Don't combine @import and link
• Improve CSS parsing speed:– Use efficient selectors
![Page 45: Highly Maintainable, Efficient Optimized CSS...Highly Maintainable, Efficient & Optimized CSS August 31, 2010 Think Vitamin HTML & CSS Online Conference Zoe Mickley Gillenwater @ zomigi](https://reader033.vdocuments.site/reader033/viewer/2022060900/609dc10d59236a34654f3875/html5/thumbnails/45.jpg)
45
Minify your CSS• Remove unnecessary characters (white
space, comments) to reduce file size• Only on live file, not working files– Make changes to non-minified file– Copy sheet, minify, upload
![Page 46: Highly Maintainable, Efficient Optimized CSS...Highly Maintainable, Efficient & Optimized CSS August 31, 2010 Think Vitamin HTML & CSS Online Conference Zoe Mickley Gillenwater @ zomigi](https://reader033.vdocuments.site/reader033/viewer/2022060900/609dc10d59236a34654f3875/html5/thumbnails/46.jpg)
46
How to minify your CSS• Manual as part of formatting practices• Semi-automated web tools:– www.codebeautifier.com– www.csscompressor.com– www.cssoptimiser.com– www.cssdrive.com/index.php/main/
csscompressor• Semi-automated command-line tools:– http://yuilibrary.com/projects/yuicompressor– http://csstidy.sourceforge.net
![Page 47: Highly Maintainable, Efficient Optimized CSS...Highly Maintainable, Efficient & Optimized CSS August 31, 2010 Think Vitamin HTML & CSS Online Conference Zoe Mickley Gillenwater @ zomigi](https://reader033.vdocuments.site/reader033/viewer/2022060900/609dc10d59236a34654f3875/html5/thumbnails/47.jpg)
47
Minify your CSS (and more) with the Minify script• http://code.google.com/p/minify• What it does:– Removes unnecessary characters– Combines multiple CSS or JavaScript files– Serves CSS/JS with gzip compression and
optimal cache headers• Automatic when you upload changed file
![Page 48: Highly Maintainable, Efficient Optimized CSS...Highly Maintainable, Efficient & Optimized CSS August 31, 2010 Think Vitamin HTML & CSS Online Conference Zoe Mickley Gillenwater @ zomigi](https://reader033.vdocuments.site/reader033/viewer/2022060900/609dc10d59236a34654f3875/html5/thumbnails/48.jpg)
48
Gzip compression• HTTP compression utility• Can compress many file types on server• Browsers decode compressed files
automatically on client-side• Needs to be activated on your server
and your site
![Page 49: Highly Maintainable, Efficient Optimized CSS...Highly Maintainable, Efficient & Optimized CSS August 31, 2010 Think Vitamin HTML & CSS Online Conference Zoe Mickley Gillenwater @ zomigi](https://reader033.vdocuments.site/reader033/viewer/2022060900/609dc10d59236a34654f3875/html5/thumbnails/49.jpg)
49
Efficient CSS3 techniques• Reduce the need for images/JS/Flash:– border-radius– box-shadow– text-shadow– gradients– transforms
• Reduce the need for separate mobile style sheets, sites, or width/device detection scripts using media queries
![Page 50: Highly Maintainable, Efficient Optimized CSS...Highly Maintainable, Efficient & Optimized CSS August 31, 2010 Think Vitamin HTML & CSS Online Conference Zoe Mickley Gillenwater @ zomigi](https://reader033.vdocuments.site/reader033/viewer/2022060900/609dc10d59236a34654f3875/html5/thumbnails/50.jpg)
50
Don't use @import and link• Details at www.stevesouders.com/blog/
2009/04/09/dont-use-import• Causes style sheets to be loaded
sequentially instead of at same time– @import and link together in head blocks IE– link with @import in it blocks all browsers
![Page 51: Highly Maintainable, Efficient Optimized CSS...Highly Maintainable, Efficient & Optimized CSS August 31, 2010 Think Vitamin HTML & CSS Online Conference Zoe Mickley Gillenwater @ zomigi](https://reader033.vdocuments.site/reader033/viewer/2022060900/609dc10d59236a34654f3875/html5/thumbnails/51.jpg)
51
Efficient selectors• Browsers read selectors right to left• IDs fastest, then classes, tags, universal
– Fast: div ul #widget { ... }– Slow: #widget li a { ... }
• Don't add tags to start of selectors– Bad: div#header { ... }
• Avoid descendent selectors when possible
– Bad: #footer p { font-size: 80% }– Good: #footer { font-size: 80% }
![Page 52: Highly Maintainable, Efficient Optimized CSS...Highly Maintainable, Efficient & Optimized CSS August 31, 2010 Think Vitamin HTML & CSS Online Conference Zoe Mickley Gillenwater @ zomigi](https://reader033.vdocuments.site/reader033/viewer/2022060900/609dc10d59236a34654f3875/html5/thumbnails/52.jpg)
52
Selectors aren't that important• Don't sacrifice code quality and
maintainability• Speed tests:
www.stevesouders.com/blog/2009/03/10/performance-impact-of-css-selectors
![Page 53: Highly Maintainable, Efficient Optimized CSS...Highly Maintainable, Efficient & Optimized CSS August 31, 2010 Think Vitamin HTML & CSS Online Conference Zoe Mickley Gillenwater @ zomigi](https://reader033.vdocuments.site/reader033/viewer/2022060900/609dc10d59236a34654f3875/html5/thumbnails/53.jpg)
53
Learn moreDownload slides, get links:www.zomigi.com/blog/maintainable-efficient-css/
Book:www.stunningcss3.com
Zoe Mickley Gillenwater@ zomigidesign@ zomigi.comwww.zomigi.com
![Page 54: Highly Maintainable, Efficient Optimized CSS...Highly Maintainable, Efficient & Optimized CSS August 31, 2010 Think Vitamin HTML & CSS Online Conference Zoe Mickley Gillenwater @ zomigi](https://reader033.vdocuments.site/reader033/viewer/2022060900/609dc10d59236a34654f3875/html5/thumbnails/54.jpg)
54
Questions?
Zoe Mickley Gillenwater@ zomigidesign@ zomigi.comwww.zomigi.com