Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
OUR BEST PRACTICES ARE               KILLING US  photo by Joshua Stearns                            Nicole SullivanWednesd...
WHAT WE WILL COVER:    ❖   We have a problem    ❖   CSS is not to blame    ❖   Tools won’t solve it, but they can helpWedn...
YUMMY DATA FROM                          FACEBOOKWednesday, March 30, 2011
FACEBOOK BLUE                             261Wednesday, March 30, 2011
UNIQUE COLORS                             548                               unique hex values                             ...
COLORS                            6498                            color declarations                                      ...
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 5...
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% >100...
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    ❖   th...
INSANITY:                            doing the same thing over and over                              and expecting differe...
STOP POINTING FINGERS                            the truth is, we all have this problem                                  h...
“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, Marc...
ABOUT CSS                            CSS (much like JS) will let                                you do anything           ...
THE POINT               IS...       That we don’t have to do       stupid things, just because                 we can.Wedn...
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 (Classiti...
WHAT HAPPENS NEXT?                 SPECIFICITY WARSWednesday, March 30, 2011
SPECIFICITY - THE SIMPLE                   VERSIONWednesday, March 30, 2011
SPECIFICITY - THE SIMPLE                   VERSION                                elements                               &...
SPECIFICITY - THE SIMPLE                   VERSION                              classes           elements                ...
SPECIFICITY - THE SIMPLE                   VERSION                            IDs     classes           elements          ...
SPECIFICITY - THE SIMPLE                   VERSION             inline         IDs     classes           elements          ...
SPECIFICITY - THE SIMPLE                   VERSION                #sidebar ul li a.myclass:hover{}             inline     ...
SPECIFICITY - THE SIMPLE                   VERSION                #sidebar ul li a.myclass:hover{}             inline     ...
SPECIFICITY - THE SIMPLE                   VERSION                #sidebar ul li a.myclass:hover{}             inline     ...
SPECIFICITY - THE SIMPLE                   VERSION                #sidebar ul li a.myclass:hover{}             inline     ...
SPECIFICITY - THE SIMPLE                   VERSION                #sidebar ul li a.myclass:hover{}             inline     ...
SPECIFICITY - THE SIMPLE                   VERSION                #sidebar ul li a.myclass:hover{}             inline     ...
UNIVERSAL SELECTOR                                  * {}             inline         IDs          classes         elements ...
UNIVERSAL SELECTOR                                  * {}             inline         IDs          classes         elements ...
UNIVERSAL SELECTOR                                  * {}             inline         IDs          classes         elements ...
UNIVERSAL SELECTOR                                  * {}             inline         IDs          classes         elements ...
UNIVERSAL SELECTOR                                  * {}             inline         IDs          classes         elements ...
CONCATENATING                              SPECIFICITY                      .item{color: blue;}                      ul li...
CONCATENATING                              SPECIFICITY                      .item{color: blue;}                      ul li...
CONCATENATING                              SPECIFICITY                      .item{color: blue;}                      ul li...
CONCATENATING                              SPECIFICITY                      .item{color: blue;}                      ul li...
CONCATENATING                              SPECIFICITY                      .item{color: blue;}                      ul li...
CONCATENATING                              SPECIFICITY                      .item{color: blue;}                      ul li...
CONCATENATING                              SPECIFICITY                      .item{color: blue;}                      ul li...
CONCATENATING                              SPECIFICITY                      .item{color: blue;}                      ul li...
CONCATENATING                              SPECIFICITY                      .item{color: blue;}                      ul li...
CONCATENATING                              SPECIFICITY                      .item{color: blue;}                      ul li...
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”>Bor...
SITE-WIDE HEADINGS                     h1{color:   #333;   font-size:   24px;   font-weight:   bold}                     h...
SITE-WIDE HEADINGS                     h1{color:   #333;   font-size:   24px;   font-weight:   bold}                     h...
SITE-WIDE HEADINGS                     h1{color:   #333;   font-size:   24px;   font-weight:   bold}                     h...
SITE-WIDE HEADINGS                     h1{color:   #333;   font-size:   24px;   font-weight:   bold}                     h...
SITE-WIDE HEADINGS                     h1{color:   #333;   font-size:   24px;   font-weight:   bold}                     h...
#sidebarWednesday, March 30, 2011
h3 {                              color: #797979;                              font-size: 12px;                           ...
HOW DO YOU GET THE H3       TO LOOK DIFFERENT?                                   (but only in the sidebar)                ...
#SIDEBAR H3      h1{color: #333; font-size: 24px; font-weight: bold}      h2{color: #333; font-size: 19px; font-weight: bo...
THEN, YOUR DESIGNER      GIVES YOU A NEW MOCK                            h3 {                              color: #555;   ...
ADD IT TO THE STYLESHEET             h1{color: #333; font-size: 24px; font-weight: bold}             h2{color: #333; font-...
WHAT IS HAPPENING WITH       THE SPECIFICITY?      h3{...}      #sidebar h3{...}      #sidebar .account h3{...}Wednesday, ...
WHAT IS HAPPENING WITH       THE SPECIFICITY?      h3{...}                     0   0   0   1      #sidebar h3{...}      #s...
WHAT IS HAPPENING WITH       THE SPECIFICITY?      h3{...}                     0   0   0   1      #sidebar h3{...}        ...
WHAT IS HAPPENING WITH       THE SPECIFICITY?      h3{...}                     0   0   0   1      #sidebar h3{...}        ...
THE SITE HAS A WEATHER         MODULE IN THE SIDEBAR                            h2                                        ...
IMAGINE YOU RECEIVED              THIS WIREFRAME                                                            h3            ...
IMAGINE YOU RECEIVED              THIS WIREFRAME                                                                   h3     ...
NOTICE ANYTHING ABOUT     NESTING & SPECIFICITY?                                                            h3            ...
NOTICE ANYTHING ABOUT     NESTING & SPECIFICITY?                                                                h3        ...
NOTICE ANYTHING ABOUT     NESTING & SPECIFICITY?                                                                h3        ...
SIX MONTHS LATER, IT                   GETS COMPLICATED    ❖   Specificity grows over time    ❖   Difficult to tell which ru...
WHAT HAPPENS WHEN...      there are no more ways to make a rule more specific than the                    one you are tryin...
<h3 style=”color: red; font-weight: bold; font-size: 20px;”>My     shiny new heading level 3</h3>          WHAT HAPPENS WH...
<h3 style=”color: red; font-weight: bold; font-size: 20px;”>My     shiny new heading level 3</h3>          WHAT HAPPENS WH...
AND THEN ANOTHER                     DEVELOPER SAYS...                     “this is gross! we should not be using inline-s...
#sidebar .weatherMod .hourly .tuesday h3{color: blue !important;}          YOU MIGHT THINK       !IMPORTANT WOULD END     ...
#sidebar .weatherMod .hourly .tuesday h3{color: blue !important;}          YOU MIGHT THINK       !IMPORTANT WOULD END     ...
#sidebar .weatherMod .hourly .tuesday h3{color: blue !important;}          YOU MIGHT THINK       !IMPORTANT WOULD END     ...
#sidebar .weatherMod .hourly .tuesday h3{color: blue !important;}          YOU MIGHT THINK       !IMPORTANT WOULD END     ...
HOSTILE CODE                            ENVIRONMENT    ❖   Two layers develop    ❖   Specificity grows over time (more and ...
SPECIFICITY AT IT’S WORST                            normal                                       IDs                     ...
SPECIFICITY AT IT’S WORST                             inline   Inline Styles                            normal            ...
SPECIFICITY AT IT’S WORST                      !important          IDs                                        Classes     ...
#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}...
THREE PROBLEMS    ❖   Duplication of property value pairs    ❖   Duplication of elements (h3)    ❖   Growing SpecificityWed...
DUPLICATING ELEMENTS      h1{}      h2{}      h3{}      #sidebar              .collaborators h3{}      #sidebar           ...
GROWING SPECIFICITY      h1{}      h2{}      h3{}      #sidebar              .collaborators h3{}      #sidebar            ...
HOW DO WE SOLVE THESE          PROBLEMS?                      Examine our best practice myths rationally    ❖   Add non-se...
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            ...
WHAT DON’T WE KNOW?                            ❖ Image width and decoration vary                            ❖ Right conten...
SEPARATE STRUCTURE                       FROM CHROMEWednesday, March 30, 2011
A FEW LINES OF HTML...            <div class="media attribution">              <a href="http://twitter.com/stubbornella" c...
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 pa...
Wednesday, March 30, 2011
GREAT DEVELOPERS CAN          BUILD AMAZING THINGS                        if we move worst-best practices out of our wayWe...
LET’S KEEP TALKING...                                 www.stubbornella.org                                   @stubbornella...
Upcoming SlideShare
Loading in …5
×

FACEBOOK BLUE 261Wednesday, March 30, Our Best Practices Are Killing Us

213,030 views

Published on

FACEBOOK BLUE 261Wednesday, March 30, 2011

Published in: Technology
  • .DOWNLOAD THIS BOOKS INTO AVAILABLE FORMAT ......................................................................................................................... ......................................................................................................................... .DOWNLOAD PDF EBOOK here { https://tinyurl.com/y8nn3gmc } ......................................................................................................................... .DOWNLOAD EPUB Ebook here { https://tinyurl.com/y8nn3gmc } ......................................................................................................................... .DOWNLOAD doc Ebook here { https://tinyurl.com/y8nn3gmc } ......................................................................................................................... .DOWNLOAD PDF EBOOK here { https://tinyurl.com/y8nn3gmc } ......................................................................................................................... .DOWNLOAD EPUB Ebook here { https://tinyurl.com/y8nn3gmc } ......................................................................................................................... .DOWNLOAD doc Ebook here { https://tinyurl.com/y8nn3gmc } ......................................................................................................................... ......................................................................................................................... ......................................................................................................................... .............. Browse by Genre Available eBooks ......................................................................................................................... Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, Cookbooks, Crime, Ebooks, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult,
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Hello! Get Your Professional Job-Winning Resume Here - Check our website! https://vk.cc/818RFv
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Helpful presentation. Thanks!!
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Very clear insight into this problem and solutions!
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • This is like the progress I suffered when I started my latest job 4 years ago.
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

×