SlideShare a Scribd company logo
Highly Maintainable,
Efficient & Optimized
CSS
August 31, 2010
Think Vitamin HTML & CSS Online Conference
Zoe Mickley Gillenwater
@ zomigi
                                             1
What I do
       Books                         Web
now    Flexible Web Design:          Freelance graphic
       Creating Liquid and Elastic   designer and web
       Layouts with CSS              developer
       www.flexiblewebbook.com       CSS consultant
                                     Member of Adobe
soon   Stunning CSS3:                Task Force for WaSP
       A Project-based Guide to
       the Latest in CSS
       www.stunningcss3.com

                                                           2
Why maintainability matters
These people need to be able to read,
understand, and easily change your CSS:
✔   you
✔   your teammates
✔   your successor
✔   your clients




                                          3
Why maintainability matters
If they can't:
✔ costs everyone time
✔ bloats CSS




                              4
Why efficiency matters
✔ users like fast-loading pages
✔ Google likes fast-loading pages
✔ clients like happy users and happy Google




                                              5
Have your cake
 and eat it too?


Photo by Mike Chaput-Branson, “ Chocolate Beet Cake,” www.flickr.com/photos/427/2508045734   6
Often, yes.

Photo by Rich Renomeron, “ All Gone,” www.flickr.com/photos/rrenomeron/3336008209   7
But sometimes
 the two
 don't mix.




Photo by Tétine, “ Vinaigrette #2 - Olive oil,” www.flickr.com/photos/83331954@N00/1374377040   8
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;
      }

                                                             9
Efficient but hard to maintain
#widget{overflow:auto;width:200px;background:#ccc;border:1
px 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}




                                                             10
Balance maintainability and
efficiency to get optimized CSS
• Which one gets more weight depends on
  the project
• Tools can help




                                          11
What we'll cover
• Some things basic, some things more
  complicated
• Don't have to use them all
• Some based on personal preference




                                        12
Maintainable CSS is:
✔ organized
✔ readable
✔ streamlined




                       13
1
    Organized
    How 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.



                                    14
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>
                                                              15
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




                                               16
Separating media types
Separate screen and print styles:
<link href="main.css" media="screen" rel="stylesheet"
type="text/css">
<link href="print.css" media="print" rel="stylesheet"
type="text/css">



Overlapped screen and print styles:
<link href="main.css" rel="stylesheet" type="text/css">
<link href="print.css" media="print" rel="stylesheet"
type="text/css">




                                                          17
Keeping media types together
body {
  color:#333;
  background-color:#ccc;
}
@media screen, projection {
  body { background-image:url(background.png); }
}
@media print {
  body { background-color: #fff; color:#000; }
}



• One less HTTP request
• Easier to remember non-screen styles
                                                   18
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
                                             19
Separating IE hacks with
conditional comments
One IE sheet:
<!--[if lte IE 8]>
  <link rel="stylesheet" href="ie_all.css" type="text/css">
<![endif]-->


Different IE sheets for different IE versions:
<!--[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]-->
                                                              20
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
                                                    21
Conditional comments to add
IE classes to html tag
The HTML:
<!--[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 CSS:
#widget { min-height: 100px; }
.ie6 #widget { height: 100px; }


                                                     22
Separating CSS3 browser-
prefixed properties
Put sheet with prefixes first in HTML:
<link href="prefixes.css" rel="stylesheet" type="text/css">
<link href="main.css" rel="stylesheet" type="text/css">


In main style sheet:
#widget { transform: rotate(90deg); }


In prefixes.css:
#widget {
  -moz-transform: rotate(90deg);
  -o-transform: rotate(90deg);
  -webkit-transform: rotate(90deg);
}
                                                              23
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
                                                 24
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



                                              25
Organizing rules within a sheet
Use comments to group related rules
/* LAYOUT ------------------ */
#wrapper { ... }
#header { ... }

/* TEXT -------------------- */
h1, h2, h3, h4, h5, h6 { ... }

/* IMAGES ------------------ */
.chart { ... }

/* FORMS ------------------- */
label { ... }

/* ARTICLES ---------------- */
.pullquote { ... }
                                      26
Finding rules within a sheet
Add table of contents to top of sheet
referring to commented sections
/* This sheet contains rules for: */
/* LAYOUT, TEXT, IMAGES, FORMS, ARTICLES */



Add special character as searching aid
/* =ARTICLES ---------------- */
.pullquote { ... }




                                              27
2
    Readable
    Understandable by humans just
    looking at your CSS out of
    context. Formatting rules to make
    it easy to tell what does what.



                                        28
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;
      }

                                                             29
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)



                                                    30
Formatting declarations
Each declaration on new line
#widget {
  overflow: auto;
  width: 200px;
  background: #ccc;
  }


Each declaration on same line
#widget { overflow:auto; width:200px; background:#ccc; }




                                                           31
