SlideShare a Scribd company logo

CSS Bloat!

Your website has out-of-control CSS bloat. You know your performance is being impacted, but how do you move from organic CSS with no particular architecture to something lighter, more logical, and easier to maintain? In this session, Nicole Sullivan and Stoyan Stefanov will show you how they improved the CSS at Facebook and Yahoo! Search. After this session you will know how to: 1. Use lint tools to automate and evaluate the efficiency of your CSS 2. Avoid the top 5 causes of CSS bloat, and 3. Speed up your site by making the UI code an order of magnitude smaller.

1 of 92
CSS BLOAT!
                             with Nicole Sullivan




Friday, September 10, 2010
TWEET!


                             @stubbornella




Friday, September 10, 2010
WHY OPTIMIZE CSS?


    • It blocks progressive rendering
     
 test: http://www.phpied.com/files/css-loading/table.php
    • It’s verbose (property value pairs cannot be minified like JS)
     
              text-decoration: underline
 != td: u


Friday, September 10, 2010
TOP 1000 STUDY


    1. Grab top Alexa sites
    2. Start Fiddler
    3. Load each site
    4. Export from Fiddler



Friday, September 10, 2010
<?php

         $file = file('alexa.txt');

         foreach ($file as $url) {

                  launch($url);

         }

         function launch($url) {

                  try {

                             $ie = new COM("InternetExplorer.Application");

                             $ie->Visible = true;

                             $ie->Navigate2($url);

                             while ($ie->ReadyState != 4) sleep(1);

                             $ie->Quit();

                  } catch (Exception $e) {}

         }

         ?>
Friday, September 10, 2010
42% DON’T GZIP CSS




Friday, September 10, 2010
Ad

Recommended

Website Pre SEO Analysis Report- Online Marketing: Search Engine Optimization
Website Pre SEO Analysis Report- Online Marketing: Search Engine OptimizationWebsite Pre SEO Analysis Report- Online Marketing: Search Engine Optimization
Website Pre SEO Analysis Report- Online Marketing: Search Engine OptimizationVikesh Sanwalodia
 
Website Analysis Seo Report
Website Analysis Seo ReportWebsite Analysis Seo Report
Website Analysis Seo ReportSEO Google Guru
 
Tổng quan về SEO, Quy trình SEO lên top nhanh và bền vững
Tổng quan về SEO, Quy trình SEO lên top nhanh và bền vữngTổng quan về SEO, Quy trình SEO lên top nhanh và bền vững
Tổng quan về SEO, Quy trình SEO lên top nhanh và bền vữngseothetop
 
Hacks für mehr Traktion: Pragmatische Tipps für Low Effort und High Reward
Hacks für mehr Traktion: Pragmatische Tipps für Low Effort und High RewardHacks für mehr Traktion: Pragmatische Tipps für Low Effort und High Reward
Hacks für mehr Traktion: Pragmatische Tipps für Low Effort und High Rewardget traction GmbH
 
Push Notifications: How to add them to a Flutter App
Push Notifications: How to add them to a Flutter AppPush Notifications: How to add them to a Flutter App
Push Notifications: How to add them to a Flutter AppFibonalabs
 

More Related Content

What's hot

Presentazione tesi di laurea
Presentazione tesi di laureaPresentazione tesi di laurea
Presentazione tesi di laureaErika Montoli
 
Bộ đề thực hành thi nghề tin học THPT Yên Hòa
Bộ đề thực hành thi nghề tin học THPT Yên HòaBộ đề thực hành thi nghề tin học THPT Yên Hòa
Bộ đề thực hành thi nghề tin học THPT Yên HòaVõ Tâm Long
 
Hướng dẫn sử dụng share point 2010
Hướng dẫn sử dụng share point 2010Hướng dẫn sử dụng share point 2010
Hướng dẫn sử dụng share point 2010Bùi Quang Hưng
 
DSL, Page Object and Selenium – a way to reliable functional tests
DSL, Page Object and Selenium – a way to reliable functional testsDSL, Page Object and Selenium – a way to reliable functional tests
DSL, Page Object and Selenium – a way to reliable functional testsMikalai Alimenkou
 
