SlideShare a Scribd company logo
1 of 111
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

More Related Content

What's hot

Media queries A to Z
Media queries A to ZMedia queries A to Z
Media queries A to ZShameem Reza
 
What is Object Oriented CSS?
What is Object Oriented CSS?What is Object Oriented CSS?
What is Object Oriented CSS?Nicole Sullivan
 
AWS S3 and GLACIER
AWS S3 and GLACIERAWS S3 and GLACIER
AWS S3 and GLACIERMahesh Raj
 
CSS3 Media Queries
CSS3 Media QueriesCSS3 Media Queries
CSS3 Media QueriesRuss Weakley
 
HTML5 introduction for beginners
HTML5 introduction for beginnersHTML5 introduction for beginners
HTML5 introduction for beginnersVineeth N Krishnan
 
Azure SQL Database & Azure SQL Data Warehouse
Azure SQL Database & Azure SQL Data WarehouseAzure SQL Database & Azure SQL Data Warehouse
Azure SQL Database & Azure SQL Data WarehouseMohamed Tawfik
 
Integrating your on-premises Active Directory with Azure and Office 365
Integrating your on-premises Active Directory with Azure and Office 365Integrating your on-premises Active Directory with Azure and Office 365
Integrating your on-premises Active Directory with Azure and Office 365nelmedia
 
AWS 네트워크 보안을 위한 계층별 보안 구성 모범 사례 – 조이정, AWS 솔루션즈 아키텍트:: AWS 온라인 이벤트 – 클라우드 보안 특집
AWS 네트워크 보안을 위한 계층별 보안 구성 모범 사례 – 조이정, AWS 솔루션즈 아키텍트:: AWS 온라인 이벤트 – 클라우드 보안 특집AWS 네트워크 보안을 위한 계층별 보안 구성 모범 사례 – 조이정, AWS 솔루션즈 아키텍트:: AWS 온라인 이벤트 – 클라우드 보안 특집
AWS 네트워크 보안을 위한 계층별 보안 구성 모범 사례 – 조이정, AWS 솔루션즈 아키텍트:: AWS 온라인 이벤트 – 클라우드 보안 특집Amazon Web Services Korea
 
BEM it! Introduction to BEM
BEM it! Introduction to BEMBEM it! Introduction to BEM
BEM it! Introduction to BEMVarya Stepanova
 
AWS Summit Seoul 2023 | 데이터, 분석 및 AI를 통합하는 단 하나의 레이크하우스, Databricks on AWS 로 ...
AWS Summit Seoul 2023 | 데이터, 분석 및 AI를 통합하는 단 하나의 레이크하우스, Databricks on AWS 로 ...AWS Summit Seoul 2023 | 데이터, 분석 및 AI를 통합하는 단 하나의 레이크하우스, Databricks on AWS 로 ...
AWS Summit Seoul 2023 | 데이터, 분석 및 AI를 통합하는 단 하나의 레이크하우스, Databricks on AWS 로 ...Amazon Web Services Korea
 
CSS For Backend Developers
CSS For Backend DevelopersCSS For Backend Developers
CSS For Backend Developers10Clouds
 
AWS Connectivity, VPC Design and Security Pro Tips
AWS Connectivity, VPC Design and Security Pro TipsAWS Connectivity, VPC Design and Security Pro Tips
AWS Connectivity, VPC Design and Security Pro TipsShiva Narayanaswamy
 

What's hot (20)

Bem methodology
Bem methodologyBem methodology
Bem methodology
 
BEM - CSS, Seriously
BEM - CSS, SeriouslyBEM - CSS, Seriously
BEM - CSS, Seriously
 
Media queries A to Z
Media queries A to ZMedia queries A to Z
Media queries A to Z
 
What is Object Oriented CSS?
What is Object Oriented CSS?What is Object Oriented CSS?
What is Object Oriented CSS?
 
AWS S3 and GLACIER
AWS S3 and GLACIERAWS S3 and GLACIER
AWS S3 and GLACIER
 
