• Save
Our Best Practices Are Killing Us
Upcoming SlideShare
Loading in...5
×
 

Our Best Practices Are Killing Us

on

  • 129,414 views

We keep thinking we can write better CSS if we just try harder, that the next site will be clean and stay that way. This presentation shows that in fact, messy CSS is the direct result of our worst ...

We keep thinking we can write better CSS if we just try harder, that the next site will be clean and stay that way. This presentation shows that in fact, messy CSS is the direct result of our worst best-practices. We need to reexamine those assumptions with an eye to practicality and scalability as well as accessibility, standards, and fabulous design.

Statistics

Views

Total Views
129,414
Views on SlideShare
91,487
Embed Views
37,927

Actions

Likes
307
Downloads
0
Comments
23

131 Embeds 37,927

http://www.stubbornella.org 24615
http://www.vanseodesign.com 10374
http://dzign.us 567
http://lanyrd.com 248
http://www.westworld.be 237
http://heikezhi.com 199
http://craftingcode.net 115
http://paper.li 110
http://lirioblanco6.wordpress.com 92
https://twitter.com 83
http://front-end-tips.tumblr.com 73
http://www.craftingcode.net 63
http://notebook.andrewabogado.com 63
http://slawek1963.tumblr.com 54
http://www.redditmedia.com 52
http://feeds2.feedburner.com 50
http://dancingwithyourshadow.blogspot.com 50
http://www.slideshare.net 47
http://localhost 46
http://rajanikaruturi.info 42
url_unknown 42
http://twitter.com 41
http://translate.googleusercontent.com 36
http://feedthefox.net 35
http://posterous.com 33
http://mussegam.posterous.com 32
http://www.scoop.it 31
http://shoshi.tumblr.com 27
http://scriptogr.am 24
http://a0.twimg.com 24
http://fsainz.com 21
http://ammasajan.blogspot.in 21
http://www.newsblur.com 20
http://cloud.feedly.com 16
http://wiki.hj.com 15
http://ammasajan.blogspot.com 13
http://newsblur.com 12
http://kremdela.tumblr.com 12
http://ammasajan.blogspot.sg 12
https://si0.twimg.com 10
http://kontrib.it 10
https://p.yammer.com 9
http://www.twylah.com 9
http://us-w1.rockmelt.com 9
http://feedly.com 8
http://tyseo.blogspot.com 8
http://localhost:8888 7
http://webcache.googleusercontent.com 7
http://feeds.feedburner.com 7
http://safe.tumblr.com 7
More...

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel

110 of 23 Post a comment

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
  • Excellent and very helpful. Great Slide.
    Are you sure you want to
    Your message goes here
    Processing…
  • Nice Thank you!
    Are you sure you want to
    Your message goes here
    Processing…
  • good!
    Are you sure you want to
    Your message goes here
    Processing…
  • great
    Are you sure you want to
    Your message goes here
    Processing…
  • great........
    Are you sure you want to
    Your message goes here
    Processing…

110 of 23

Post Comment
Edit your comment