Tailieu.vncty.com huong dan nhap mon html
Tailieu.vncty.com   huong dan nhap mon htmlTailieu.vncty.com   huong dan nhap mon html
Tailieu.vncty.com huong dan nhap mon htmlTrần Đức Anh
 
Seo goals & objectives 2 quarter 2012
Seo goals & objectives 2 quarter 2012Seo goals & objectives 2 quarter 2012
Seo goals & objectives 2 quarter 2012EBY3081
 
Bài 1: SharePoint 2010 và xây dựng giải pháp cho SharePoint 2010
Bài 1: SharePoint 2010 và xây dựng giải pháp cho SharePoint 2010Bài 1: SharePoint 2010 và xây dựng giải pháp cho SharePoint 2010
Bài 1: SharePoint 2010 và xây dựng giải pháp cho SharePoint 2010MasterCode.vn
 
SEO Website Analysis - example report
SEO Website Analysis - example reportSEO Website Analysis - example report
SEO Website Analysis - example reportLynn Holley III
 
XML Sitemap and Robots.TXT Guide for SEO Beginners
XML Sitemap and Robots.TXT Guide for SEO BeginnersXML Sitemap and Robots.TXT Guide for SEO Beginners
XML Sitemap and Robots.TXT Guide for SEO BeginnersAditya Todawal
 
SEO Audit Example & Website Review
SEO Audit Example & Website ReviewSEO Audit Example & Website Review
SEO Audit Example & Website ReviewBrett Farmiloe
 
Basic introduction to html and php tags
Basic introduction to html and php tagsBasic introduction to html and php tags
Basic introduction to html and php tagsKailash Kumar
 
SEO training-presentation
SEO training-presentationSEO training-presentation
SEO training-presentationmanish ray
 
Introduction to Joomla
Introduction to JoomlaIntroduction to Joomla
Introduction to JoomlaAsif Islam
 

What's hot (20)

Best SEO Resume
Best SEO ResumeBest SEO Resume
Best SEO Resume
 
Presentazione tesi di laurea
Presentazione tesi di laureaPresentazione tesi di laurea
Presentazione tesi di laurea
 
厚生市集行銷案例分享
厚生市集行銷案例分享厚生市集行銷案例分享
厚生市集行銷案例分享
 
Bộ đề thực hành thi nghề tin học THPT Yên Hòa
Bộ đề thực hành thi nghề tin học THPT Yên HòaBộ đề thực hành thi nghề tin học THPT Yên Hòa
Bộ đề thực hành thi nghề tin học THPT Yên Hòa
 
Hướng dẫn sử dụng share point 2010
Hướng dẫn sử dụng share point 2010Hướng dẫn sử dụng share point 2010
Hướng dẫn sử dụng share point 2010
 
DSL, Page Object and Selenium – a way to reliable functional tests
DSL, Page Object and Selenium – a way to reliable functional testsDSL, Page Object and Selenium – a way to reliable functional tests
DSL, Page Object and Selenium – a way to reliable functional tests
 
Tailieu.vncty.com huong dan nhap mon html
Tailieu.vncty.com   huong dan nhap mon htmlTailieu.vncty.com   huong dan nhap mon html
Tailieu.vncty.com huong dan nhap mon html
 
Seo goals & objectives 2 quarter 2012
Seo goals & objectives 2 quarter 2012Seo goals & objectives 2 quarter 2012
Seo goals & objectives 2 quarter 2012
 
Sample SEO website audit report
Sample SEO website audit reportSample SEO website audit report
Sample SEO website audit report
 
Bài 1: SharePoint 2010 và xây dựng giải pháp cho SharePoint 2010
Bài 1: SharePoint 2010 và xây dựng giải pháp cho SharePoint 2010Bài 1: SharePoint 2010 và xây dựng giải pháp cho SharePoint 2010
Bài 1: SharePoint 2010 và xây dựng giải pháp cho SharePoint 2010
 
SEO Website Analysis - example report
SEO Website Analysis - example reportSEO Website Analysis - example report
SEO Website Analysis - example report
 
14 Types of Backlinks
14 Types of Backlinks  14 Types of Backlinks
14 Types of Backlinks
 
Presentation php
Presentation phpPresentation php
Presentation php
 