Meaningful class/ID names
Bad:
.big-red-box {
  background: #f00;
  color: #fff;
  font-size: 150%;
  }


Good:
.warning {
  background: #f00;
  color: #fff;
  font-size: 150%
  }

                            32
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




                                           33
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
                                                34
3
    Streamlined
    Achieve a particular look with as
    little CSS as possible.




                                        35
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




                                             36
Inheritance
Bad:
#sidebar h3 { color: #000;   }
.sale h3    { color: #fff;   }
.article h3 { color: #000;   }
.news h3    { color: #000;   }


Better:
#sidebar h3, .article h3, .news h3 { color: #000; }
.sale h3 { color: #fff; }


Best:
h3 { color: #000; }
.sale h3 { color: #fff; }
                                                      37
Consolidate rules
• Grouped selectors
• Classes instead of IDs
• Classes instead of styling generic-
  elements based on their location
• Classes with reusably broad names




                                        38
Classes instead of IDs
Bad:
#sidebar-news li { border-bottom: 1px dashed #ccc; }
#footer-news li { border-bottom: 1px dashed #ccc; }
#press-releases li { border-bottom: 1px dashed #ccc; }



Good:
.news li { border-bottom: 1px dashed #ccc; }




                                                         39
Classes instead of location-
based element styles
Bad:
#sidebar li { border-bottom: 1px dashed #ccc; }


Could end up looking like this:
#sidebar li { border-bottom: 1px dashed #ccc; }
#sidebar .twitter li { border-bottom: none; color: #3C9; }
#footer-news li { border-bottom: 1px dashed #ccc; }


Good:
.news li { border-bottom: 1px dashed #ccc; }
.twitter { color: #3C9; }

                                                             40
Give classes broad names
Bad:
.contact-form-error { color: #f00; }
.login-form-error   { color: #f00; }
.search-form-error { color: #f00; }



Good:
.error { color: #f00; }




                                       41
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




                                              42
Efficient CSS is quick to:
✔ download
✔ render/redraw




                             43
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          44
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




                                         45
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

                                                   46
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


                                                47
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




                                           48
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

                                          49
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




                                                    50
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% }
                                               51
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




                                           52
Learn more
Download slides, get links:
www.zomigi.com/blog/maintainable-efficient-css/

Book:
www.stunningcss3.com

Zoe Mickley Gillenwater
@ zomigi
design@ zomigi.com
www.zomigi.com
                                                  53
Questions?




Zoe Mickley Gillenwater
@ zomigi
design@ zomigi.com
www.zomigi.com
                          54

More Related Content

What's hot

CSS framework By Palash
CSS framework By PalashCSS framework By Palash
CSS framework By Palash
PalashBajpai
 
BDUG Responsive Web Theming - 7/23/12
BDUG Responsive Web Theming - 7/23/12BDUG Responsive Web Theming - 7/23/12
BDUG Responsive Web Theming - 7/23/12
ucbdrupal
 
Slow kinda sucks
Slow kinda sucksSlow kinda sucks
Slow kinda sucks
Tim Wright
 
BEM it!
BEM it!BEM it!
BEM it!
Max Shirshin
 
Drawing the Line with Browser Compatibility
Drawing the Line with Browser CompatibilityDrawing the Line with Browser Compatibility
Drawing the Line with Browser Compatibility
jsmith92
 
How to create a basic template
How to create a basic templateHow to create a basic template
How to create a basic template
vathur
 
LESS is More
LESS is MoreLESS is More
LESS is More
jsmith92
 
CSS in React
CSS in ReactCSS in React
CSS in React
Joe Seifi
 
新 · 交互
新 · 交互新 · 交互
新 · 交互
Sofish Lin
 
DRY CSS A don’t-repeat-yourself methodology for creating efficient, unified a...
DRY CSS A don’t-repeat-yourself methodology for creating efficient, unified a...DRY CSS A don’t-repeat-yourself methodology for creating efficient, unified a...
DRY CSS A don’t-repeat-yourself methodology for creating efficient, unified a...
Jer Clarke
 
Brave new world of HTML5 - Interlink Conference Vancouver 04.06.2011
Brave new world of HTML5 - Interlink Conference Vancouver 04.06.2011Brave new world of HTML5 - Interlink Conference Vancouver 04.06.2011
Brave new world of HTML5 - Interlink Conference Vancouver 04.06.2011
Patrick Lauke
 
Practical Performance Tips and Tricks to Make Your HTML/JavaScript Apps Faster
Practical Performance Tips and Tricks to Make Your HTML/JavaScript Apps FasterPractical Performance Tips and Tricks to Make Your HTML/JavaScript Apps Faster
Practical Performance Tips and Tricks to Make Your HTML/JavaScript Apps Faster
Doris Chen
 
From PSD to WordPress Theme: Bringing designs to life
From PSD to WordPress Theme: Bringing designs to lifeFrom PSD to WordPress Theme: Bringing designs to life
From PSD to WordPress Theme: Bringing designs to life
Derek Christensen
 
Css
CssCss
Using Core Themes in Drupal 8
Using Core Themes in Drupal 8Using Core Themes in Drupal 8
Using Core Themes in Drupal 8
Suzanne Dergacheva
 
Stop reinventing the wheel: Build Responsive Websites Using Bootstrap
Stop reinventing the wheel: Build Responsive Websites Using BootstrapStop reinventing the wheel: Build Responsive Websites Using Bootstrap
Stop reinventing the wheel: Build Responsive Websites Using Bootstrap
freshlybakedpixels
 
Grok Drupal (7) Theming - 2011 Feb update
Grok Drupal (7) Theming - 2011 Feb updateGrok Drupal (7) Theming - 2011 Feb update
Grok Drupal (7) Theming - 2011 Feb update
Laura Scott
 
Beyond CSS Architecture
Beyond CSS ArchitectureBeyond CSS Architecture
Beyond CSS Architecture
拓樹 谷
 
How to use CSS3 in WordPress
How to use CSS3 in WordPressHow to use CSS3 in WordPress
How to use CSS3 in WordPress
Suzette Franck
 
Introduccion a HTML5
Introduccion a HTML5Introduccion a HTML5
Introduccion a HTML5
Pablo Garaizar
 

What's hot (20)

CSS framework By Palash
CSS framework By PalashCSS framework By Palash
CSS framework By Palash
 
BDUG Responsive Web Theming - 7/23/12
BDUG Responsive Web Theming - 7/23/12BDUG Responsive Web Theming - 7/23/12
BDUG Responsive Web Theming - 7/23/12
 
Slow kinda sucks
Slow kinda sucksSlow kinda sucks
Slow kinda sucks
 
BEM it!
BEM it!BEM it!
BEM it!
 
Drawing the Line with Browser Compatibility
Drawing the Line with Browser CompatibilityDrawing the Line with Browser Compatibility
Drawing the Line with Browser Compatibility
 
How to create a basic template
How to create a basic templateHow to create a basic template
How to create a basic template
 
LESS is More
LESS is MoreLESS is More
LESS is More
 
CSS in React
CSS in ReactCSS in React
CSS in React
 
新 · 交互
新 · 交互新 · 交互
新 · 交互
 
DRY CSS A don’t-repeat-yourself methodology for creating efficient, unified a...
DRY CSS A don’t-repeat-yourself methodology for creating efficient, unified a...DRY CSS A don’t-repeat-yourself methodology for creating efficient, unified a...
DRY CSS A don’t-repeat-yourself methodology for creating efficient, unified a...
 
Brave new world of HTML5 - Interlink Conference Vancouver 04.06.2011
Brave new world of HTML5 - Interlink Conference Vancouver 04.06.2011Brave new world of HTML5 - Interlink Conference Vancouver 04.06.2011
Brave new world of HTML5 - Interlink Conference Vancouver 04.06.2011
 
Practical Performance Tips and Tricks to Make Your HTML/JavaScript Apps Faster
Practical Performance Tips and Tricks to Make Your HTML/JavaScript Apps FasterPractical Performance Tips and Tricks to Make Your HTML/JavaScript Apps Faster
Practical Performance Tips and Tricks to Make Your HTML/JavaScript Apps Faster
 
From PSD to WordPress Theme: Bringing designs to life
From PSD to WordPress Theme: Bringing designs to lifeFrom PSD to WordPress Theme: Bringing designs to life
From PSD to WordPress Theme: Bringing designs to life
 
Css
CssCss
Css
 
Using Core Themes in Drupal 8
Using Core Themes in Drupal 8Using Core Themes in Drupal 8
Using Core Themes in Drupal 8
 
Stop reinventing the wheel: Build Responsive Websites Using Bootstrap
Stop reinventing the wheel: Build Responsive Websites Using BootstrapStop reinventing the wheel: Build Responsive Websites Using Bootstrap
Stop reinventing the wheel: Build Responsive Websites Using Bootstrap
 
Grok Drupal (7) Theming - 2011 Feb update
Grok Drupal (7) Theming - 2011 Feb updateGrok Drupal (7) Theming - 2011 Feb update
Grok Drupal (7) Theming - 2011 Feb update
 
Beyond CSS Architecture
Beyond CSS ArchitectureBeyond CSS Architecture
Beyond CSS Architecture
 
How to use CSS3 in WordPress
How to use CSS3 in WordPressHow to use CSS3 in WordPress
How to use CSS3 in WordPress
 
Introduccion a HTML5
Introduccion a HTML5Introduccion a HTML5
Introduccion a HTML5
 

Similar to Highly Maintainable, Efficient, and Optimized CSS

Web design-workflow
Web design-workflowWeb design-workflow
Web design-workflow
Peter Kaizer
 
6 css week12 2020 2021 for g10
6 css week12 2020 2021 for g106 css week12 2020 2021 for g10
6 css week12 2020 2021 for g10
Osama Ghandour Geris
 
Advanced CSS Troubleshooting & Efficiency
Advanced CSS Troubleshooting & EfficiencyAdvanced CSS Troubleshooting & Efficiency
Advanced CSS Troubleshooting & Efficiency
Denise Jacobs
 
Adobe MAX 2008: HTML/CSS + Fireworks
Adobe MAX 2008: HTML/CSS + FireworksAdobe MAX 2008: HTML/CSS + Fireworks
Adobe MAX 2008: HTML/CSS + Fireworks
Nathan Smith
 
Ease into HTML5 and CSS3
Ease into HTML5 and CSS3Ease into HTML5 and CSS3
Ease into HTML5 and CSS3
Brian Moon
 
An Unexpected Solution to Microservices UI Composition
An Unexpected Solution to Microservices UI CompositionAn Unexpected Solution to Microservices UI Composition
An Unexpected Solution to Microservices UI Composition
Dr. Arif Wider
 
Advanced CSS Troubleshooting
Advanced CSS TroubleshootingAdvanced CSS Troubleshooting
Advanced CSS Troubleshooting
Denise Jacobs
 
Css best practices style guide and tips
Css best practices style guide and tipsCss best practices style guide and tips
Css best practices style guide and tips
Chris Love
 
Cssbestpracticesjstyleguidejandtips 150830184202-lva1-app6892
Cssbestpracticesjstyleguidejandtips 150830184202-lva1-app6892Cssbestpracticesjstyleguidejandtips 150830184202-lva1-app6892
Cssbestpracticesjstyleguidejandtips 150830184202-lva1-app6892
Deepak Sharma
 
Using a CSS Framework
Using a CSS FrameworkUsing a CSS Framework
Using a CSS Framework
Gareth Saunders
 
Pertemuan 7
Pertemuan 7Pertemuan 7
Pertemuan 7
beiharira
 
Even faster web sites
Even faster web sitesEven faster web sites
Even faster web sites
Felipe Lavín
 
Structuring your CSS for maintainability: rules and guile lines to write CSS
Structuring your CSS for maintainability: rules and guile lines to write CSSStructuring your CSS for maintainability: rules and guile lines to write CSS
Structuring your CSS for maintainability: rules and guile lines to write CSS
Sanjoy Kr. Paul
 
The Future is Modular, Jonathan Snook
The Future is Modular, Jonathan SnookThe Future is Modular, Jonathan Snook
The Future is Modular, Jonathan Snook
Future Insights
 
Class15
Class15Class15
Class15
Jiyeon Lee
 
Girl Develop It Cincinnati: Intro to HTML/CSS Class 4
Girl Develop It Cincinnati: Intro to HTML/CSS Class 4Girl Develop It Cincinnati: Intro to HTML/CSS Class 4
Girl Develop It Cincinnati: Intro to HTML/CSS Class 4
Erin M. Kidwell
 
New Elements & Features in CSS3
New Elements & Features in CSS3New Elements & Features in CSS3
New Elements & Features in CSS3
Jamshid Hashimi
 
Unic - frontend development-in-complex-projects
Unic - frontend development-in-complex-projectsUnic - frontend development-in-complex-projects
Unic - frontend development-in-complex-projects
Unic
 
Css week10 2019 2020 for g10 by eng.osama ghandour
Css week10 2019 2020 for g10 by eng.osama ghandourCss week10 2019 2020 for g10 by eng.osama ghandour
Css week10 2019 2020 for g10 by eng.osama ghandour
Osama Ghandour Geris
 
Website optimization with request reduce
Website optimization with request reduceWebsite optimization with request reduce
Website optimization with request reduce
Matt Wrock
 

Similar to Highly Maintainable, Efficient, and Optimized CSS (20)

Web design-workflow
Web design-workflowWeb design-workflow
Web design-workflow
 
6 css week12 2020 2021 for g10
6 css week12 2020 2021 for g106 css week12 2020 2021 for g10
6 css week12 2020 2021 for g10
 
Advanced CSS Troubleshooting & Efficiency
Advanced CSS Troubleshooting & EfficiencyAdvanced CSS Troubleshooting & Efficiency
Advanced CSS Troubleshooting & Efficiency
 
Adobe MAX 2008: HTML/CSS + Fireworks
Adobe MAX 2008: HTML/CSS + FireworksAdobe MAX 2008: HTML/CSS + Fireworks
Adobe MAX 2008: HTML/CSS + Fireworks
 
Ease into HTML5 and CSS3
Ease into HTML5 and CSS3Ease into HTML5 and CSS3
Ease into HTML5 and CSS3
 
An Unexpected Solution to Microservices UI Composition
An Unexpected Solution to Microservices UI CompositionAn Unexpected Solution to Microservices UI Composition
An Unexpected Solution to Microservices UI Composition
 
Advanced CSS Troubleshooting
Advanced CSS TroubleshootingAdvanced CSS Troubleshooting
Advanced CSS Troubleshooting
 
Css best practices style guide and tips
Css best practices style guide and tipsCss best practices style guide and tips
Css best practices style guide and tips
 
Cssbestpracticesjstyleguidejandtips 150830184202-lva1-app6892
Cssbestpracticesjstyleguidejandtips 150830184202-lva1-app6892Cssbestpracticesjstyleguidejandtips 150830184202-lva1-app6892
Cssbestpracticesjstyleguidejandtips 150830184202-lva1-app6892
 
Using a CSS Framework
Using a CSS FrameworkUsing a CSS Framework
Using a CSS Framework
 
Pertemuan 7
Pertemuan 7Pertemuan 7
Pertemuan 7
 
Even faster web sites
Even faster web sitesEven faster web sites
Even faster web sites
 
Structuring your CSS for maintainability: rules and guile lines to write CSS
Structuring your CSS for maintainability: rules and guile lines to write CSSStructuring your CSS for maintainability: rules and guile lines to write CSS
Structuring your CSS for maintainability: rules and guile lines to write CSS
 
The Future is Modular, Jonathan Snook
The Future is Modular, Jonathan SnookThe Future is Modular, Jonathan Snook
The Future is Modular, Jonathan Snook
 
Class15
Class15Class15
Class15
 
Girl Develop It Cincinnati: Intro to HTML/CSS Class 4
Girl Develop It Cincinnati: Intro to HTML/CSS Class 4Girl Develop It Cincinnati: Intro to HTML/CSS Class 4
Girl Develop It Cincinnati: Intro to HTML/CSS Class 4
 
New Elements & Features in CSS3
New Elements & Features in CSS3New Elements & Features in CSS3
New Elements & Features in CSS3
 
Unic - frontend development-in-complex-projects
Unic - frontend development-in-complex-projectsUnic - frontend development-in-complex-projects
Unic - frontend development-in-complex-projects
 
Css week10 2019 2020 for g10 by eng.osama ghandour
Css week10 2019 2020 for g10 by eng.osama ghandourCss week10 2019 2020 for g10 by eng.osama ghandour
Css week10 2019 2020 for g10 by eng.osama ghandour
 
Website optimization with request reduce
Website optimization with request reduceWebsite optimization with request reduce
Website optimization with request reduce
 

More from Zoe Gillenwater

Using Flexbox Today (Frontier Conf 2016)
Using Flexbox Today (Frontier Conf 2016)Using Flexbox Today (Frontier Conf 2016)
Using Flexbox Today (Frontier Conf 2016)
Zoe Gillenwater
 
Using Flexbox Today (Generate Sydney 2016)
Using Flexbox Today (Generate Sydney 2016)Using Flexbox Today (Generate Sydney 2016)
Using Flexbox Today (Generate Sydney 2016)
Zoe Gillenwater
 
Using Flexbox Today (CSS Summit 2016)
Using Flexbox Today (CSS Summit 2016)Using Flexbox Today (CSS Summit 2016)
Using Flexbox Today (CSS Summit 2016)
Zoe Gillenwater
 
Using Flexbox Today (Frontend United 2016)
Using Flexbox Today (Frontend United 2016)Using Flexbox Today (Frontend United 2016)
Using Flexbox Today (Frontend United 2016)
Zoe Gillenwater
 
Show vs. Tell in UX Design (Front in Amsterdam)
Show vs. Tell in UX Design (Front in Amsterdam)Show vs. Tell in UX Design (Front in Amsterdam)
Show vs. Tell in UX Design (Front in Amsterdam)
Zoe Gillenwater
 
Enhancing Responsiveness with Flexbox (CSS Conf EU 2015)
Enhancing Responsiveness with Flexbox (CSS Conf EU 2015)Enhancing Responsiveness with Flexbox (CSS Conf EU 2015)
Enhancing Responsiveness with Flexbox (CSS Conf EU 2015)
Zoe Gillenwater
 
Responsive Flexbox Inspiration (Responsive Day Out)
Responsive Flexbox Inspiration (Responsive Day Out)Responsive Flexbox Inspiration (Responsive Day Out)
Responsive Flexbox Inspiration (Responsive Day Out)
Zoe Gillenwater
 
Enhancing Responsiveness With Flexbox (CSS Day)
Enhancing Responsiveness With Flexbox (CSS Day)Enhancing Responsiveness With Flexbox (CSS Day)
Enhancing Responsiveness With Flexbox (CSS Day)
Zoe Gillenwater
 
CSS Lessons Learned the Hard Way (ConvergeSE)
CSS Lessons Learned the Hard Way (ConvergeSE)CSS Lessons Learned the Hard Way (ConvergeSE)
CSS Lessons Learned the Hard Way (ConvergeSE)
Zoe Gillenwater
 
Enhancing Responsiveness With Flexbox (Smashing Conference)
Enhancing Responsiveness With Flexbox (Smashing Conference)Enhancing Responsiveness With Flexbox (Smashing Conference)
Enhancing Responsiveness With Flexbox (Smashing Conference)
Zoe Gillenwater
 
Enhancing Responsiveness with Flexbox (RWD Summit)
Enhancing Responsiveness with Flexbox (RWD Summit)Enhancing Responsiveness with Flexbox (RWD Summit)
Enhancing Responsiveness with Flexbox (RWD Summit)
Zoe Gillenwater
 
CSS Lessons Learned the Hard Way (Beyond Tellerand)
CSS Lessons Learned the Hard Way (Beyond Tellerand)CSS Lessons Learned the Hard Way (Beyond Tellerand)
CSS Lessons Learned the Hard Way (Beyond Tellerand)
Zoe Gillenwater
 
CSS Lessons Learned the Hard Way (Generate Conf)
CSS Lessons Learned the Hard Way (Generate Conf)CSS Lessons Learned the Hard Way (Generate Conf)
CSS Lessons Learned the Hard Way (Generate Conf)
Zoe Gillenwater
 
Leveling Up With Flexbox (Smart Web Conference)
Leveling Up With Flexbox (Smart Web Conference)Leveling Up With Flexbox (Smart Web Conference)
Leveling Up With Flexbox (Smart Web Conference)
Zoe Gillenwater
 
Leveling Up with Flexbox (Smashing Conference)
Leveling Up with Flexbox (Smashing Conference)Leveling Up with Flexbox (Smashing Conference)
Leveling Up with Flexbox (Smashing Conference)
Zoe Gillenwater
 
Just One (CSS Dev Conference keynote)
Just One (CSS Dev Conference keynote)Just One (CSS Dev Conference keynote)
Just One (CSS Dev Conference keynote)
Zoe Gillenwater
 
Putting Flexbox into Practice (Fronteers)
Putting Flexbox into Practice (Fronteers)Putting Flexbox into Practice (Fronteers)
Putting Flexbox into Practice (Fronteers)
Zoe Gillenwater
 
Putting Flexbox into Practice
Putting Flexbox into PracticePutting Flexbox into Practice
Putting Flexbox into Practice
Zoe Gillenwater
 
CSS3 Layout
CSS3 LayoutCSS3 Layout
CSS3 Layout
Zoe Gillenwater
 
Building Responsive Layouts
Building Responsive LayoutsBuilding Responsive Layouts
Building Responsive Layouts
Zoe Gillenwater
 

More from Zoe Gillenwater (20)

Using Flexbox Today (Frontier Conf 2016)
Using Flexbox Today (Frontier Conf 2016)Using Flexbox Today (Frontier Conf 2016)
Using Flexbox Today (Frontier Conf 2016)
 
Using Flexbox Today (Generate Sydney 2016)
Using Flexbox Today (Generate Sydney 2016)Using Flexbox Today (Generate Sydney 2016)
Using Flexbox Today (Generate Sydney 2016)
 
Using Flexbox Today (CSS Summit 2016)
Using Flexbox Today (CSS Summit 2016)Using Flexbox Today (CSS Summit 2016)
Using Flexbox Today (CSS Summit 2016)
 
Using Flexbox Today (Frontend United 2016)
Using Flexbox Today (Frontend United 2016)Using Flexbox Today (Frontend United 2016)
Using Flexbox Today (Frontend United 2016)
 
Show vs. Tell in UX Design (Front in Amsterdam)
Show vs. Tell in UX Design (Front in Amsterdam)Show vs. Tell in UX Design (Front in Amsterdam)
Show vs. Tell in UX Design (Front in Amsterdam)
 
Enhancing Responsiveness with Flexbox (CSS Conf EU 2015)
Enhancing Responsiveness with Flexbox (CSS Conf EU 2015)Enhancing Responsiveness with Flexbox (CSS Conf EU 2015)
Enhancing Responsiveness with Flexbox (CSS Conf EU 2015)
 
Responsive Flexbox Inspiration (Responsive Day Out)
Responsive Flexbox Inspiration (Responsive Day Out)Responsive Flexbox Inspiration (Responsive Day Out)
Responsive Flexbox Inspiration (Responsive Day Out)
 
Enhancing Responsiveness With Flexbox (CSS Day)
Enhancing Responsiveness With Flexbox (CSS Day)Enhancing Responsiveness With Flexbox (CSS Day)
Enhancing Responsiveness With Flexbox (CSS Day)
 
CSS Lessons Learned the Hard Way (ConvergeSE)
CSS Lessons Learned the Hard Way (ConvergeSE)CSS Lessons Learned the Hard Way (ConvergeSE)
CSS Lessons Learned the Hard Way (ConvergeSE)
 
Enhancing Responsiveness With Flexbox (Smashing Conference)
Enhancing Responsiveness With Flexbox (Smashing Conference)Enhancing Responsiveness With Flexbox (Smashing Conference)
Enhancing Responsiveness With Flexbox (Smashing Conference)
 
Enhancing Responsiveness with Flexbox (RWD Summit)
Enhancing Responsiveness with Flexbox (RWD Summit)Enhancing Responsiveness with Flexbox (RWD Summit)
Enhancing Responsiveness with Flexbox (RWD Summit)
 
CSS Lessons Learned the Hard Way (Beyond Tellerand)
CSS Lessons Learned the Hard Way (Beyond Tellerand)CSS Lessons Learned the Hard Way (Beyond Tellerand)
CSS Lessons Learned the Hard Way (Beyond Tellerand)
 
CSS Lessons Learned the Hard Way (Generate Conf)
CSS Lessons Learned the Hard Way (Generate Conf)CSS Lessons Learned the Hard Way (Generate Conf)
CSS Lessons Learned the Hard Way (Generate Conf)
 
Leveling Up With Flexbox (Smart Web Conference)
Leveling Up With Flexbox (Smart Web Conference)Leveling Up With Flexbox (Smart Web Conference)
Leveling Up With Flexbox (Smart Web Conference)
 
Leveling Up with Flexbox (Smashing Conference)
Leveling Up with Flexbox (Smashing Conference)Leveling Up with Flexbox (Smashing Conference)
Leveling Up with Flexbox (Smashing Conference)
 
Just One (CSS Dev Conference keynote)
Just One (CSS Dev Conference keynote)Just One (CSS Dev Conference keynote)
Just One (CSS Dev Conference keynote)
 
Putting Flexbox into Practice (Fronteers)
Putting Flexbox into Practice (Fronteers)Putting Flexbox into Practice (Fronteers)
Putting Flexbox into Practice (Fronteers)
 
Putting Flexbox into Practice
Putting Flexbox into PracticePutting Flexbox into Practice
Putting Flexbox into Practice
 
CSS3 Layout
CSS3 LayoutCSS3 Layout
CSS3 Layout
 
Building Responsive Layouts
Building Responsive LayoutsBuilding Responsive Layouts
Building Responsive Layouts
 

Highly Maintainable, Efficient, and Optimized CSS

  • 1. Highly Maintainable, Efficient & Optimized CSS August 31, 2010 Think Vitamin HTML & CSS Online Conference Zoe Mickley Gillenwater @ zomigi 1
  • 2. What I do Books Web now Flexible Web Design: Freelance graphic Creating Liquid and Elastic designer and web Layouts with CSS developer www.flexiblewebbook.com CSS consultant Member of Adobe soon Stunning CSS3: Task Force for WaSP A Project-based Guide to the Latest in CSS www.stunningcss3.com 2
  • 3. Why maintainability matters These people need to be able to read, understand, and easily change your CSS: ✔ you ✔ your teammates ✔ your successor ✔ your clients 3
  • 4. Why maintainability matters If they can't: ✔ costs everyone time ✔ bloats CSS 4
  • 5. Why efficiency matters ✔ users like fast-loading pages ✔ Google likes fast-loading pages ✔ clients like happy users and happy Google 5
  • 6. Have your cake and eat it too? Photo by Mike Chaput-Branson, “ Chocolate Beet Cake,” www.flickr.com/photos/427/2508045734 6
  • 7. Often, yes. Photo by Rich Renomeron, “ All Gone,” www.flickr.com/photos/rrenomeron/3336008209 7
  • 8. But sometimes the two don't mix. Photo by Tétine, “ Vinaigrette #2 - Olive oil,” www.flickr.com/photos/83331954@N00/1374377040 8
  • 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; } 9
  • 10. Efficient but hard to maintain #widget{overflow:auto;width:200px;background:#ccc;border:1 px 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} 10
  • 11. Balance maintainability and efficiency to get optimized CSS • Which one gets more weight depends on the project • Tools can help 11
  • 12. What we'll cover • Some things basic, some things more complicated • Don't have to use them all • Some based on personal preference 12
  • 13. Maintainable CSS is: ✔ organized ✔ readable ✔ streamlined 13
  • 14. 1 Organized How 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. 14
  • 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> 15
  • 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 16
  • 17. Separating media types Separate screen and print styles: <link href="main.css" media="screen" rel="stylesheet" type="text/css"> <link href="print.css" media="print" rel="stylesheet" type="text/css"> Overlapped screen and print styles: <link href="main.css" rel="stylesheet" type="text/css"> <link href="print.css" media="print" rel="stylesheet" type="text/css"> 17
  • 18. Keeping media types together body { color:#333; background-color:#ccc; } @media screen, projection { body { background-image:url(background.png); } } @media print { body { background-color: #fff; color:#000; } } • One less HTTP request • Easier to remember non-screen styles 18
  • 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 19
  • 20. Separating IE hacks with conditional comments One IE sheet: <!--[if lte IE 8]> <link rel="stylesheet" href="ie_all.css" type="text/css"> <![endif]--> Different IE sheets for different IE versions: <!--[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]--> 20
  • 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 21
  • 22. Conditional comments to add IE classes to html tag The HTML: <!--[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 CSS: #widget { min-height: 100px; } .ie6 #widget { height: 100px; } 22
  • 23. Separating CSS3 browser- prefixed properties Put sheet with prefixes first in HTML: <link href="prefixes.css" rel="stylesheet" type="text/css"> <link href="main.css" rel="stylesheet" type="text/css"> In main style sheet: #widget { transform: rotate(90deg); } In prefixes.css: #widget { -moz-transform: rotate(90deg); -o-transform: rotate(90deg); -webkit-transform: rotate(90deg); } 23
  • 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 24
  • 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 25
  • 26. Organizing rules within a sheet Use comments to group related rules /* LAYOUT ------------------ */ #wrapper { ... } #header { ... } /* TEXT -------------------- */ h1, h2, h3, h4, h5, h6 { ... } /* IMAGES ------------------ */ .chart { ... } /* FORMS ------------------- */ label { ... } /* ARTICLES ---------------- */ .pullquote { ... } 26
  • 27. Finding rules within a sheet Add table of contents to top of sheet referring to commented sections /* This sheet contains rules for: */ /* LAYOUT, TEXT, IMAGES, FORMS, ARTICLES */ Add special character as searching aid /* =ARTICLES ---------------- */ .pullquote { ... } 27
  • 28. 2 Readable Understandable by humans just looking at your CSS out of context. Formatting rules to make it easy to tell what does what. 28
  • 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; } 29
  • 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) 30
  • 31. Formatting declarations Each declaration on new line #widget { overflow: auto; width: 200px; background: #ccc; } Each declaration on same line #widget { overflow:auto; width:200px; background:#ccc; } 31
  • 32. Meaningful class/ID names Bad: .big-red-box { background: #f00; color: #fff; font-size: 150%; } Good: .warning { background: #f00; color: #fff; font-size: 150% } 32
  • 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 33
  • 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 34
  • 35. 3 Streamlined Achieve a particular look with as little CSS as possible. 35
  • 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 36
  • 37. Inheritance Bad: #sidebar h3 { color: #000; } .sale h3 { color: #fff; } .article h3 { color: #000; } .news h3 { color: #000; } Better: #sidebar h3, .article h3, .news h3 { color: #000; } .sale h3 { color: #fff; } Best: h3 { color: #000; } .sale h3 { color: #fff; } 37
  • 38. Consolidate rules • Grouped selectors • Classes instead of IDs • Classes instead of styling generic- elements based on their location • Classes with reusably broad names 38
  • 39. Classes instead of IDs Bad: #sidebar-news li { border-bottom: 1px dashed #ccc; } #footer-news li { border-bottom: 1px dashed #ccc; } #press-releases li { border-bottom: 1px dashed #ccc; } Good: .news li { border-bottom: 1px dashed #ccc; } 39
  • 40. Classes instead of location- based element styles Bad: #sidebar li { border-bottom: 1px dashed #ccc; } Could end up looking like this: #sidebar li { border-bottom: 1px dashed #ccc; } #sidebar .twitter li { border-bottom: none; color: #3C9; } #footer-news li { border-bottom: 1px dashed #ccc; } Good: .news li { border-bottom: 1px dashed #ccc; } .twitter { color: #3C9; } 40
  • 41. Give classes broad names Bad: .contact-form-error { color: #f00; } .login-form-error { color: #f00; } .search-form-error { color: #f00; } Good: .error { color: #f00; } 41
  • 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 42
  • 43. Efficient CSS is quick to: ✔ download ✔ render/redraw 43
  • 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 44
  • 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 45
  • 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 46
  • 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 47
  • 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 48
  • 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 49
  • 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 50
  • 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% } 51
  • 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 52
  • 53. Learn more Download slides, get links: www.zomigi.com/blog/maintainable-efficient-css/ Book: www.stunningcss3.com Zoe Mickley Gillenwater @ zomigi design@ zomigi.com www.zomigi.com 53
  • 54. Questions? Zoe Mickley Gillenwater @ zomigi design@ zomigi.com www.zomigi.com 54