Our Best Practices Are Killing Us Our Best Practices Are Killing Us Presentation Transcript

  • OUR BEST PRACTICES ARE KILLING US photo by Joshua Stearns Nicole SullivanWednesday, March 30, 2011
  • WHAT WE WILL COVER: ❖ We have a problem ❖ CSS is not to blame ❖ Tools won’t solve it, but they can helpWednesday, March 30, 2011
  • YUMMY DATA FROM FACEBOOKWednesday, March 30, 2011
  • FACEBOOK BLUE 261Wednesday, March 30, 2011
  • UNIQUE COLORS 548 unique hex values FacebookWednesday, March 30, 2011
  • COLORS 6498 color declarations FacebookWednesday, March 30, 2011
  • YUMMY DATA FROM SALESFORCEWednesday, March 30, 2011
  • paddingWednesday, March 30, 2011
  • 3,668 padding declarationsWednesday, March 30, 2011
  • ARE NICOLE’S CLIENTS EXCEPTIONALLY MESSY?Wednesday, March 30, 2011
  • ALEXA TOP 1000 STUDY with Stoyan StefanovWednesday, March 30, 2011
  • h1-h6Wednesday, March 30, 2011
  • 511 declarations setting styles for h1-h6 56% >10 9% >100Wednesday, March 30, 2011
  • !importantWednesday, March 30, 2011
  • !IMPORTANT 518 declarations using important 12% have greater than 50Wednesday, March 30, 2011
  • floatWednesday, March 30, 2011
  • 733 declarations floated elements 56% > 10 13% > 100Wednesday, March 30, 2011
  • font-sizeWednesday, March 30, 2011
  • FONT-SIZE 889 declarations changed the font-size 78% >10 23% >100Wednesday, March 30, 2011
  • DOES THIS APPLY TO YOU? Do your websites have the same issues? WorkshopWednesday, March 30, 2011
  • SO, DUPLICATION IS A PROBLEM AT: ❖ Facebook ❖ Salesforce ❖ w3c ❖ Box.net ❖ the Alexa Top 1000 sites ❖ Government websites ❖ Small and large businessesWednesday, March 30, 2011
  • INSANITY: doing the same thing over and over and expecting different resultsWednesday, March 30, 2011
  • STOP POINTING FINGERS the truth is, we all have this problem http://www.flickr.com/photos/illumiquest/2749137895/sizes/l/in/photostream/Wednesday, March 30, 2011
  • “JAVASCRIPT DOESN’T SUCK You’re just doing it wrong.” -- Douglas CrockfordWednesday, March 30, 2011
  • CSS “JAVASCRIPT DOESN’T SUCK You’re just doing it wrong.” -- Douglas CrockfordWednesday, March 30, 2011
  • ABOUT CSS CSS (much like JS) will let you do anything (no matter how stupid) wheeee!Wednesday, March 30, 2011
  • THE POINT IS... That we don’t have to do stupid things, just because we can.Wednesday, March 30, 2011
  • SO, WHAT ARE THE STUPID THINGS? Best Practice MythsWednesday, March 30, 2011
  • THREE BEST PRACTICE MYTHS: ❖ Don’t add any extra elements ❖ Don’t add classes (Classitis! Ahhh!) ❖ Use descendent selectors exclusivelyWednesday, March 30, 2011
  • WHAT HAPPENS NEXT? SPECIFICITY WARSWednesday, March 30, 2011
  • SPECIFICITY - THE SIMPLE VERSIONWednesday, March 30, 2011
  • SPECIFICITY - THE SIMPLE VERSION elements & pseudo elementsWednesday, March 30, 2011
  • SPECIFICITY - THE SIMPLE VERSION classes elements & pseudo classes & pseudo elements & attributesWednesday, March 30, 2011
  • SPECIFICITY - THE SIMPLE VERSION IDs classes elements & pseudo classes & pseudo elements & attributesWednesday, March 30, 2011
  • SPECIFICITY - THE SIMPLE VERSION inline IDs classes elements & pseudo classes & pseudo elements & attributesWednesday, March 30, 2011
  • SPECIFICITY - THE SIMPLE VERSION #sidebar ul li a.myclass:hover{} inline IDs classes elements & pseudo classes & pseudo elements & attributesWednesday, March 30, 2011
  • SPECIFICITY - THE SIMPLE VERSION #sidebar ul li a.myclass:hover{} inline IDs classes elements 3 & pseudo classes & pseudo elements & attributesWednesday, March 30, 2011
  • SPECIFICITY - THE SIMPLE VERSION #sidebar ul li a.myclass:hover{} inline IDs classes elements 2 3 & pseudo classes & pseudo elements & attributesWednesday, March 30, 2011
  • SPECIFICITY - THE SIMPLE VERSION #sidebar ul li a.myclass:hover{} inline IDs classes elements 1 2 3 & pseudo classes & pseudo elements & attributesWednesday, March 30, 2011
  • SPECIFICITY - THE SIMPLE VERSION #sidebar ul li a.myclass:hover{} inline IDs classes elements 0 1 2 3 & pseudo classes & pseudo elements & attributesWednesday, March 30, 2011
  • SPECIFICITY - THE SIMPLE VERSION #sidebar ul li a.myclass:hover{} inline IDs classes elements 0 1 2 3 & pseudo classes & pseudo elements & attributesWednesday, March 30, 2011
  • UNIVERSAL SELECTOR * {} inline IDs classes elements & pseudo classes & pseudo elements & attributesWednesday, March 30, 2011
  • UNIVERSAL SELECTOR * {} inline IDs classes elements 0 & pseudo classes & pseudo elements & attributesWednesday, March 30, 2011
  • UNIVERSAL SELECTOR * {} inline IDs classes elements 0 0 & pseudo classes & pseudo elements & attributesWednesday, March 30, 2011
  • UNIVERSAL SELECTOR * {} inline IDs classes elements 0 0 0 & pseudo classes & pseudo elements & attributesWednesday, March 30, 2011
  • UNIVERSAL SELECTOR * {} inline IDs classes elements 0 0 0 0 & pseudo classes & pseudo elements & attributesWednesday, March 30, 2011
  • CONCATENATING SPECIFICITY .item{color: blue;} ul li li li li li li li li li{color: red;} inline IDs classes elements & pseudo classes & pseudo elements & attributesWednesday, March 30, 2011
  • CONCATENATING SPECIFICITY .item{color: blue;} ul li li li li li li li li li{color: red;} inline IDs classes elements 0 & pseudo classes & pseudo elements & attributesWednesday, March 30, 2011
  • CONCATENATING SPECIFICITY .item{color: blue;} ul li li li li li li li li li{color: red;} inline IDs classes elements 1 0 & pseudo classes & pseudo elements & attributesWednesday, March 30, 2011
  • CONCATENATING SPECIFICITY .item{color: blue;} ul li li li li li li li li li{color: red;} inline IDs classes elements 0 1 0 & pseudo classes & pseudo elements & attributesWednesday, March 30, 2011
  • CONCATENATING SPECIFICITY .item{color: blue;} ul li li li li li li li li li{color: red;} inline IDs classes elements 0 0 1 0 & pseudo classes & pseudo elements & attributesWednesday, March 30, 2011
  • CONCATENATING SPECIFICITY .item{color: blue;} ul li li li li li li li li li{color: red;} inline IDs classes elements & pseudo classes & pseudo elements & attributesWednesday, March 30, 2011
  • CONCATENATING SPECIFICITY .item{color: blue;} ul li li li li li li li li li{color: red;} inline IDs classes elements 10 & pseudo classes & pseudo elements & attributesWednesday, March 30, 2011
  • CONCATENATING SPECIFICITY .item{color: blue;} ul li li li li li li li li li{color: red;} inline IDs classes elements 0 10 & pseudo classes & pseudo elements & attributesWednesday, March 30, 2011
  • CONCATENATING SPECIFICITY .item{color: blue;} ul li li li li li li li li li{color: red;} inline IDs classes elements 0 0 10 & pseudo classes & pseudo elements & attributesWednesday, March 30, 2011
  • CONCATENATING SPECIFICITY .item{color: blue;} ul li li li li li li li li li{color: red;} inline IDs classes elements 0 0 0 10 & pseudo classes & pseudo elements & attributesWednesday, March 30, 2011
  • CLASS ORDER <p class=”message error”>Borken!</p>Wednesday, March 30, 2011
  • CLASS ORDER The order of the classes makes no difference. <p class=”message error”>Borken!</p>Wednesday, March 30, 2011
  • SITE-WIDE HEADINGS h1{color: #333; font-size: 24px; font-weight: bold} h2{color: #333; font-size: 19px; font-weight: bold} h3{color: #333; font-size: 17px; font-weight: bold} h4{color: #333; font-size: 15px; font-weight: bold} h5{color: #111; font-size: 13px; font-weight: bold} h6{color: #111; font-size: 12px; font-weight: bold} inline IDs classes elements & pseudo classes & pseudo elements & attributesWednesday, March 30, 2011
  • SITE-WIDE HEADINGS h1{color: #333; font-size: 24px; font-weight: bold} h2{color: #333; font-size: 19px; font-weight: bold} h3{color: #333; font-size: 17px; font-weight: bold} h4{color: #333; font-size: 15px; font-weight: bold} h5{color: #111; font-size: 13px; font-weight: bold} h6{color: #111; font-size: 12px; font-weight: bold} inline IDs classes elements 1 & pseudo classes & pseudo elements & attributesWednesday, March 30, 2011
  • SITE-WIDE HEADINGS h1{color: #333; font-size: 24px; font-weight: bold} h2{color: #333; font-size: 19px; font-weight: bold} h3{color: #333; font-size: 17px; font-weight: bold} h4{color: #333; font-size: 15px; font-weight: bold} h5{color: #111; font-size: 13px; font-weight: bold} h6{color: #111; font-size: 12px; font-weight: bold} inline IDs classes elements 0 1 & pseudo classes & pseudo elements & attributesWednesday, March 30, 2011
  • SITE-WIDE HEADINGS h1{color: #333; font-size: 24px; font-weight: bold} h2{color: #333; font-size: 19px; font-weight: bold} h3{color: #333; font-size: 17px; font-weight: bold} h4{color: #333; font-size: 15px; font-weight: bold} h5{color: #111; font-size: 13px; font-weight: bold} h6{color: #111; font-size: 12px; font-weight: bold} inline IDs classes elements 0 0 1 & pseudo classes & pseudo elements & attributesWednesday, March 30, 2011
  • SITE-WIDE HEADINGS h1{color: #333; font-size: 24px; font-weight: bold} h2{color: #333; font-size: 19px; font-weight: bold} h3{color: #333; font-size: 17px; font-weight: bold} h4{color: #333; font-size: 15px; font-weight: bold} h5{color: #111; font-size: 13px; font-weight: bold} h6{color: #111; font-size: 12px; font-weight: bold} inline IDs classes elements 0 0 0 1 & pseudo classes & pseudo elements & attributesWednesday, March 30, 2011
  • #sidebarWednesday, March 30, 2011
  • h3 { color: #797979; font-size: 12px; font-weight: bold; border-bottom: 1px solid #c5c5c5; padding-bottom: 5px; }Wednesday, March 30, 2011
  • HOW DO YOU GET THE H3 TO LOOK DIFFERENT? (but only in the sidebar) (and using the semantically appropriate heading)Wednesday, March 30, 2011
  • #SIDEBAR H3 h1{color: #333; font-size: 24px; font-weight: bold} h2{color: #333; font-size: 19px; font-weight: bold} h3{color: #333; font-size: 17px; font-weight: bold} #sidebar h3 { color: #797979; font-size: 12px;font-weight: bold; border-bottom: 1px solid #c5c5c5; padding-bottom: 5px; } h4{color: #333; font-size: 15px; font-weight: bold} h5{color: #111; font-size: 13px; font-weight: bold} h6{color: #111; font-size: 12px; font-weight: bold}Wednesday, March 30, 2011
  • THEN, YOUR DESIGNER GIVES YOU A NEW MOCK h3 { color: #555; font-size: 13px; font-weight: bold; background-color: #deeef8; padding: 5px; margin: 10px 0; }Wednesday, March 30, 2011
  • ADD IT TO THE STYLESHEET h1{color: #333; font-size: 24px; font-weight: bold} h2{color: #333; font-size: 19px; font-weight: bold} h3{color: #333; font-size: 17px; font-weight: bold} #sidebar h3{ color: #797979; font-size: 12px; font-weight: bold; border-bottom: 1px solid #c5c5c5; padding-bottom: 5px; } #sidebar .account h3{ color: #555; font-size: 13px; font-weight: bold; background-color: #deeef8; padding: 5px; margin: 10px 0; } h4{color: #333; font-size: 15px; font-weight: bold} h5{color: #111; font-size: 13px; font-weight: bold} h6{color: #111; font-size: 12px; font-weight: bold}Wednesday, March 30, 2011
  • WHAT IS HAPPENING WITH THE SPECIFICITY? h3{...} #sidebar h3{...} #sidebar .account h3{...}Wednesday, March 30, 2011
  • WHAT IS HAPPENING WITH THE SPECIFICITY? h3{...} 0 0 0 1 #sidebar h3{...} #sidebar .account h3{...}Wednesday, March 30, 2011
  • WHAT IS HAPPENING WITH THE SPECIFICITY? h3{...} 0 0 0 1 #sidebar h3{...} 0 1 0 1 #sidebar .account h3{...}Wednesday, March 30, 2011
  • WHAT IS HAPPENING WITH THE SPECIFICITY? h3{...} 0 0 0 1 #sidebar h3{...} 0 1 0 1 #sidebar .account h3{...} 0 1 1 1Wednesday, March 30, 2011
  • THE SITE HAS A WEATHER MODULE IN THE SIDEBAR h2 h3 #sidebar .weatherMod h3{ color: #fff; text-transform: uppercase; }Wednesday, March 30, 2011
  • IMAGINE YOU RECEIVED THIS WIREFRAME h3 MORN NOON EVENING NIGHT h3 27° 35° 38° 30°Wednesday, March 30, 2011
  • IMAGINE YOU RECEIVED THIS WIREFRAME h3 MORN NOON EVENING NIGHT h3 27° 35° 38° 30° What if the visual designer decided that fewer users would be interested in the by-hour weather, so those titles should be smaller and not boldWednesday, March 30, 2011
  • NOTICE ANYTHING ABOUT NESTING & SPECIFICITY? h3 MORN NOON EVENING NIGHT h3 27° 35° 38° 30° #sidebar .weatherMod h3{} #sidebar .weatherMod .hourly h3{}Wednesday, March 30, 2011
  • NOTICE ANYTHING ABOUT NESTING & SPECIFICITY? h3 MORN NOON EVENING NIGHT h3 27° 35° 38° 30° #sidebar .weatherMod h3{} 0 1 1 1 #sidebar .weatherMod .hourly h3{}Wednesday, March 30, 2011
  • NOTICE ANYTHING ABOUT NESTING & SPECIFICITY? h3 MORN NOON EVENING NIGHT h3 27° 35° 38° 30° #sidebar .weatherMod h3{} 0 1 1 1 #sidebar .weatherMod .hourly h3{} 0 1 2 1Wednesday, March 30, 2011
  • SIX MONTHS LATER, IT GETS COMPLICATED ❖ Specificity grows over time ❖ Difficult to tell which rules will take precedence ❖ Developers end up coding by firebugWednesday, March 30, 2011
  • WHAT HAPPENS WHEN... there are no more ways to make a rule more specific than the one you are trying to override?Wednesday, March 30, 2011
  • <h3 style=”color: red; font-weight: bold; font-size: 20px;”>My shiny new heading level 3</h3> WHAT HAPPENS WHEN... there are no more ways to make a rule more specific than the one you are trying to override?Wednesday, March 30, 2011
  • <h3 style=”color: red; font-weight: bold; font-size: 20px;”>My shiny new heading level 3</h3> WHAT HAPPENS WHEN... there are no more ways to make a rule more specific than the one you are trying to override? 1 0 0 0Wednesday, March 30, 2011
  • AND THEN ANOTHER DEVELOPER SAYS... “this is gross! we should not be using inline-styles” but, at this point, what choice to they have left?Wednesday, March 30, 2011
  • #sidebar .weatherMod .hourly .tuesday h3{color: blue !important;} YOU MIGHT THINK !IMPORTANT WOULD END the specificity war, not so.Wednesday, March 30, 2011
  • #sidebar .weatherMod .hourly .tuesday h3{color: blue !important;} YOU MIGHT THINK !IMPORTANT WOULD END the specificity war, not so. 0 0 0 0Wednesday, March 30, 2011
  • #sidebar .weatherMod .hourly .tuesday h3{color: blue !important;} YOU MIGHT THINK !IMPORTANT WOULD END the specificity war, not so. 0 0 0 0Wednesday, March 30, 2011
  • #sidebar .weatherMod .hourly .tuesday h3{color: blue !important;} YOU MIGHT THINK !IMPORTANT WOULD END the specificity war, not so. 0 1 3 1 0 0 0 0Wednesday, March 30, 2011
  • HOSTILE CODE ENVIRONMENT ❖ Two layers develop ❖ Specificity grows over time (more and more rules become important). ❖ Even more difficult to tell which rules will take precedence ❖ Developers always code by firebug ❖ Eventually, it becomes impossible to get the look and feel you want.Wednesday, March 30, 2011
  • SPECIFICITY AT IT’S WORST normal IDs Classes ElementsWednesday, March 30, 2011
  • SPECIFICITY AT IT’S WORST inline Inline Styles normal IDs Classes ElementsWednesday, March 30, 2011
  • SPECIFICITY AT IT’S WORST !important IDs Classes Elements inline Inline Styles normal IDs Classes ElementsWednesday, March 30, 2011
  • #sidebar A Normal Heading Level 3Wednesday, March 30, 2011
  • DUPLICATING PROPERTY VALUE PAIRS h1{ margin: 10px 0; color: #333; font-size: 24px; font-weight: bold} h2{ margin: 10px 0; color: #333; font-size: 19px; font-weight: bold} h3{ margin: 5px 0; color: #333; font-size: 17px; font-weight: bold } #sidebar .collaborators h3{ margin: 5px 0; color: #333; font-size: 17px; font-weight: bold } #sidebar h3{color: #797979; font-size: 12px;font-weight: bold; border-bottom: 1px solid #c5c5c5; padding-bottom: 5px;} #sidebar .account h3{color: #555;font-size: 13px;font-weight: bold;background-color: #deeef8;padding: 5px;margin: 10px 0;} #sidebar .weatherMod h3{} #sidebar .weatherMod .hourly h3{} h4{ margin: 5px 0; color: #333; font-size: 15px; font-weight: bold} h5{ margin: 5px 0; color: #111; font-size: 13px; font-weight: bold} h6{ margin: 10px 0; color: #111; font-size: 12px; font-weight: bold}Wednesday, March 30, 2011
  • THREE PROBLEMS ❖ Duplication of property value pairs ❖ Duplication of elements (h3) ❖ Growing SpecificityWednesday, March 30, 2011
  • DUPLICATING ELEMENTS h1{} h2{} h3{} #sidebar .collaborators h3{} #sidebar h3{} #sidebar .account h3{} #sidebar .weatherMod h3{} #sidebar .weatherMod .hourly h3{} h4{} h5{} h6{}Wednesday, March 30, 2011
  • GROWING SPECIFICITY h1{} h2{} h3{} #sidebar .collaborators h3{} #sidebar h3{} #sidebar .account h3{} #sidebar .weatherMod h3{} #sidebar .weatherMod .hourly h3{} h4{} h5{} h6{}Wednesday, March 30, 2011
  • HOW DO WE SOLVE THESE PROBLEMS? Examine our best practice myths rationally ❖ Add non-semantic elements judiciously ❖ Keep specificity as low as possible ❖ Abstract repeating visual patterns ❖ Use specificity to define your architectureWednesday, March 30, 2011
  • MEDIA BLOCK EXAMPLEWednesday, March 30, 2011
  • ALL OF THESE ARE THE SAME OBJECTWednesday, March 30, 2011
  • WHAT DO WE KNOW? ❖ Can be nested ❖ Optional right button ❖ Must clearfixWednesday, March 30, 2011
  • WHAT DON’T WE KNOW? ❖ Image width and decoration vary ❖ Right content is unknown ❖ Width unknownWednesday, March 30, 2011
  • SEPARATE STRUCTURE FROM CHROMEWednesday, March 30, 2011
  • 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>Wednesday, March 30, 2011
  • 4 LINES OF CSS... _Wednesday, March 30, 2011
  • Wednesday, March 30, 2011
  • HTML SIZE reduced by 50% by Stefan ParkerWednesday, March 30, 2011
  • “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=307069903919Wednesday, March 30, 2011
  • Wednesday, March 30, 2011
  • GREAT DEVELOPERS CAN BUILD AMAZING THINGS if we move worst-best practices out of our wayWednesday, March 30, 2011
  • LET’S KEEP TALKING... www.stubbornella.org @stubbornella OOCSS Project: http://github.com/stubbornella/oocss/Wednesday, March 30, 2011