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 Sullivan...
WHAT WE WILL COVER:


    ❖   We have a problem
    ❖   CSS is not to blame
    ❖   Tools won’t solve it, but they can hel...
YUMMY DATA FROM
                          FACEBOOK




Wednesday, March 30, 2011
FACEBOOK BLUE



                             261
Wednesday, March 30, 2011
UNIQUE COLORS



                             548
                               unique hex values



                    ...
COLORS



                            6498
                            color declarations



                             ...
YUMMY DATA FROM
                          SALESFORCE

Wednesday, March 30, 2011
padding
Wednesday, March 30, 2011
3,668
                             padding declarations




Wednesday, March 30, 2011
ARE NICOLE’S CLIENTS
             EXCEPTIONALLY MESSY?




Wednesday, March 30, 2011
ALEXA TOP 1000 STUDY
                            with Stoyan Stefanov




Wednesday, March 30, 2011
h1-h6
Wednesday, March 30, 2011
511
                            declarations setting styles for h1-h6


  56% >10
  9% >100
Wednesday, March 30, 2011
!important

Wednesday, March 30, 2011
!IMPORTANT



                             518
                            declarations using important



 12% have great...
float
Wednesday, March 30, 2011
733
                            declarations floated elements


  56% > 10
 13% > 100
Wednesday, March 30, 2011
font-size
Wednesday, March 30, 2011
FONT-SIZE



                               889
                            declarations changed the font-size


 78% >10
...
DOES THIS APPLY TO YOU?
                   Do your websites have the same issues? Workshop




Wednesday, March 30, 2011
SO, DUPLICATION IS A
                     PROBLEM AT:
    ❖   Facebook
    ❖   Salesforce
    ❖   w3c
    ❖   Box.net
    ...
INSANITY:
                            doing the same thing over and over
                              and expecting diffe...
STOP POINTING FINGERS
                            the truth is, we all have this problem

                                ...
“JAVASCRIPT DOESN’T SUCK
                      You’re just doing it wrong.” -- Douglas Crockford




Wednesday, March 30, ...
CSS
         “JAVASCRIPT DOESN’T SUCK
                      You’re just doing it wrong.” -- Douglas Crockford




Wednesda...
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....
SO, WHAT ARE THE STUPID
            THINGS?
                            Best Practice Myths




