Our Best Practices Are Killing Us

Nicole Sullivan
Nicole SullivanPrincipal Software Engineer & Engineering Manager at Pivotal
OUR BEST PRACTICES ARE
               KILLING US




  photo by Joshua Stearns
                            Nicole Sullivan
Wednesday, March 30, 2011
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
YUMMY DATA FROM
                          FACEBOOK




Wednesday, March 30, 2011
FACEBOOK BLUE



                             261
Wednesday, March 30, 2011
UNIQUE COLORS



                             548
                               unique hex values



                                                   Facebook
Wednesday, March 30, 2011
COLORS



                            6498
                            color declarations



                                                 Facebook
Wednesday, March 30, 2011
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 greater than 50
Wednesday, March 30, 2011
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
 23% >100
Wednesday, March 30, 2011
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
    ❖   the Alexa Top 1000 sites
    ❖   Government websites
    ❖   Small and large businesses

Wednesday, March 30, 2011
INSANITY:
                            doing the same thing over and over
                              and expecting different results




Wednesday, 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 Crockford




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




Wednesday, 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 Myths




Wednesday, March 30, 2011
THREE BEST PRACTICE
                          MYTHS:


    ❖   Don’t add any extra elements
    ❖   Don’t add classes (Classitis! Ahhh!)
    ❖   Use descendent selectors exclusively




Wednesday, March 30, 2011
WHAT HAPPENS NEXT?
                 SPECIFICITY WARS




Wednesday, March 30, 2011
SPECIFICITY - THE SIMPLE
                   VERSION




Wednesday, March 30, 2011
SPECIFICITY - THE SIMPLE
                   VERSION


                                elements



                               & pseudo elements




Wednesday, March 30, 2011
SPECIFICITY - THE SIMPLE
                   VERSION


                              classes           elements



                            & pseudo classes   & pseudo elements
                              & attributes




Wednesday, March 30, 2011
SPECIFICITY - THE SIMPLE
                   VERSION


                            IDs     classes           elements



                                  & pseudo classes   & pseudo elements
                                    & attributes




Wednesday, March 30, 2011
SPECIFICITY - THE SIMPLE
                   VERSION


             inline         IDs     classes           elements



                                  & pseudo classes   & pseudo elements
                                    & attributes




Wednesday, March 30, 2011
SPECIFICITY - THE SIMPLE
                   VERSION

                #sidebar ul li a.myclass:hover{}
             inline         IDs     classes           elements



                                  & pseudo classes   & pseudo elements
                                    & attributes




Wednesday, March 30, 2011
SPECIFICITY - THE SIMPLE
                   VERSION

                #sidebar ul li a.myclass:hover{}
             inline         IDs     classes           elements

                                                            3
                                  & pseudo classes   & pseudo elements
                                    & attributes




Wednesday, March 30, 2011
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
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
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
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
UNIVERSAL SELECTOR

                                  * {}
             inline         IDs          classes         elements



                                     & pseudo classes   & pseudo elements
                                       & attributes




Wednesday, March 30, 2011
UNIVERSAL SELECTOR

                                  * {}
             inline         IDs          classes         elements

                                                              0
                                     & pseudo classes   & pseudo elements
                                       & attributes




Wednesday, March 30, 2011
UNIVERSAL SELECTOR

                                  * {}
             inline         IDs          classes         elements

                                           0                  0
                                     & pseudo classes   & pseudo elements
                                       & attributes




Wednesday, March 30, 2011
UNIVERSAL SELECTOR

                                  * {}
             inline         IDs          classes         elements

                            0              0                  0
                                     & pseudo classes   & pseudo elements
                                       & attributes




Wednesday, March 30, 2011
UNIVERSAL SELECTOR

                                  * {}
             inline         IDs          classes         elements

                   0        0              0                  0
                                     & pseudo classes   & pseudo elements
                                       & attributes




Wednesday, 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
                                                    & attributes