XML Sitemap and Robots.TXT Guide for SEO Beginners
XML Sitemap and Robots.TXT Guide for SEO BeginnersXML Sitemap and Robots.TXT Guide for SEO Beginners
XML Sitemap and Robots.TXT Guide for SEO Beginners
 
SEO Audit Example & Website Review
SEO Audit Example & Website ReviewSEO Audit Example & Website Review
SEO Audit Example & Website Review
 
Basic introduction to html and php tags
Basic introduction to html and php tagsBasic introduction to html and php tags
Basic introduction to html and php tags
 
SEO training-presentation
SEO training-presentationSEO training-presentation
SEO training-presentation
 
Prezi
PreziPrezi
Prezi
 
Apresentação SEO
Apresentação SEOApresentação SEO
Apresentação SEO
 
Introduction to Joomla
Introduction to JoomlaIntroduction to Joomla
Introduction to Joomla
 

Similar to CSS Bloat!

Sencha Touch beta — Amazing Mobile Web Apps with HTML5, CSS3 & JavaScript
Sencha Touch beta — Amazing Mobile Web Apps with HTML5, CSS3 & JavaScriptSencha Touch beta — Amazing Mobile Web Apps with HTML5, CSS3 & JavaScript
Sencha Touch beta — Amazing Mobile Web Apps with HTML5, CSS3 & JavaScriptDavid Kaneda
 
"Introduction Open Graph and Facebook Platform" - Facebook Developer Garage ...
"Introduction Open Graph and Facebook Platform" -  Facebook Developer Garage ..."Introduction Open Graph and Facebook Platform" -  Facebook Developer Garage ...
"Introduction Open Graph and Facebook Platform" - Facebook Developer Garage ...Vijay Rayapati
 
WordPress Front End Optimizations
WordPress Front End OptimizationsWordPress Front End Optimizations
WordPress Front End OptimizationsScott Taylor
 
Advanced android
Advanced androidAdvanced android
Advanced androiddonnfelker
 
Dr. Strangelove: or How I learned to love HTML, CSS, and Javascript
Dr. Strangelove: or How I learned to love HTML, CSS, and JavascriptDr. Strangelove: or How I learned to love HTML, CSS, and Javascript
Dr. Strangelove: or How I learned to love HTML, CSS, and JavascriptRobotDeathSquad
 
BDD and Cucumber at barcampGZ
BDD and Cucumber at barcampGZBDD and Cucumber at barcampGZ
BDD and Cucumber at barcampGZleondu
 
IE9 для разработчиков
IE9 для разработчиковIE9 для разработчиков
IE9 для разработчиковYuriy Artyukh
 
In depth with html5 java2days 2010
In depth with html5 java2days 2010In depth with html5 java2days 2010
In depth with html5 java2days 2010Mystic Coders, LLC
 
Html5/CSS3 in shanghai 2010
Html5/CSS3 in shanghai 2010Html5/CSS3 in shanghai 2010
Html5/CSS3 in shanghai 2010Zi Bin Cheah
 
Introducing Django-Servee
Introducing Django-ServeeIntroducing Django-Servee
Introducing Django-Serveeissackelly
 
Snowflake in music
Snowflake in musicSnowflake in music
Snowflake in musicErik Duval
 
Building Distributed JavaScript Widgets with jQuery
Building Distributed JavaScript Widgets with jQueryBuilding Distributed JavaScript Widgets with jQuery
Building Distributed JavaScript Widgets with jQuerybenvinegar
 
Progressive Advancement, by way of progressive enhancement
Progressive Advancement, by way of progressive enhancementProgressive Advancement, by way of progressive enhancement
Progressive Advancement, by way of progressive enhancementPaul Irish
 
Persistence Smoothie: Blending SQL and NoSQL (RubyNation Edition)
Persistence  Smoothie: Blending SQL and NoSQL (RubyNation Edition)Persistence  Smoothie: Blending SQL and NoSQL (RubyNation Edition)
Persistence Smoothie: Blending SQL and NoSQL (RubyNation Edition)Michael Bleigh
 
OvertheAir 2010 html5 impact on application programming
OvertheAir 2010 html5 impact on application programmingOvertheAir 2010 html5 impact on application programming
OvertheAir 2010 html5 impact on application programmingTor Björn Minde
 
