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
What is Object Oriented CSS? by
What is Object Oriented CSS?What is Object Oriented CSS?
What is Object Oriented CSS?Nicole Sullivan
43K views68 slides
Background property in css by
Background property in cssBackground property in css
Background property in cssDhruvin Nakrani
1K views18 slides
Programação Web - CSS by
Programação Web - CSSProgramação Web - CSS
Programação Web - CSSMauro Pereira
1.1K views28 slides
HTML Block and Inline Elements by
HTML Block and Inline ElementsHTML Block and Inline Elements
HTML Block and Inline ElementsWebtech Learning
1.7K views7 slides

More Related Content

What's hot

Introduction to Web Programming by
Introduction to Web ProgrammingIntroduction to Web Programming
Introduction to Web ProgrammingYnon Perek
12.8K views26 slides
Intro to html by
Intro to htmlIntro to html
Intro to htmlanshuman rahi
1.8K views30 slides
How Cascading Style Sheets (CSS) Works by
How Cascading Style Sheets (CSS) WorksHow Cascading Style Sheets (CSS) Works
How Cascading Style Sheets (CSS) WorksAmit Tyagi
79.4K views38 slides
CSS Selectors by
CSS SelectorsCSS Selectors
CSS SelectorsRachel Andrew
4K views121 slides
Introduction to HTML by
Introduction to HTMLIntroduction to HTML
Introduction to HTMLSeble Nigussie
228 views66 slides
Tipos de plataformas web by
Tipos de plataformas webTipos de plataformas web
Tipos de plataformas webEdwin Geovanni Vega Saldaña
8K views11 slides

What's hot(20)

Introduction to Web Programming by Ynon Perek
Introduction to Web ProgrammingIntroduction to Web Programming
Introduction to Web Programming
Ynon Perek12.8K views
How Cascading Style Sheets (CSS) Works by Amit Tyagi
How Cascading Style Sheets (CSS) WorksHow Cascading Style Sheets (CSS) Works
How Cascading Style Sheets (CSS) Works
Amit Tyagi79.4K views
Deploy PHP Apps on AWS Beanstalk & Deploy with Git by Amazon Web Services
Deploy PHP Apps on AWS Beanstalk & Deploy with GitDeploy PHP Apps on AWS Beanstalk & Deploy with Git
Deploy PHP Apps on AWS Beanstalk & Deploy with Git
Amazon Web Services4.7K views
Introduction to Umbraco by Roel
Introduction to UmbracoIntroduction to Umbraco
Introduction to Umbraco
Roel 3.8K views
HTML CSS JS in Nut shell by Ashwin Shiv
HTML  CSS JS in Nut shellHTML  CSS JS in Nut shell
HTML CSS JS in Nut shell
Ashwin Shiv251 views
Web Designing Presentation by RahulSuri30
Web Designing PresentationWeb Designing Presentation
Web Designing Presentation
RahulSuri302.5K views
React Storybook, Atomic Design, and ITCSS by Trevor Pierce
React Storybook, Atomic Design, and ITCSSReact Storybook, Atomic Design, and ITCSS
React Storybook, Atomic Design, and ITCSS
Trevor Pierce2.6K views
Bootstrap 3 by Lanh Le
Bootstrap 3Bootstrap 3
Bootstrap 3
Lanh Le2K views
One step in the future: CSS variables by Giacomo Zinetti
One step in the future: CSS variablesOne step in the future: CSS variables
One step in the future: CSS variables
Giacomo Zinetti1.5K views
Bootstrap Components Quick Overview by Perumal N K
Bootstrap Components Quick OverviewBootstrap Components Quick Overview
Bootstrap Components Quick Overview
Perumal N K620 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