Wednesday, 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
                                                    & attributes

Wednesday, 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
                                                    & attributes

Wednesday, 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
                                                    & attributes

Wednesday, 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
                                                    & attributes

Wednesday, 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
                                                    & attributes

Wednesday, 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
                                                    & attributes

Wednesday, 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
                                                    & attributes

Wednesday, 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
                                                    & attributes

Wednesday, 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
                                                    & attributes

Wednesday, 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
                                                         & attributes
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

                                                                                     1
                                                       & pseudo classes      & pseudo elements
                                                         & attributes
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

                                                              0                      1
                                                       & pseudo classes      & pseudo elements
                                                         & attributes
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

                                         0                    0                      1
                                                       & pseudo classes      & pseudo elements
                                                         & attributes
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

                  0                      0                    0                      1
                                                       & pseudo classes      & pseudo elements
                                                         & attributes
Wednesday, March 30, 2011
#sidebar




Wednesday, 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   1




Wednesday, 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 bold
Wednesday, 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   1

Wednesday, 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 firebug




Wednesday, 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       0


Wednesday, 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       0


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      0


Wednesday, 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   0


Wednesday, 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
                                     Elements

Wednesday, March 30, 2011
SPECIFICITY AT IT’S WORST



                             inline   Inline Styles
                            normal
                                          IDs
                                        Classes
                                       Elements

Wednesday, March 30, 2011
SPECIFICITY AT IT’S WORST
                      !important          IDs
                                        Classes
                                       Elements
                             inline   Inline Styles
                            normal
                                          IDs
                                        Classes
                                       Elements

Wednesday, March 30, 2011
#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: 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 Specificity




Wednesday, 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 architecture




Wednesday, March 30, 2011
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

                            ❖ Must clearfix




Wednesday, March 30, 2011
WHAT DON’T WE KNOW?

                            ❖ Image width and decoration vary
                            ❖ Right content is unknown

                            ❖ Width unknown




Wednesday, March 30, 2011
SEPARATE STRUCTURE
                       FROM CHROME




Wednesday, 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 Parker
Wednesday, 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=307069903919
Wednesday, March 30, 2011
Wednesday, March 30, 2011
GREAT DEVELOPERS CAN
          BUILD AMAZING THINGS
                        if we move worst-best practices out of our way




Wednesday, March 30, 2011
LET’S KEEP TALKING...
                                 www.stubbornella.org
                                   @stubbornella




                OOCSS Project: http://github.com/stubbornella/oocss/

Wednesday, March 30, 2011
1 of 111

Recommended

CSS Bloat! by
CSS Bloat!CSS Bloat!
CSS Bloat!Nicole Sullivan
24.8K views92 slides
Object Oriented CSS by
Object Oriented CSSObject Oriented CSS
Object Oriented CSSNicole Sullivan
283.2K views64 slides
Behemoth SEO: Search Strategy for Huge Websites by
Behemoth SEO: Search Strategy for Huge WebsitesBehemoth SEO: Search Strategy for Huge Websites
Behemoth SEO: Search Strategy for Huge WebsitesPhilipp Klöckner
3.5K views70 slides
FortiWLC by
FortiWLC FortiWLC
FortiWLC Ahmed Hashem El Fiky
789 views36 slides
Disambiguating Equiprobability in SEO Dawn Anderson Friends of Search 2020 by
Disambiguating Equiprobability in SEO Dawn Anderson Friends of Search 2020Disambiguating Equiprobability in SEO Dawn Anderson Friends of Search 2020
Disambiguating Equiprobability in SEO Dawn Anderson Friends of Search 2020Dawn Anderson MSc DigM
2.6K views185 slides
CSS Systems by
CSS SystemsCSS Systems
CSS SystemsNatalie Downe
91.8K views78 slides

More Related Content

What's hot