HTML5 impact on application programming
HTML5 impact on application programmingHTML5 impact on application programming
HTML5 impact on application programmingEricsson Labs
 
Pony Pwning Djangocon 2010
Pony Pwning Djangocon 2010Pony Pwning Djangocon 2010
Pony Pwning Djangocon 2010Adam Baldwin
 
DjangoCon 2009 Keynote
DjangoCon 2009 KeynoteDjangoCon 2009 Keynote
DjangoCon 2009 KeynoteTed Leung
 
"Designing School 2.0 - Inspired by Agile Learners" - Christian Long keynote ...
"Designing School 2.0 - Inspired by Agile Learners" - Christian Long keynote ..."Designing School 2.0 - Inspired by Agile Learners" - Christian Long keynote ...
"Designing School 2.0 - Inspired by Agile Learners" - Christian Long keynote ...Christian Long
 
Web Development With Ruby - From Simple To Complex
Web Development With Ruby - From Simple To ComplexWeb Development With Ruby - From Simple To Complex
Web Development With Ruby - From Simple To ComplexBrian Hogan
 

Similar to CSS Bloat! (20)

Sencha Touch beta — Amazing Mobile Web Apps with HTML5, CSS3 & JavaScript
Sencha Touch beta — Amazing Mobile Web Apps with HTML5, CSS3 & JavaScriptSencha Touch beta — Amazing Mobile Web Apps with HTML5, CSS3 & JavaScript
Sencha Touch beta — Amazing Mobile Web Apps with HTML5, CSS3 & JavaScript
 
"Introduction Open Graph and Facebook Platform" - Facebook Developer Garage ...
"Introduction Open Graph and Facebook Platform" -  Facebook Developer Garage ..."Introduction Open Graph and Facebook Platform" -  Facebook Developer Garage ...
"Introduction Open Graph and Facebook Platform" - Facebook Developer Garage ...
 
WordPress Front End Optimizations
WordPress Front End OptimizationsWordPress Front End Optimizations
WordPress Front End Optimizations
 
Advanced android
Advanced androidAdvanced android
Advanced android
 
Dr. Strangelove: or How I learned to love HTML, CSS, and Javascript
Dr. Strangelove: or How I learned to love HTML, CSS, and JavascriptDr. Strangelove: or How I learned to love HTML, CSS, and Javascript
Dr. Strangelove: or How I learned to love HTML, CSS, and Javascript
 
BDD and Cucumber at barcampGZ
BDD and Cucumber at barcampGZBDD and Cucumber at barcampGZ
BDD and Cucumber at barcampGZ
 
IE9 для разработчиков
IE9 для разработчиковIE9 для разработчиков
IE9 для разработчиков
 
In depth with html5 java2days 2010
In depth with html5 java2days 2010In depth with html5 java2days 2010
In depth with html5 java2days 2010
 
Html5/CSS3 in shanghai 2010
Html5/CSS3 in shanghai 2010Html5/CSS3 in shanghai 2010
Html5/CSS3 in shanghai 2010
 
Introducing Django-Servee
Introducing Django-ServeeIntroducing Django-Servee
Introducing Django-Servee
 
Snowflake in music
Snowflake in musicSnowflake in music
Snowflake in music
 
Building Distributed JavaScript Widgets with jQuery
Building Distributed JavaScript Widgets with jQueryBuilding Distributed JavaScript Widgets with jQuery
Building Distributed JavaScript Widgets with jQuery
 
Progressive Advancement, by way of progressive enhancement
Progressive Advancement, by way of progressive enhancementProgressive Advancement, by way of progressive enhancement
Progressive Advancement, by way of progressive enhancement
 
Persistence Smoothie: Blending SQL and NoSQL (RubyNation Edition)
Persistence  Smoothie: Blending SQL and NoSQL (RubyNation Edition)Persistence  Smoothie: Blending SQL and NoSQL (RubyNation Edition)
Persistence Smoothie: Blending SQL and NoSQL (RubyNation Edition)
 
OvertheAir 2010 html5 impact on application programming
OvertheAir 2010 html5 impact on application programmingOvertheAir 2010 html5 impact on application programming
OvertheAir 2010 html5 impact on application programming
 