Java beans
Java beansJava beans
Java beans
 
Css box-model
Css box-modelCss box-model
Css box-model
 
CSS3 Media Queries
CSS3 Media QueriesCSS3 Media Queries
CSS3 Media Queries
 
HTML5 introduction for beginners
HTML5 introduction for beginnersHTML5 introduction for beginners
HTML5 introduction for beginners
 
Azure SQL Database & Azure SQL Data Warehouse
Azure SQL Database & Azure SQL Data WarehouseAzure SQL Database & Azure SQL Data Warehouse
Azure SQL Database & Azure SQL Data Warehouse
 
Integrating your on-premises Active Directory with Azure and Office 365
Integrating your on-premises Active Directory with Azure and Office 365Integrating your on-premises Active Directory with Azure and Office 365
Integrating your on-premises Active Directory with Azure and Office 365
 
Css floats
Css floatsCss floats
Css floats
 
AWS 네트워크 보안을 위한 계층별 보안 구성 모범 사례 – 조이정, AWS 솔루션즈 아키텍트:: AWS 온라인 이벤트 – 클라우드 보안 특집
AWS 네트워크 보안을 위한 계층별 보안 구성 모범 사례 – 조이정, AWS 솔루션즈 아키텍트:: AWS 온라인 이벤트 – 클라우드 보안 특집AWS 네트워크 보안을 위한 계층별 보안 구성 모범 사례 – 조이정, AWS 솔루션즈 아키텍트:: AWS 온라인 이벤트 – 클라우드 보안 특집
AWS 네트워크 보안을 위한 계층별 보안 구성 모범 사례 – 조이정, AWS 솔루션즈 아키텍트:: AWS 온라인 이벤트 – 클라우드 보안 특집
 
BEM it! Introduction to BEM
BEM it! Introduction to BEMBEM it! Introduction to BEM
BEM it! Introduction to BEM
 
AWS Summit Seoul 2023 | 데이터, 분석 및 AI를 통합하는 단 하나의 레이크하우스, Databricks on AWS 로 ...
AWS Summit Seoul 2023 | 데이터, 분석 및 AI를 통합하는 단 하나의 레이크하우스, Databricks on AWS 로 ...AWS Summit Seoul 2023 | 데이터, 분석 및 AI를 통합하는 단 하나의 레이크하우스, Databricks on AWS 로 ...
AWS Summit Seoul 2023 | 데이터, 분석 및 AI를 통합하는 단 하나의 레이크하우스, Databricks on AWS 로 ...
 
Introduction to Docker on AWS
Introduction to Docker on AWSIntroduction to Docker on AWS
Introduction to Docker on AWS
 
Amazon EC2 Container Service
Amazon EC2 Container ServiceAmazon EC2 Container Service
Amazon EC2 Container Service
 
CSS For Backend Developers
CSS For Backend DevelopersCSS For Backend Developers
CSS For Backend Developers
 
CSS media types
CSS media typesCSS media types
CSS media types
 
AWS Connectivity, VPC Design and Security Pro Tips
AWS Connectivity, VPC Design and Security Pro TipsAWS Connectivity, VPC Design and Security Pro Tips
AWS Connectivity, VPC Design and Security Pro Tips
 

Similar to Our Best Practices Are Killing Us

Similar to Our Best Practices Are Killing Us (11)

JavaScript Secrets
JavaScript SecretsJavaScript Secrets
JavaScript Secrets
 
Presentatie trendwatcher Vincent Everts - Inspiratiedag e-tourism
Presentatie trendwatcher Vincent Everts - Inspiratiedag e-tourismPresentatie trendwatcher Vincent Everts - Inspiratiedag e-tourism
Presentatie trendwatcher Vincent Everts - Inspiratiedag e-tourism
 
E tourisme inspiratie dag presentatie
E tourisme inspiratie dag presentatieE tourisme inspiratie dag presentatie
E tourisme inspiratie dag presentatie
 
The facilities of Features Drupal module
The facilities of Features Drupal moduleThe facilities of Features Drupal module
The facilities of Features Drupal module
 