Automating Google Lighthouse by
Automating Google LighthouseAutomating Google Lighthouse
Automating Google LighthouseHamlet Batista
4.4K views72 slides
SEOkomm 2021: Interne Verlinkung by
SEOkomm 2021: Interne VerlinkungSEOkomm 2021: Interne Verlinkung
SEOkomm 2021: Interne VerlinkungJohan Hülsen
608 views45 slides
HTML Semantic Tags by
HTML Semantic TagsHTML Semantic Tags
HTML Semantic TagsBruce Kyle
2.8K views35 slides
Transform SharePoint List Forms with HTML and CSS by
Transform SharePoint List Forms with HTML and CSSTransform SharePoint List Forms with HTML and CSS
Transform SharePoint List Forms with HTML and CSSJohn Calvert
4.1K views62 slides
Extensible Markup Language (XML) by
Extensible Markup Language (XML)Extensible Markup Language (XML)
Extensible Markup Language (XML)AakankshaR
3.2K views13 slides
Introduction to HTML5 by
Introduction to HTML5Introduction to HTML5
Introduction to HTML5IT Geeks
905 views13 slides

What's hot(20)

Automating Google Lighthouse by Hamlet Batista
Automating Google LighthouseAutomating Google Lighthouse
Automating Google Lighthouse
Hamlet Batista4.4K views
SEOkomm 2021: Interne Verlinkung by Johan Hülsen
SEOkomm 2021: Interne VerlinkungSEOkomm 2021: Interne Verlinkung
SEOkomm 2021: Interne Verlinkung
Johan Hülsen608 views
HTML Semantic Tags by Bruce Kyle
HTML Semantic TagsHTML Semantic Tags
HTML Semantic Tags
Bruce Kyle2.8K views
Transform SharePoint List Forms with HTML and CSS by John Calvert
Transform SharePoint List Forms with HTML and CSSTransform SharePoint List Forms with HTML and CSS
Transform SharePoint List Forms with HTML and CSS
John Calvert4.1K views
Extensible Markup Language (XML) by AakankshaR
Extensible Markup Language (XML)Extensible Markup Language (XML)
Extensible Markup Language (XML)
AakankshaR3.2K views
Introduction to HTML5 by IT Geeks
Introduction to HTML5Introduction to HTML5
Introduction to HTML5
IT Geeks905 views
11 Advanced Uses of Screaming Frog Nov 2019 DMSS by Oliver Brett
11 Advanced Uses of Screaming Frog Nov 2019 DMSS11 Advanced Uses of Screaming Frog Nov 2019 DMSS
11 Advanced Uses of Screaming Frog Nov 2019 DMSS
Oliver Brett3.4K views
Planning for Governance in Yammer While Working Like a Network by Perficient, Inc.
Planning for Governance in Yammer While Working Like a NetworkPlanning for Governance in Yammer While Working Like a Network
Planning for Governance in Yammer While Working Like a Network
Perficient, Inc.4.4K views
Basic of HTML, CSS(StyleSheet), JavaScript(js), Bootstrap, JSON & AngularJS by Deepak Upadhyay
Basic of HTML, CSS(StyleSheet), JavaScript(js), Bootstrap, JSON & AngularJSBasic of HTML, CSS(StyleSheet), JavaScript(js), Bootstrap, JSON & AngularJS
Basic of HTML, CSS(StyleSheet), JavaScript(js), Bootstrap, JSON & AngularJS
Deepak Upadhyay1.3K views
Adiós a la gestión de parámetros de URL. Todo lo que deberías saber para mant... by Human Level
Adiós a la gestión de parámetros de URL. Todo lo que deberías saber para mant...Adiós a la gestión de parámetros de URL. Todo lo que deberías saber para mant...
Adiós a la gestión de parámetros de URL. Todo lo que deberías saber para mant...
Human Level988 views
CSS corso base (classi seconde, mod 1) by Matteo Ziviani
CSS corso base (classi seconde, mod 1)CSS corso base (classi seconde, mod 1)
CSS corso base (classi seconde, mod 1)
Matteo Ziviani741 views
Presentation about html5 css3 by Gopi A
Presentation about html5 css3Presentation about html5 css3
Presentation about html5 css3
Gopi A10.7K views