Perth MeetUp November 2023 by
Perth MeetUp November 2023 Perth MeetUp November 2023
Perth MeetUp November 2023 Michael Price
19 views44 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
135 views15 slides
DALI Basics Course 2023 by
DALI Basics Course  2023DALI Basics Course  2023
DALI Basics Course 2023Ivory Egg
16 views12 slides
Empathic Computing: Delivering the Potential of the Metaverse by
Empathic Computing: Delivering  the Potential of the MetaverseEmpathic Computing: Delivering  the Potential of the Metaverse
Empathic Computing: Delivering the Potential of the MetaverseMark Billinghurst
476 views80 slides
Java Platform Approach 1.0 - Picnic Meetup by
Java Platform Approach 1.0 - Picnic MeetupJava Platform Approach 1.0 - Picnic Meetup
Java Platform Approach 1.0 - Picnic MeetupRick Ossendrijver
27 views39 slides
Top 10 Strategic Technologies in 2024: AI and Automation by
Top 10 Strategic Technologies in 2024: AI and AutomationTop 10 Strategic Technologies in 2024: AI and Automation
Top 10 Strategic Technologies in 2024: AI and AutomationAutomationEdge Technologies
18 views14 slides

Recently uploaded(20)

Perth MeetUp November 2023 by Michael Price
Perth MeetUp November 2023 Perth MeetUp November 2023
Perth MeetUp November 2023
Michael Price19 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 Canada135 views
DALI Basics Course 2023 by Ivory Egg
DALI Basics Course  2023DALI Basics Course  2023
DALI Basics Course 2023
Ivory Egg16 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 Billinghurst476 views
The details of description: Techniques, tips, and tangents on alternative tex... by BookNet Canada
The details of description: Techniques, tips, and tangents on alternative tex...The details of description: Techniques, tips, and tangents on alternative tex...
The details of description: Techniques, tips, and tangents on alternative tex...
BookNet Canada126 views
iSAQB Software Architecture Gathering 2023: How Process Orchestration Increas... by Bernd Ruecker
iSAQB Software Architecture Gathering 2023: How Process Orchestration Increas...iSAQB Software Architecture Gathering 2023: How Process Orchestration Increas...
iSAQB Software Architecture Gathering 2023: How Process Orchestration Increas...
Bernd Ruecker33 views
HTTP headers that make your website go faster - devs.gent November 2023 by Thijs Feryn
HTTP headers that make your website go faster - devs.gent November 2023HTTP headers that make your website go faster - devs.gent November 2023
HTTP headers that make your website go faster - devs.gent November 2023
Thijs Feryn21 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
Attacking IoT Devices from a Web Perspective - Linux Day by Simone Onofri
Attacking IoT Devices from a Web Perspective - Linux Day Attacking IoT Devices from a Web Perspective - Linux Day
Attacking IoT Devices from a Web Perspective - Linux Day
Simone Onofri15 views
Spesifikasi Lengkap ASUS Vivobook Go 14 by Dot Semarang
Spesifikasi Lengkap ASUS Vivobook Go 14Spesifikasi Lengkap ASUS Vivobook Go 14
Spesifikasi Lengkap ASUS Vivobook Go 14
Dot Semarang37 views
Piloting & Scaling Successfully With Microsoft Viva by Richard Harbridge
Piloting & Scaling Successfully With Microsoft VivaPiloting & Scaling Successfully With Microsoft Viva
Piloting & Scaling Successfully With Microsoft Viva
6g - REPORT.pdf by Liveplex
6g - REPORT.pdf6g - REPORT.pdf
6g - REPORT.pdf
Liveplex10 views
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
STPI OctaNE CoE Brochure.pdf by madhurjyapb
STPI OctaNE CoE Brochure.pdfSTPI OctaNE CoE Brochure.pdf
STPI OctaNE CoE Brochure.pdf
madhurjyapb13 views
handbook for web 3 adoption.pdf by Liveplex
handbook for web 3 adoption.pdfhandbook for web 3 adoption.pdf
handbook for web 3 adoption.pdf
Liveplex22 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