Envato Dev Ops - Alt.Net Melbourne
Envato Dev Ops - Alt.Net MelbourneEnvato Dev Ops - Alt.Net Melbourne
Envato Dev Ops - Alt.Net Melbourne
 
Future of digital presentation
Future of digital presentationFuture of digital presentation
Future of digital presentation
 
Future of digital presentation
Future of digital presentationFuture of digital presentation
Future of digital presentation
 
Building Your Business With Email Marketing
Building Your Business With Email MarketingBuilding Your Business With Email Marketing
Building Your Business With Email Marketing
 
Stackbox CMS: Next-Generation Content Management
Stackbox CMS: Next-Generation Content ManagementStackbox CMS: Next-Generation Content Management
Stackbox CMS: Next-Generation Content Management
 
Что нового в CSS3
Что нового в CSS3Что нового в CSS3
Что нового в CSS3
 
Ruby goes to hollywood
Ruby goes to hollywoodRuby goes to hollywood
Ruby goes to hollywood
 

More from Nicole Sullivan

Building the Media Block in ReactJS
Building the Media Block in ReactJS Building the Media Block in ReactJS
Building the Media Block in ReactJS Nicole Sullivan
 
Creating Living Style Guides to Improve Performance
Creating Living Style Guides to Improve PerformanceCreating Living Style Guides to Improve Performance
Creating Living Style Guides to Improve PerformanceNicole Sullivan
 
5 Mistakes of Massive CSS
5 Mistakes of Massive CSS5 Mistakes of Massive CSS
5 Mistakes of Massive CSSNicole Sullivan
 
The Cascade, Grids, Headings, and Selectors from an OOCSS Perspective, Ajax ...
The Cascade, Grids, Headings, and Selectors from an OOCSS Perspective,  Ajax ...The Cascade, Grids, Headings, and Selectors from an OOCSS Perspective,  Ajax ...
The Cascade, Grids, Headings, and Selectors from an OOCSS Perspective, Ajax ...Nicole Sullivan
 
The Fast And The Fabulous
The Fast And The FabulousThe Fast And The Fabulous
The Fast And The FabulousNicole Sullivan
 
Pourquoi la performance?
Pourquoi la performance?Pourquoi la performance?
Pourquoi la performance?Nicole Sullivan
 
7 Habits of Exceptional Performance
7 Habits of Exceptional Performance7 Habits of Exceptional Performance
7 Habits of Exceptional PerformanceNicole Sullivan
 

More from Nicole Sullivan (14)

Building the Media Block in ReactJS
Building the Media Block in ReactJS Building the Media Block in ReactJS
Building the Media Block in ReactJS
 
Why are you here?
Why are you here?Why are you here?
Why are you here?
 
Creating Living Style Guides to Improve Performance
Creating Living Style Guides to Improve PerformanceCreating Living Style Guides to Improve Performance
Creating Living Style Guides to Improve Performance
 
Don't feed the trolls
Don't feed the trollsDon't feed the trolls
Don't feed the trolls
 
CSS Power Tools
CSS Power ToolsCSS Power Tools
CSS Power Tools
 
5 Mistakes of Massive CSS
5 Mistakes of Massive CSS5 Mistakes of Massive CSS
5 Mistakes of Massive CSS
 
CSS Wish List @JSConf
CSS Wish List @JSConfCSS Wish List @JSConf
CSS Wish List @JSConf
 
The Cascade, Grids, Headings, and Selectors from an OOCSS Perspective, Ajax ...
The Cascade, Grids, Headings, and Selectors from an OOCSS Perspective,  Ajax ...The Cascade, Grids, Headings, and Selectors from an OOCSS Perspective,  Ajax ...
The Cascade, Grids, Headings, and Selectors from an OOCSS Perspective, Ajax ...
 
Taming CSS Selectors
Taming CSS SelectorsTaming CSS Selectors
Taming CSS Selectors
 
The Fast And The Fabulous
The Fast And The FabulousThe Fast And The Fabulous
The Fast And The Fabulous
 