Similar to Our Best Practices Are Killing Us

JavaScript Secrets by
JavaScript SecretsJavaScript Secrets
JavaScript SecretsPatrick Sheridan
854 views55 slides
E tourisme inspiratie dag presentatie by
E tourisme inspiratie dag presentatieE tourisme inspiratie dag presentatie
E tourisme inspiratie dag presentatieVincent Everts
756 views244 slides
Presentatie trendwatcher Vincent Everts - Inspiratiedag e-tourism by
Presentatie trendwatcher Vincent Everts - Inspiratiedag e-tourismPresentatie trendwatcher Vincent Everts - Inspiratiedag e-tourism
Presentatie trendwatcher Vincent Everts - Inspiratiedag e-tourismStrategiedag e-tourism - LAgroup & Waag Society
591 views244 slides
The facilities of Features Drupal module by
The facilities of Features Drupal moduleThe facilities of Features Drupal module
The facilities of Features Drupal moduleKálmán Hosszu
761 views34 slides
Envato Dev Ops - Alt.Net Melbourne by
Envato Dev Ops - Alt.Net MelbourneEnvato Dev Ops - Alt.Net Melbourne
Envato Dev Ops - Alt.Net MelbourneJohn Barton
1.3K views106 slides
Future of digital presentation by
Future of digital presentationFuture of digital presentation
Future of digital presentationMadhouse Associates
597 views119 slides

More from Nicole Sullivan

Building the Media Block in ReactJS by
Building the Media Block in ReactJS Building the Media Block in ReactJS
Building the Media Block in ReactJS Nicole Sullivan
8.5K views107 slides
Why are you here? by
Why are you here?Why are you here?
Why are you here?Nicole Sullivan
7.8K views17 slides
Creating Living Style Guides to Improve Performance by
Creating Living Style Guides to Improve PerformanceCreating Living Style Guides to Improve Performance
Creating Living Style Guides to Improve PerformanceNicole Sullivan
149K views83 slides
Don't feed the trolls by
Don't feed the trollsDon't feed the trolls
Don't feed the trollsNicole Sullivan
26.7K views37 slides
CSS Power Tools by
CSS Power ToolsCSS Power Tools
CSS Power ToolsNicole Sullivan
8.7K views68 slides
5 Mistakes of Massive CSS by
5 Mistakes of Massive CSS5 Mistakes of Massive CSS
5 Mistakes of Massive CSSNicole Sullivan
63K views92 slides

More from Nicole Sullivan(14)

Recently uploaded

Zero to Automated in Under a Year by
Zero to Automated in Under a YearZero to Automated in Under a Year
Zero to Automated in Under a YearNetwork Automation Forum
15 views23 slides
Igniting Next Level Productivity with AI-Infused Data Integration Workflows by
Igniting Next Level Productivity with AI-Infused Data Integration Workflows Igniting Next Level Productivity with AI-Infused Data Integration Workflows
Igniting Next Level Productivity with AI-Infused Data Integration Workflows Safe Software
263 views86 slides
AMAZON PRODUCT RESEARCH.pdf by
AMAZON PRODUCT RESEARCH.pdfAMAZON PRODUCT RESEARCH.pdf
AMAZON PRODUCT RESEARCH.pdfJerikkLaureta
26 views13 slides
Transcript: The Details of Description Techniques tips and tangents on altern... by
Transcript: The Details of Description Techniques tips and tangents on altern...Transcript: The Details of Description Techniques tips and tangents on altern...
Transcript: The Details of Description Techniques tips and tangents on altern...BookNet Canada
136 views15 slides
PharoJS - Zürich Smalltalk Group Meetup November 2023 by
PharoJS - Zürich Smalltalk Group Meetup November 2023PharoJS - Zürich Smalltalk Group Meetup November 2023
PharoJS - Zürich Smalltalk Group Meetup November 2023Noury Bouraqadi
127 views17 slides
Scaling Knowledge Graph Architectures with AI by
Scaling Knowledge Graph Architectures with AIScaling Knowledge Graph Architectures with AI
Scaling Knowledge Graph Architectures with AIEnterprise Knowledge
30 views15 slides