HTML5 impact on application programming
HTML5 impact on application programmingHTML5 impact on application programming
HTML5 impact on application programming
 
Pony Pwning Djangocon 2010
Pony Pwning Djangocon 2010Pony Pwning Djangocon 2010
Pony Pwning Djangocon 2010
 
DjangoCon 2009 Keynote
DjangoCon 2009 KeynoteDjangoCon 2009 Keynote
DjangoCon 2009 Keynote
 
"Designing School 2.0 - Inspired by Agile Learners" - Christian Long keynote ...
"Designing School 2.0 - Inspired by Agile Learners" - Christian Long keynote ..."Designing School 2.0 - Inspired by Agile Learners" - Christian Long keynote ...
"Designing School 2.0 - Inspired by Agile Learners" - Christian Long keynote ...
 
Web Development With Ruby - From Simple To Complex
Web Development With Ruby - From Simple To ComplexWeb Development With Ruby - From Simple To Complex
Web Development With Ruby - From Simple To Complex
 

More from Nicole Sullivan

Building the Media Block in ReactJS
Building the Media Block in ReactJS Building the Media Block in ReactJS
Building the Media Block in ReactJS Nicole Sullivan
 
Creating Living Style Guides to Improve Performance
Creating Living Style Guides to Improve PerformanceCreating Living Style Guides to Improve Performance
Creating Living Style Guides to Improve PerformanceNicole Sullivan
 
Our Best Practices Are Killing Us
Our Best Practices Are Killing UsOur Best Practices Are Killing Us
Our Best Practices Are Killing UsNicole Sullivan
 
5 Mistakes of Massive CSS
5 Mistakes of Massive CSS5 Mistakes of Massive CSS
5 Mistakes of Massive CSSNicole Sullivan
 
The Cascade, Grids, Headings, and Selectors from an OOCSS Perspective, Ajax ...
The Cascade, Grids, Headings, and Selectors from an OOCSS Perspective,  Ajax ...The Cascade, Grids, Headings, and Selectors from an OOCSS Perspective,  Ajax ...
The Cascade, Grids, Headings, and Selectors from an OOCSS Perspective, Ajax ...Nicole Sullivan
 
The Fast And The Fabulous
The Fast And The FabulousThe Fast And The Fabulous
The Fast And The FabulousNicole Sullivan
 
What is Object Oriented CSS?
What is Object Oriented CSS?What is Object Oriented CSS?
What is Object Oriented CSS?Nicole Sullivan
 
Pourquoi la performance?
Pourquoi la performance?Pourquoi la performance?
Pourquoi la performance?Nicole Sullivan
 
7 Habits of Exceptional Performance
7 Habits of Exceptional Performance7 Habits of Exceptional Performance
7 Habits of Exceptional PerformanceNicole Sullivan
 

More from Nicole Sullivan (17)

Building the Media Block in ReactJS
Building the Media Block in ReactJS Building the Media Block in ReactJS
Building the Media Block in ReactJS
 
Why are you here?
Why are you here?Why are you here?
Why are you here?
 
Creating Living Style Guides to Improve Performance
Creating Living Style Guides to Improve PerformanceCreating Living Style Guides to Improve Performance
Creating Living Style Guides to Improve Performance
 
Don't feed the trolls
Don't feed the trollsDon't feed the trolls
Don't feed the trolls
 
CSS Power Tools
CSS Power ToolsCSS Power Tools
CSS Power Tools
 
Our Best Practices Are Killing Us
Our Best Practices Are Killing UsOur Best Practices Are Killing Us
Our Best Practices Are Killing Us
 
5 Mistakes of Massive CSS
5 Mistakes of Massive CSS5 Mistakes of Massive CSS
5 Mistakes of Massive CSS
 
CSS Wish List @JSConf
CSS Wish List @JSConfCSS Wish List @JSConf
CSS Wish List @JSConf
 
The Cascade, Grids, Headings, and Selectors from an OOCSS Perspective, Ajax ...
The Cascade, Grids, Headings, and Selectors from an OOCSS Perspective,  Ajax ...The Cascade, Grids, Headings, and Selectors from an OOCSS Perspective,  Ajax ...
The Cascade, Grids, Headings, and Selectors from an OOCSS Perspective, Ajax ...
 