Pourquoi la performance?
Pourquoi la performance?Pourquoi la performance?
Pourquoi la performance?
 
Design Fast Websites
Design Fast WebsitesDesign Fast Websites
Design Fast Websites
 
7 Habits of Exceptional Performance
7 Habits of Exceptional Performance7 Habits of Exceptional Performance
7 Habits of Exceptional Performance
 
After YSlow "A"
After YSlow "A"After YSlow "A"
After YSlow "A"
 

Recently uploaded

How Accurate are Carbon Emissions Projections?
How Accurate are Carbon Emissions Projections?How Accurate are Carbon Emissions Projections?
How Accurate are Carbon Emissions Projections?IES VE
 
Computer 10: Lesson 10 - Online Crimes and Hazards
Computer 10: Lesson 10 - Online Crimes and HazardsComputer 10: Lesson 10 - Online Crimes and Hazards
Computer 10: Lesson 10 - Online Crimes and HazardsSeth Reyes
 
Salesforce Miami User Group Event - 1st Quarter 2024
Salesforce Miami User Group Event - 1st Quarter 2024Salesforce Miami User Group Event - 1st Quarter 2024
Salesforce Miami User Group Event - 1st Quarter 2024SkyPlanner
 
UiPath Studio Web workshop series - Day 7
UiPath Studio Web workshop series - Day 7UiPath Studio Web workshop series - Day 7
UiPath Studio Web workshop series - Day 7DianaGray10
 
Nanopower In Semiconductor Industry.pdf
Nanopower  In Semiconductor Industry.pdfNanopower  In Semiconductor Industry.pdf
Nanopower In Semiconductor Industry.pdfPedro Manuel
 
Building Your Own AI Instance (TBLC AI )
Building Your Own AI Instance (TBLC AI )Building Your Own AI Instance (TBLC AI )
Building Your Own AI Instance (TBLC AI )Brian Pichman
 
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019IES VE
 
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCostKubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCostMatt Ray
 
Designing A Time bound resource download URL
Designing A Time bound resource download URLDesigning A Time bound resource download URL
Designing A Time bound resource download URLRuncy Oommen
 
Igniting Next Level Productivity with AI-Infused Data Integration Workflows
Igniting Next Level Productivity with AI-Infused Data Integration WorkflowsIgniting Next Level Productivity with AI-Infused Data Integration Workflows
Igniting Next Level Productivity with AI-Infused Data Integration WorkflowsSafe Software
 
Machine Learning Model Validation (Aijun Zhang 2024).pdf
Machine Learning Model Validation (Aijun Zhang 2024).pdfMachine Learning Model Validation (Aijun Zhang 2024).pdf
Machine Learning Model Validation (Aijun Zhang 2024).pdfAijun Zhang
 
COMPUTER 10: Lesson 7 - File Storage and Online Collaboration
COMPUTER 10: Lesson 7 - File Storage and Online CollaborationCOMPUTER 10: Lesson 7 - File Storage and Online Collaboration
COMPUTER 10: Lesson 7 - File Storage and Online Collaborationbruanjhuli
 
Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)Commit University
 
NIST Cybersecurity Framework (CSF) 2.0 Workshop
NIST Cybersecurity Framework (CSF) 2.0 WorkshopNIST Cybersecurity Framework (CSF) 2.0 Workshop
NIST Cybersecurity Framework (CSF) 2.0 WorkshopBachir Benyammi
 
Bird eye's view on Camunda open source ecosystem
Bird eye's view on Camunda open source ecosystemBird eye's view on Camunda open source ecosystem
Bird eye's view on Camunda open source ecosystemAsko Soukka
 
AI You Can Trust - Ensuring Success with Data Integrity Webinar
AI You Can Trust - Ensuring Success with Data Integrity WebinarAI You Can Trust - Ensuring Success with Data Integrity Webinar
AI You Can Trust - Ensuring Success with Data Integrity WebinarPrecisely
 