Recently uploaded(20)

Igniting Next Level Productivity with AI-Infused Data Integration Workflows by Safe Software
Igniting Next Level Productivity with AI-Infused Data Integration Workflows Igniting Next Level Productivity with AI-Infused Data Integration Workflows
Igniting Next Level Productivity with AI-Infused Data Integration Workflows
Safe Software263 views
AMAZON PRODUCT RESEARCH.pdf by JerikkLaureta
AMAZON PRODUCT RESEARCH.pdfAMAZON PRODUCT RESEARCH.pdf
AMAZON PRODUCT RESEARCH.pdf
JerikkLaureta26 views
Transcript: The Details of Description Techniques tips and tangents on altern... by BookNet Canada
Transcript: The Details of Description Techniques tips and tangents on altern...Transcript: The Details of Description Techniques tips and tangents on altern...
Transcript: The Details of Description Techniques tips and tangents on altern...
BookNet Canada136 views
PharoJS - Zürich Smalltalk Group Meetup November 2023 by Noury Bouraqadi
PharoJS - Zürich Smalltalk Group Meetup November 2023PharoJS - Zürich Smalltalk Group Meetup November 2023
PharoJS - Zürich Smalltalk Group Meetup November 2023
Noury Bouraqadi127 views
Empathic Computing: Delivering the Potential of the Metaverse by Mark Billinghurst
Empathic Computing: Delivering  the Potential of the MetaverseEmpathic Computing: Delivering  the Potential of the Metaverse
Empathic Computing: Delivering the Potential of the Metaverse
Mark Billinghurst478 views
Special_edition_innovator_2023.pdf by WillDavies22
Special_edition_innovator_2023.pdfSpecial_edition_innovator_2023.pdf
Special_edition_innovator_2023.pdf
WillDavies2217 views
Case Study Copenhagen Energy and Business Central.pdf by Aitana
Case Study Copenhagen Energy and Business Central.pdfCase Study Copenhagen Energy and Business Central.pdf
Case Study Copenhagen Energy and Business Central.pdf
Aitana16 views
SAP Automation Using Bar Code and FIORI.pdf by Virendra Rai, PMP
SAP Automation Using Bar Code and FIORI.pdfSAP Automation Using Bar Code and FIORI.pdf
SAP Automation Using Bar Code and FIORI.pdf
【USB韌體設計課程】精選講義節錄-USB的列舉過程_艾鍗學院 by IttrainingIttraining
【USB韌體設計課程】精選講義節錄-USB的列舉過程_艾鍗學院【USB韌體設計課程】精選講義節錄-USB的列舉過程_艾鍗學院
【USB韌體設計課程】精選講義節錄-USB的列舉過程_艾鍗學院
TouchLog: Finger Micro Gesture Recognition Using Photo-Reflective Sensors by sugiuralab
TouchLog: Finger Micro Gesture Recognition  Using Photo-Reflective SensorsTouchLog: Finger Micro Gesture Recognition  Using Photo-Reflective Sensors
TouchLog: Finger Micro Gesture Recognition Using Photo-Reflective Sensors
sugiuralab19 views

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
  • 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
  • 13. 511 declarations setting styles for h1-h6 56% >10 9% >100 Wednesday, March 30, 2011
  • 15. !IMPORTANT 518 declarations using important 12% have greater than 50 Wednesday, March 30, 2011
  • 17. 733 declarations floated elements 56% > 10 13% > 100 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
  • 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
  • 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
  • 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
  • 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