Taming CSS Selectors
Taming CSS SelectorsTaming CSS Selectors
Taming CSS Selectors
 
The Fast And The Fabulous
The Fast And The FabulousThe Fast And The Fabulous
The Fast And The Fabulous
 
What is Object Oriented CSS?
What is Object Oriented CSS?What is Object Oriented CSS?
What is Object Oriented CSS?
 
Object Oriented CSS
Object Oriented CSSObject Oriented CSS
Object Oriented CSS
 
Pourquoi la performance?
Pourquoi la performance?Pourquoi la performance?
Pourquoi la performance?
 
Design Fast Websites
Design Fast WebsitesDesign Fast Websites
Design Fast Websites
 
7 Habits of Exceptional Performance
7 Habits of Exceptional Performance7 Habits of Exceptional Performance
7 Habits of Exceptional Performance
 
After YSlow "A"
After YSlow "A"After YSlow "A"
After YSlow "A"
 

CSS Bloat!

  • 1. CSS BLOAT! with Nicole Sullivan Friday, September 10, 2010
  • 2. TWEET! @stubbornella Friday, September 10, 2010
  • 3. WHY OPTIMIZE CSS? • It blocks progressive rendering test: http://www.phpied.com/files/css-loading/table.php • It’s verbose (property value pairs cannot be minified like JS) text-decoration: underline != td: u Friday, September 10, 2010
  • 4. TOP 1000 STUDY 1. Grab top Alexa sites 2. Start Fiddler 3. Load each site 4. Export from Fiddler Friday, September 10, 2010
  • 5. <?php $file = file('alexa.txt'); foreach ($file as $url) { launch($url); } function launch($url) { try { $ie = new COM("InternetExplorer.Application"); $ie->Visible = true; $ie->Navigate2($url); while ($ie->ReadyState != 4) sleep(1); $ie->Quit(); } catch (Exception $e) {} } ?> Friday, September 10, 2010
  • 6. 42% DON’T GZIP CSS Friday, September 10, 2010
  • 7. 44% HAVE MORE THAN 2 CSS FILES 56% 44% Friday, September 10, 2010
  • 8. 56% SERVE CSS WITH COOKIES Friday, September 10, 2010
  • 9. 62% DON’T MINIFY would get more than 10% savings from YUI compressor Friday, September 10, 2010
  • 10. 21% HAVE >100K OF CSS 21% 11% 11% 44% 24% Friday, September 10, 2010
  • 11. HASTE TRACE-BASED PACKAGING homepage homepage Date CSS files CSS weight files weight Nov 2008 487 1.7MB 24 69KB May 2009 706 1.9MB 15 64KB http://velocityconference.blip.tv/file/2293221/ David Wei & Changhao Jiang Friday, September 10, 2010
  • 12. KUDZU Was introduced to the United States between 1935 and 1950 by the Soil Conservation Service to prevent soil erosion. Friday, September 10, 2010
  • 14. “OBJECT ORIENTED CSS SOUNDS GREAT, BUT WE HAVE A GIANT MESS!” how do we get from here to there? Friday, September 10, 2010
  • 15. FACEBOOK DECIDED TO GO ON A DIET The CSS was one piece of the puzzle Friday, September 10, 2010
  • 16. Jason Sobel - Perf Manager Fu MANY PIECES Nan Gao Kyle Delong - PHP David Wei & Changhao Jiang BigPipe Marcel Laverdet - Tom Occhino - JS XHP Makinde Shaun McIntyre - Adeagbo - JS Automated Spriting Friday, September 10, 2010
  • 17. THEY REDUCED THEIR RESPONSE TIME BY HALF in only six months Friday, September 10, 2010
  • 18. WHAT IS OBJECT ORIENTED CSS? A philosophy? A framework? A tool? Friday, September 10, 2010
  • 19. MORE LIKE AN EVOLUTION OF THE LANGUAGE it makes CSS more powerful Friday, September 10, 2010
  • 20. HOW IS IT DIFFERENT? ul{...} ul li{...} ul li a{...} Friday, September 10, 2010
  • 21. HOW IS IT DIFFERENT? ul{...} ul li{...} ul li a{...} Until now, we focused all our effort here Friday, September 10, 2010
  • 22. HOW IS IT DIFFERENT? ul{...} ul li{...} ul li a{...} But, the architecture lives here Friday, September 10, 2010
  • 23. MUCH LESS CODE easier to work with newbies Friday, September 10, 2010
  • 24. GRIDS • 574 bytes • 14 lines of code • Percentage widths adapt to different page sizes • Includes halfs, thirds, fourths, and fifths • No gutters • Infinite nesting and stacking Friday, September 10, 2010
  • 25. GRANULARITY FAIL + STALE RULES + UNPREDICTABILITY + DUPLICATION + SPECIFICITY WARS = MASSIVE CSS Friday, September 10, 2010
  • 26. 5 Text GRANULARITY FAIL the CSS objects shouldn’t match the PHP objects Friday, September 10, 2010
  • 32. WE WANT TO DO THE SAME THING WITH CSS Friday, September 10, 2010
  • 33. CREATE THE BUILDING BLOCKS Friday, September 10, 2010
  • 34. MOST SITES GET THE GRANULARITY WRONG and their architecture is set up to fail Friday, September 10, 2010
  • 35. HOW? FIRST, A VISUAL INVENTORY Friday, September 10, 2010
  • 36. TAKE A PHP OBJECT Friday, September 10, 2010
  • 37. BREAK IT DOWN Friday, September 10, 2010
  • 38. 7 SMALLER OBJECTS Friday, September 10, 2010
  • 40. HEADINGS Heading - 16px bold #3B5998 Heading - 16px normal #333333 Heading - 15px bold #3B5998 • 12px headings eliminated Heading - 15px normal #333333 Heading - 14px bold #3B5998 • Blue only for links Heading - 14px normal #333333 Heading - 13px bold #3B5998 • Bold for all titles Heading - 13px normal #333333 • Chad Little went through Heading - 11px bold #3B5998 the entire site eliminating Heading - 11px normal #333333 duplicates. Friday, September 10, 2010
  • 41. IT’S ALL ABOUT PATTERN MATCHING but you have to take a step back Friday, September 10, 2010
  • 42. PHP OBJECTS != CSS OBJECTS you will be tempted, beware! Friday, September 10, 2010
  • 43. 4 Text STALE RULES CSS gets crufty Friday, September 10, 2010
  • 44. STALE IS TWO THINGS ❖ Truly stale - rules that are no longer used on the site ❖ Rules used on subsequent PV or activated on user action Friday, September 10, 2010
  • 45. WHAT KIND DO YOU HAVE? Friday, September 10, 2010
  • 46. WHAT KIND DO YOU HAVE? ❖ Try dust-me selectors Friday, September 10, 2010
  • 47. WHAT KIND DO YOU HAVE? ❖ Try dust-me selectors ❖ Track them over time - ‣ changes are more important than an absolute number Friday, September 10, 2010
  • 48. 3 Text UNPREDICTABILITY Make each object predictable and location independent Friday, September 10, 2010
  • 51. A Heading should not become a Heading in another part of the page. Friday, September 10, 2010
  • 52. AVOID EXAMPLE #weatherModule h3{color:red;} #tabs h3{color:blue} ❖ Global color undefined for h3, so it will be ‣ unstyled in new modules, ‣ developers forced to write more CSS for the same style Friday, September 10, 2010
  • 53. HOW DO YOU TEST FOR UNPREDICTABLE CODE? #foo h3{...} #bar h3{...} #baz h3{...} grep h[1-6] Friday, September 10, 2010
  • 54. h1-h6 How many? You need site-wide headings Friday, September 10, 2010
  • 55. 511 declarations setting styles for h1-h6 56% >10 9% >100 Friday, September 10, 2010
  • 56. HEADINGS BEFORE 958 declarations h1-h6 Facebook Friday, September 10, 2010
  • 57. HEADINGS AFTER: 25 Chad Little - Facebook Friday, September 10, 2010
  • 58. 2 Text SPECIFICITY WARS lobbing specificity grenades over the cube wall Friday, September 10, 2010
  • 59. SPECIFICITY SCREWS UP THE CASCADE and the cascade kind of rocks, so how do we use the good parts? Friday, September 10, 2010
  • 61. .mod .hd{...} .ie .mod .hd{...} .weatherMod .hd {...} USE HACKS SPARINGLY And don’t let them change your specificity Friday, September 10, 2010
  • 62. .mod .hd{...} X .ie .mod .hd{...} .weatherMod .hd {...} USE HACKS SPARINGLY And don’t let them change your specificity .mod .hd{color: red; _zoom:1;} .weatherMod .hd{...} Friday, September 10, 2010
  • 63. #navigation{...} #header{...} AVOID STYLING IDS IDs impact specificity and can’t be reused IDs are for JS Friday, September 10, 2010
  • 64. X #navigation{...} #header{...} AVOID STYLING IDS IDs impact specificity and can’t be reused IDs are for JS Friday, September 10, 2010
  • 65. .nav {color: red !important;} AVOID !IMPORTANT except on leaf nodes Friday, September 10, 2010
  • 66. .nav {color: red !important;} X AVOID !IMPORTANT except on leaf nodes Friday, September 10, 2010
  • 67. !IMPORTANT 518 declarations using important 12% have greater than 50 Friday, September 10, 2010
  • 68. div.error{...} STYLE CLASSES rather than elements Friday, September 10, 2010
  • 69. X div.error{...} STYLE CLASSES rather than elements .error{ most of the code goes here } Friday, September 10, 2010
  • 70. X div.error{...} STYLE CLASSES rather than elements .error{ most of the code goes here } div.error{ } p.error{ exceptions only } em.error{ } Friday, September 10, 2010
  • 71. html body .myModule div .hd{...} .myModule2 .hd {...} GIVE RULES THE SAME STRENGTH Use cascade order to overwrite previous rules Friday, September 10, 2010
  • 72. X html body .myModule div .hd{...} .myModule2 .hd {...} GIVE RULES THE SAME STRENGTH Use cascade order to overwrite previous rules .myModule .hd{...} .myModule2 .hd{...} Friday, September 10, 2010
  • 73. 1 Text DUPLICATION CSS kudzu on steroids Friday, September 10, 2010
  • 74. GREP IS YOUR FRIEND look at the stylesheets globally rather than per page Friday, September 10, 2010
  • 75. margin too many? You need reset.css Friday, September 10, 2010
  • 76. 518 declarations reset margin to zero 64% > 10 14% > 100 Friday, September 10, 2010
  • 77. float too many? You need grids Friday, September 10, 2010
  • 78. 733 declarations floated elements 56% > 10 13% > 100 Friday, September 10, 2010
  • 79. font-size headings may be disguised in class names Friday, September 10, 2010
  • 80. FONT-SIZE 889 declarations changed the font-size 78% >10 23% >100 Friday, September 10, 2010
  • 81. HOW DID FACEBOOK REDUCE DUPLICATION? let’s look at an example Friday, September 10, 2010
  • 82. MEDIA BLOCK EXAMPLE Friday, September 10, 2010
  • 83. ALL OF THESE ARE THE SAME OBJECT Friday, September 10, 2010
  • 84. WHAT DO WE KNOW? ❖ Can be nested ❖ Optional right button ❖ Must clearfix Friday, September 10, 2010
  • 85. WHAT DON’T WE KNOW? ❖ Image width and decoration vary ❖ Right content is unknown ❖ Width unknown Friday, September 10, 2010
  • 86. SEPARATE STRUCTURE FROM CHROME Friday, September 10, 2010
  • 87. A FEW LINES OF HTML... <div class="media attribution"> <a href="http://twitter.com/stubbornella" class="img"> <img src="mini.jpg" alt="Stubbornella" /> </a> <div class="bd">@Stubbornella 14 minutes ago</div> </div> Friday, September 10, 2010
  • 88. 4 LINES OF CSS... _ Friday, September 10, 2010
  • 90. HTML SIZE reduced by 50% by Stefan Parker Friday, September 10, 2010
  • 91. “Due to these efforts, we cut our average CSS bytes per page by 19% (after gzip) and HTML bytes per page by 44% (before gzip).” Jason Sobel http://www.facebook.com/note.php?note_id=307069903919 Friday, September 10, 2010
  • 92. LET’S KEEP TALKING... www.stubbornella.org @stubbornella OOCSS Project: http://github.com/stubbornella/oocss/ Friday, September 10, 2010