Building AI-Driven Apps Using Semantic Kernel.pptx
Building AI-Driven Apps Using Semantic Kernel.pptxBuilding AI-Driven Apps Using Semantic Kernel.pptx
Building AI-Driven Apps Using Semantic Kernel.pptxUdaiappa Ramachandran
 
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdf
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdf
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdfJamie (Taka) Wang
 

Recently uploaded (20)

201610817 - edge part1
201610817 - edge part1201610817 - edge part1
201610817 - edge part1
 
How Accurate are Carbon Emissions Projections?
How Accurate are Carbon Emissions Projections?How Accurate are Carbon Emissions Projections?
How Accurate are Carbon Emissions Projections?
 
Computer 10: Lesson 10 - Online Crimes and Hazards
Computer 10: Lesson 10 - Online Crimes and HazardsComputer 10: Lesson 10 - Online Crimes and Hazards
Computer 10: Lesson 10 - Online Crimes and Hazards
 
Salesforce Miami User Group Event - 1st Quarter 2024
Salesforce Miami User Group Event - 1st Quarter 2024Salesforce Miami User Group Event - 1st Quarter 2024
Salesforce Miami User Group Event - 1st Quarter 2024
 
20230104 - machine vision
20230104 - machine vision20230104 - machine vision
20230104 - machine vision
 
UiPath Studio Web workshop series - Day 7
UiPath Studio Web workshop series - Day 7UiPath Studio Web workshop series - Day 7
UiPath Studio Web workshop series - Day 7
 
Nanopower In Semiconductor Industry.pdf
Nanopower  In Semiconductor Industry.pdfNanopower  In Semiconductor Industry.pdf
Nanopower In Semiconductor Industry.pdf
 
Building Your Own AI Instance (TBLC AI )
Building Your Own AI Instance (TBLC AI )Building Your Own AI Instance (TBLC AI )
Building Your Own AI Instance (TBLC AI )
 
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
 
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCostKubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
 
Designing A Time bound resource download URL
Designing A Time bound resource download URLDesigning A Time bound resource download URL
Designing A Time bound resource download URL
 
Igniting Next Level Productivity with AI-Infused Data Integration Workflows
Igniting Next Level Productivity with AI-Infused Data Integration WorkflowsIgniting Next Level Productivity with AI-Infused Data Integration Workflows
Igniting Next Level Productivity with AI-Infused Data Integration Workflows
 
Machine Learning Model Validation (Aijun Zhang 2024).pdf
Machine Learning Model Validation (Aijun Zhang 2024).pdfMachine Learning Model Validation (Aijun Zhang 2024).pdf
Machine Learning Model Validation (Aijun Zhang 2024).pdf
 
COMPUTER 10: Lesson 7 - File Storage and Online Collaboration
COMPUTER 10: Lesson 7 - File Storage and Online CollaborationCOMPUTER 10: Lesson 7 - File Storage and Online Collaboration
COMPUTER 10: Lesson 7 - File Storage and Online Collaboration
 
Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)
 
NIST Cybersecurity Framework (CSF) 2.0 Workshop
NIST Cybersecurity Framework (CSF) 2.0 WorkshopNIST Cybersecurity Framework (CSF) 2.0 Workshop
NIST Cybersecurity Framework (CSF) 2.0 Workshop
 
Bird eye's view on Camunda open source ecosystem
Bird eye's view on Camunda open source ecosystemBird eye's view on Camunda open source ecosystem
Bird eye's view on Camunda open source ecosystem
 
AI You Can Trust - Ensuring Success with Data Integrity Webinar
AI You Can Trust - Ensuring Success with Data Integrity WebinarAI You Can Trust - Ensuring Success with Data Integrity Webinar
AI You Can Trust - Ensuring Success with Data Integrity Webinar
 
Building AI-Driven Apps Using Semantic Kernel.pptx
Building AI-Driven Apps Using Semantic Kernel.pptxBuilding AI-Driven Apps Using Semantic Kernel.pptx
Building AI-Driven Apps Using Semantic Kernel.pptx
 
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdf
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdf
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdf
 

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