Wednesday, March 30, 2011
THREE BEST PRACTICE
                          MYTHS:


    ❖   Don’t add any extra elements
    ❖   Don’t add classes (Cla...
WHAT HAPPENS NEXT?
                 SPECIFICITY WARS




Wednesday, March 30, 2011
SPECIFICITY - THE SIMPLE
                   VERSION




Wednesday, 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         elemen...
UNIVERSAL SELECTOR

                                  * {}
             inline         IDs          classes         elemen...
UNIVERSAL SELECTOR

                                  * {}
             inline         IDs          classes         elemen...
UNIVERSAL SELECTOR

                                  * {}
             inline         IDs          classes         elemen...
UNIVERSAL SELECTOR

                                  * {}
             inline         IDs          classes         elemen...
CONCATENATING
                              SPECIFICITY
                      .item{color: blue;}

                      u...
CONCATENATING
                              SPECIFICITY
                      .item{color: blue;}

                      u...
CONCATENATING
                              SPECIFICITY
                      .item{color: blue;}

                      u...
CONCATENATING
                              SPECIFICITY
                      .item{color: blue;}

                      u...
CONCATENATING
                              SPECIFICITY
                      .item{color: blue;}

                      u...
CONCATENATING
                              SPECIFICITY
                      .item{color: blue;}

                      u...
CONCATENATING
                              SPECIFICITY
                      .item{color: blue;}

                      u...
CONCATENATING
                              SPECIFICITY
                      .item{color: blue;}

                      u...
CONCATENATING
                              SPECIFICITY
                      .item{color: blue;}

                      u...
CONCATENATING
                              SPECIFICITY
                      .item{color: blue;}

                      u...
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...
SITE-WIDE HEADINGS

                     h1{color:   #333;   font-size:   24px;   font-weight:   bold}
                   ...
SITE-WIDE HEADINGS

                     h1{color:   #333;   font-size:   24px;   font-weight:   bold}
                   ...
SITE-WIDE HEADINGS

                     h1{color:   #333;   font-size:   24px;   font-weight:   bold}
                   ...
SITE-WIDE HEADINGS

                     h1{color:   #333;   font-size:   24px;   font-weight:   bold}
                   ...
SITE-WIDE HEADINGS

                     h1{color:   #333;   font-size:   24px;   font-weight:   bold}
                   ...
#sidebar




Wednesday, 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: ...
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; fon...
WHAT IS HAPPENING WITH
       THE SPECIFICITY?
      h3{...}



      #sidebar h3{...}



      #sidebar .account h3{...}
...
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{...}    ...
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 whi...
WHAT HAPPENS WHEN...
      there are no more ways to make a rule more specific than the
                    one you are try...
<h3 style=”color: red; font-weight: bold; font-size: 20px;”>My
     shiny new heading level 3</h3>




          WHAT HAPP...
<h3 style=”color: red; font-weight: bold; font-size: 20px;”>My
     shiny new heading level 3</h3>




          WHAT HAPP...
AND THEN ANOTHER
                     DEVELOPER SAYS...
                     “this is gross! we should not be using inline...
#sidebar .weatherMod .hourly .tuesday h3{color: blue !important;}




          YOU MIGHT THINK
       !IMPORTANT WOULD EN...
#sidebar .weatherMod .hourly .tuesday h3{color: blue !important;}




          YOU MIGHT THINK
       !IMPORTANT WOULD EN...
#sidebar .weatherMod .hourly .tuesday h3{color: blue !important;}




          YOU MIGHT THINK
       !IMPORTANT WOULD EN...
#sidebar .weatherMod .hourly .tuesday h3{color: blue !important;}




          YOU MIGHT THINK
       !IMPORTANT WOULD EN...
HOSTILE CODE
                            ENVIRONMENT
    ❖   Two layers develop
    ❖   Specificity grows over time (more a...
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 3




Wednesday, March 30, 2011
DUPLICATING PROPERTY
                 VALUE PAIRS
      h1{ margin: 10px 0; color: #333; font-size: 24px; font-weight: bol...
THREE PROBLEMS


    ❖   Duplication of property value pairs
    ❖   Duplication of elements (h3)
    ❖   Growing Specifici...
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 n...
MEDIA BLOCK EXAMPLE




Wednesday, March 30, 2011
ALL OF THESE ARE THE
                      SAME OBJECT




Wednesday, March 30, 2011
WHAT DO WE KNOW?

                            ❖ Can be nested
                            ❖ Optional right button

       ...
WHAT DON’T WE KNOW?

                            ❖ Image width and decoration vary
                            ❖ Right con...
SEPARATE STRUCTURE
                       FROM CHROME




Wednesday, March 30, 2011
A FEW LINES OF HTML...

            <div class="media attribution">
              <a href="http://twitter.com/stubbornella...
4 LINES OF CSS...


                                  _




Wednesday, March 30, 2011
Wednesday, March 30, 2011
HTML SIZE
                     reduced by 50%




                                  by Stefan Parker
Wednesday, March 30, ...
“Due to these efforts, we cut our average
           CSS bytes per page by 19% (after gzip) and
           HTML bytes per ...
Wednesday, March 30, 2011
GREAT DEVELOPERS CAN
          BUILD AMAZING THINGS
                        if we move worst-best practices out of our way...
LET’S KEEP TALKING...
                                 www.stubbornella.org
                                   @stubbornel...
Upcoming SlideShare
Loading in …5
×
Upcoming SlideShare
CSS Bloat!
Next

Share

Our Best Practices Are Killing Us

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.

Related Books

Free with a 30 day trial from Scribd

See all

Related Audiobooks

Free with a 30 day trial from Scribd

See all

Our Best Practices Are Killing Us

  1. OUR BEST PRACTICES ARE KILLING US photo by Joshua Stearns Nicole Sullivan Wednesday, March 30, 2011
  2. WHAT WE WILL COVER: ❖ We have a problem ❖ CSS is not to blame ❖ Tools won’t solve it, but they can help Wednesday, March 30, 2011
  3. YUMMY DATA FROM FACEBOOK Wednesday, March 30, 2011
  4. FACEBOOK BLUE 261 Wednesday, March 30, 2011
  5. UNIQUE COLORS 548 unique hex values Facebook Wednesday, March 30, 2011
  6. COLORS 6498 color declarations Facebook Wednesday, March 30, 2011
  7. YUMMY DATA FROM SALESFORCE Wednesday, March 30, 2011
  8. padding Wednesday, March 30, 2011
  9. 3,668 padding declarations Wednesday, March 30, 2011
  10. ARE NICOLE’S CLIENTS EXCEPTIONALLY MESSY? Wednesday, March 30, 2011
  11. ALEXA TOP 1000 STUDY with Stoyan Stefanov Wednesday, March 30, 2011
  12. h1-h6 Wednesday, March 30, 2011
  13. 511 declarations setting styles for h1-h6 56% >10 9% >100 Wednesday, March 30, 2011
  14. !important Wednesday, March 30, 2011
  15. !IMPORTANT 518 declarations using important 12% have greater than 50 Wednesday, March 30, 2011
  16. float Wednesday, March 30, 2011
  17. 733 declarations floated elements 56% > 10 13% > 100 Wednesday, March 30, 2011
  18. font-size Wednesday, March 30, 2011
  19. FONT-SIZE 889 declarations changed the font-size 78% >10 23% >100 Wednesday, March 30, 2011
  20. DOES THIS APPLY TO YOU? Do your websites have the same issues? Workshop Wednesday, March 30, 2011
  21. SO, DUPLICATION IS A PROBLEM AT: ❖ Facebook ❖ Salesforce ❖ w3c ❖ Box.net ❖ the Alexa Top 1000 sites ❖ Government websites ❖ Small and large businesses Wednesday, March 30, 2011
  22. INSANITY: doing the same thing over and over and expecting different results Wednesday, March 30, 2011
  23. 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
  24. “JAVASCRIPT DOESN’T SUCK You’re just doing it wrong.” -- Douglas Crockford Wednesday, March 30, 2011
  25. CSS “JAVASCRIPT DOESN’T SUCK You’re just doing it wrong.” -- Douglas Crockford Wednesday, March 30, 2011
  26. ABOUT CSS CSS (much like JS) will let you do anything (no matter how stupid) wheeee! Wednesday, March 30, 2011
  27. THE POINT IS... That we don’t have to do stupid things, just because we can. Wednesday, March 30, 2011
  28. SO, WHAT ARE THE STUPID THINGS? Best Practice Myths Wednesday, March 30, 2011
  29. THREE BEST PRACTICE MYTHS: ❖ Don’t add any extra elements ❖ Don’t add classes (Classitis! Ahhh!) ❖ Use descendent selectors exclusively Wednesday, March 30, 2011
  30. WHAT HAPPENS NEXT? SPECIFICITY WARS Wednesday, March 30, 2011
  31. SPECIFICITY - THE SIMPLE VERSION Wednesday, March 30, 2011
  32. SPECIFICITY - THE SIMPLE VERSION elements & pseudo elements Wednesday, March 30, 2011
  33. SPECIFICITY - THE SIMPLE VERSION classes elements & pseudo classes & pseudo elements & attributes Wednesday, March 30, 2011
  34. SPECIFICITY - THE SIMPLE VERSION IDs classes elements & pseudo classes & pseudo elements & attributes Wednesday, March 30, 2011
  35. SPECIFICITY - THE SIMPLE VERSION inline IDs classes elements & pseudo classes & pseudo elements & attributes Wednesday, March 30, 2011
  36. SPECIFICITY - THE SIMPLE VERSION #sidebar ul li a.myclass:hover{} inline IDs classes elements & pseudo classes & pseudo elements & attributes Wednesday, March 30, 2011
  37. SPECIFICITY - THE SIMPLE VERSION #sidebar ul li a.myclass:hover{} inline IDs classes elements 3 & pseudo classes & pseudo elements & attributes Wednesday, March 30, 2011
  38. SPECIFICITY - THE SIMPLE VERSION #sidebar ul li a.myclass:hover{} inline IDs classes elements 2 3 & pseudo classes & pseudo elements & attributes Wednesday, March 30, 2011
  39. SPECIFICITY - THE SIMPLE VERSION #sidebar ul li a.myclass:hover{} inline IDs classes elements 1 2 3 & pseudo classes & pseudo elements & attributes Wednesday, March 30, 2011
  40. SPECIFICITY - THE SIMPLE VERSION #sidebar ul li a.myclass:hover{} inline IDs classes elements 0 1 2 3 & pseudo classes & pseudo elements & attributes Wednesday, March 30, 2011
  41. SPECIFICITY - THE SIMPLE VERSION #sidebar ul li a.myclass:hover{} inline IDs classes elements 0 1 2 3 & pseudo classes & pseudo elements & attributes Wednesday, March 30, 2011
  42. UNIVERSAL SELECTOR * {} inline IDs classes elements & pseudo classes & pseudo elements & attributes Wednesday, March 30, 2011
  43. UNIVERSAL SELECTOR * {} inline IDs classes elements 0 & pseudo classes & pseudo elements & attributes Wednesday, March 30, 2011
  44. UNIVERSAL SELECTOR * {} inline IDs classes elements 0 0 & pseudo classes & pseudo elements & attributes Wednesday, March 30, 2011
  45. UNIVERSAL SELECTOR * {} inline IDs classes elements 0 0 0 & pseudo classes & pseudo elements & attributes Wednesday, March 30, 2011
  46. UNIVERSAL SELECTOR * {} inline IDs classes elements 0 0 0 0 & pseudo classes & pseudo elements & attributes Wednesday, March 30, 2011
  47. 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 & attributes Wednesday, March 30, 2011
  48. 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 & attributes Wednesday, March 30, 2011
  49. 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 & attributes Wednesday, March 30, 2011
  50. 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 & attributes Wednesday, March 30, 2011
  51. 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 & attributes Wednesday, March 30, 2011
  52. 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 & attributes Wednesday, March 30, 2011
  53. 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 & attributes Wednesday, March 30, 2011
  54. 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 & attributes Wednesday, March 30, 2011
  55. 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 & attributes Wednesday, March 30, 2011
  56. 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 & attributes Wednesday, March 30, 2011
  57. CLASS ORDER <p class=”message error”>Borken!</p> Wednesday, March 30, 2011
  58. CLASS ORDER The order of the classes makes no difference. <p class=”message error”>Borken!</p> Wednesday, March 30, 2011
  59. 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 & attributes Wednesday, March 30, 2011
  60. 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 & attributes Wednesday, March 30, 2011
  61. 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 & attributes Wednesday, March 30, 2011
  62. 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 & attributes Wednesday, March 30, 2011
  63. 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 & attributes Wednesday, March 30, 2011
  64. #sidebar Wednesday, March 30, 2011
  65. h3 { color: #797979; font-size: 12px; font-weight: bold; border-bottom: 1px solid #c5c5c5; padding-bottom: 5px; } Wednesday, March 30, 2011
  66. HOW DO YOU GET THE H3 TO LOOK DIFFERENT? (but only in the sidebar) (and using the semantically appropriate heading) Wednesday, March 30, 2011
  67. #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
  68. 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
  69. 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
  70. WHAT IS HAPPENING WITH THE SPECIFICITY? h3{...} #sidebar h3{...} #sidebar .account h3{...} Wednesday, March 30, 2011
  71. WHAT IS HAPPENING WITH THE SPECIFICITY? h3{...} 0 0 0 1 #sidebar h3{...} #sidebar .account h3{...} Wednesday, March 30, 2011
  72. WHAT IS HAPPENING WITH THE SPECIFICITY? h3{...} 0 0 0 1 #sidebar h3{...} 0 1 0 1 #sidebar .account h3{...} Wednesday, March 30, 2011
  73. WHAT IS HAPPENING WITH THE SPECIFICITY? h3{...} 0 0 0 1 #sidebar h3{...} 0 1 0 1 #sidebar .account h3{...} 0 1 1 1 Wednesday, March 30, 2011
  74. THE SITE HAS A WEATHER MODULE IN THE SIDEBAR h2 h3 #sidebar .weatherMod h3{ color: #fff; text-transform: uppercase; } Wednesday, March 30, 2011
  75. IMAGINE YOU RECEIVED THIS WIREFRAME h3 MORN NOON EVENING NIGHT h3 27° 35° 38° 30° Wednesday, March 30, 2011
  76. 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 bold Wednesday, March 30, 2011
  77. 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
  78. 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
  79. 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 1 Wednesday, March 30, 2011
  80. SIX MONTHS LATER, IT GETS COMPLICATED ❖ Specificity grows over time ❖ Difficult to tell which rules will take precedence ❖ Developers end up coding by firebug Wednesday, March 30, 2011
  81. 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
  82. <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
  83. <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 0 Wednesday, March 30, 2011
  84. 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
  85. #sidebar .weatherMod .hourly .tuesday h3{color: blue !important;} YOU MIGHT THINK !IMPORTANT WOULD END the specificity war, not so. Wednesday, March 30, 2011
  86. #sidebar .weatherMod .hourly .tuesday h3{color: blue !important;} YOU MIGHT THINK !IMPORTANT WOULD END the specificity war, not so. 0 0 0 0 Wednesday, March 30, 2011
  87. #sidebar .weatherMod .hourly .tuesday h3{color: blue !important;} YOU MIGHT THINK !IMPORTANT WOULD END the specificity war, not so. 0 0 0 0 Wednesday, March 30, 2011
  88. #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 0 Wednesday, March 30, 2011
  89. 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
  90. SPECIFICITY AT IT’S WORST normal IDs Classes Elements Wednesday, March 30, 2011
  91. SPECIFICITY AT IT’S WORST inline Inline Styles normal IDs Classes Elements Wednesday, March 30, 2011
  92. SPECIFICITY AT IT’S WORST !important IDs Classes Elements inline Inline Styles normal IDs Classes Elements Wednesday, March 30, 2011
  93. #sidebar A Normal Heading Level 3 Wednesday, March 30, 2011
  94. 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
  95. THREE PROBLEMS ❖ Duplication of property value pairs ❖ Duplication of elements (h3) ❖ Growing Specificity Wednesday, March 30, 2011
  96. 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
  97. 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
  98. 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 architecture Wednesday, March 30, 2011
  99. MEDIA BLOCK EXAMPLE Wednesday, March 30, 2011
  100. ALL OF THESE ARE THE SAME OBJECT Wednesday, March 30, 2011
  101. WHAT DO WE KNOW? ❖ Can be nested ❖ Optional right button ❖ Must clearfix Wednesday, March 30, 2011
  102. WHAT DON’T WE KNOW? ❖ Image width and decoration vary ❖ Right content is unknown ❖ Width unknown Wednesday, March 30, 2011
  103. SEPARATE STRUCTURE FROM CHROME Wednesday, March 30, 2011
  104. 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
  105. 4 LINES OF CSS... _ Wednesday, March 30, 2011
  106. Wednesday, March 30, 2011
  107. HTML SIZE reduced by 50% by Stefan Parker Wednesday, March 30, 2011
  108. “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 Wednesday, March 30, 2011
  109. Wednesday, March 30, 2011
  110. GREAT DEVELOPERS CAN BUILD AMAZING THINGS if we move worst-best practices out of our way Wednesday, March 30, 2011
  111. LET’S KEEP TALKING... www.stubbornella.org @stubbornella OOCSS Project: http://github.com/stubbornella/oocss/ Wednesday, March 30, 2011
  • YIJIEFAN1

    Aug. 2, 2021
  • yavca

    Nov. 10, 2019
  • prolyginam

    Jul. 13, 2019
  • magdalenaobas

    Apr. 11, 2019
  • GiuseppeMarcelli

    Sep. 27, 2018
  • danilosnascimento7

    Jul. 20, 2018
  • tylervs5

    Oct. 26, 2017
  • cr3vet

    Jun. 27, 2017
  • RachelleGoddin

    Jun. 26, 2017
  • JulienLachaux

    May. 3, 2017
  • tommifinnila14

    Apr. 13, 2017
  • peterdnguyen

    Mar. 31, 2017
  • prkos

    Mar. 30, 2017
  • JeffreyHunt21

    Jan. 13, 2017
  • luogedai

    Nov. 28, 2016
  • DeepakYadav141

    Nov. 18, 2016
  • YoungBae6

    Aug. 9, 2016
  • MarcelOsoian

    Jul. 9, 2016
  • pochungwang7

    Jun. 29, 2016
  • IgorZenich

    Jun. 17, 2016

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.

Views

Total views

275,768

On Slideshare

0

From embeds

0

Number of embeds

41,799

Actions

Downloads

0

Shares

0

Comments

0

Likes

361

×