OBJECT-ORIENTED CSS
                        for High Performance Websites and Applications




                           ...
GOOD NEWS
                CSS and front-end architecture have a huge impact on
                                   performa...
AND BAD
  NEWS




              If I don’t do my job right, I can slow your site down to a crawl
Wednesday, April 29, 2009
REQUIRE EXPERT ABILITY
               JUST TO GET STARTED.
                            this is not a sign of maturity.



...
FILE SIZE JUST KEEPS
                          GETTING BIGGER
                   As the site evolves we continuously modif...
CODE RE-USE IS ALMOST
              NONEXISTENT
                            people don’t trust other developers code.




...
CODE IS TOO FRAGILE.
       Even the cleanest code gets ruined by the first non-expert to
                                 ...
WHAT IS THE MOST
                 IMPORTANT MISTAKE
                TALENTED CODERS ARE
                      MAKING?
    ...
THE SIZE OF THEIR CSS
                     WILL INCREASE
            in a 1:1 relationship with the number of blocks, page...
“JAVASCRIPT DOESN’T SUCK
                            You’re just doing it wrong.” -- Doug Crockford




Wednesday, April 2...
“JAVASCRIPT DOESN’T SUCK
                            You’re just doing it wrong.” -- Doug Crockford




Wednesday, April 2...
CSS
         “JAVASCRIPT DOESN’T SUCK
                            You’re just doing it wrong.” -- Doug Crockford




Wedne...
O(n)
                            Natural to you, but not to designers.




Wednesday, April 29, 2009
CALCULATING
                            COMPLEXITY IN CSS
                              All solutions are not created equa...
FRONT END ARCHITECTURE
       NEEDS TO BE RIGHT
             Even best practices, like CSS sprites, can have unintended
  ...
WHOA!




Wednesday, April 29, 2009
Wednesday, April 29, 2009
Wednesday, April 29, 2009
LET’S SORT THIS OUT.
               In what ways have the solutions introduced complexity?




Wednesday, April 29, 2009
4x HTTP
               REQUESTS
          Four images where one is
                  enough




Wednesday, April 29, 2009
4x HTTP
               REQUESTS
          Four images where one is
                  enough




Wednesday, April 29, 2009
1x HTTP
                 REQUEST
       because background color is
           tied to border color




       2x CSS CODE...
1x HTTP
                 REQUEST
       because background color is
           tied to border color




       2x CSS CODE...
EXTRA
                    WEIGHT
           because sprites duplicate
                iconography




       2x CSS CODE
 ...
EXTRA
                    WEIGHT
           because sprites duplicate
                iconography




       2x CSS CODE
 ...
EXTRA
                    WEIGHT
    because sprites include text as
               images




             EXTRA CSS
    ...
EXTRA
                    WEIGHT
    because sprites include text as
               images




             EXTRA CSS
    ...
3 METRICS


    1. HTTP requests

    2. Size of images

    3. Size of the CSS




Wednesday, April 29, 2009
OBJECT-ORIENTED CSS
                       CAN HELP




Wednesday, April 29, 2009
CREATE A COMPONENT
                     LIBRARY
                            of reusable “legos”




Wednesday, April 29, 2...
SEPARATE CONTAINER
                     AND CONTENT




Wednesday, April 29, 2009
Contour blocks               Background blocks       Content Objects -
                                                   ...
EXTEND OBJECTS: APPLY
               MULTIPLE CLASSES




Wednesday, April 29, 2009
MEDIA
                            Extending objects, a simple
                                    example.


Wednesday, Ap...
<!-- media -->
<div class=quot;media mediaExtquot;>
  <img class=quot;fixedMediaquot; src=quot;myImg.pngquot; />

 <div cl...
SEPARATE STRUCTURE
                         FROM SKIN
                            two separate classes




Wednesday, Apri...
block
                                          inner
                                                  hd



          ST...
SKIN
                        Makes it pretty.

       The goal is very predictable
      skins, complexity is absorbed
   ...
/* ----- simple (extends mod) ----- */
  .simple .inner {
     border:1px solid gray;
     -moz-border-radius: 7px;
     -...
AVOID LOCATION
                            DEPENDENT STYLES
                              to keep CSS file size in check


...
Heading should not become a
                            A                                       Heading

                 ...
CONSISTENCY
          Writing more rules to
      overwrite the crazy rules from
                 before.

          e.g. ...
#weatherModule h2{...}
                            #weatherModule h3{...}
                            #weatherModule p{......
DEMO
Wednesday, April 29, 2009
PHOTO CREDITS


    • “South                Carolina” by Army.Mil

    • “So          Happy Together” by kalandrakas

    ...
PHOTO CREDITS

        “You Crack Me Up” by http://flickr.com/photos/nickwheeleroz/2474196275/in/photostream/
    •

      ...
LET’S KEEP TALKING...
                                       http://stubbornella.org
                              http://...
Upcoming SlideShare
Loading in …5
×

Object Oriented Css For High Performance Websites And Applications

3,767 views
3,699 views

Published on

Published in: Technology, Education
0 Comments
12 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
3,767
On SlideShare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
247
Comments
0
Likes
12
Embeds 0
No embeds

No notes for slide

Object Oriented Css For High Performance Websites And Applications

  1. 1. OBJECT-ORIENTED CSS for High Performance Websites and Applications Nicole Sullivan Wednesday, April 29, 2009
  2. 2. GOOD NEWS CSS and front-end architecture have a huge impact on performance. Wednesday, April 29, 2009
  3. 3. AND BAD NEWS If I don’t do my job right, I can slow your site down to a crawl Wednesday, April 29, 2009
  4. 4. REQUIRE EXPERT ABILITY JUST TO GET STARTED. this is not a sign of maturity. Wednesday, April 29, 2009
  5. 5. FILE SIZE JUST KEEPS GETTING BIGGER As the site evolves we continuously modify the CSS. Wednesday, April 29, 2009
  6. 6. CODE RE-USE IS ALMOST NONEXISTENT people don’t trust other developers code. Wednesday, April 29, 2009
  7. 7. CODE IS TOO FRAGILE. Even the cleanest code gets ruined by the first non-expert to touch it. Wednesday, April 29, 2009
  8. 8. WHAT IS THE MOST IMPORTANT MISTAKE TALENTED CODERS ARE MAKING? Writing really clever modules. Wednesday, April 29, 2009
  9. 9. THE SIZE OF THEIR CSS WILL INCREASE in a 1:1 relationship with the number of blocks, pages, and complexity of content. Wednesday, April 29, 2009
  10. 10. “JAVASCRIPT DOESN’T SUCK You’re just doing it wrong.” -- Doug Crockford Wednesday, April 29, 2009
  11. 11. “JAVASCRIPT DOESN’T SUCK You’re just doing it wrong.” -- Doug Crockford Wednesday, April 29, 2009
  12. 12. CSS “JAVASCRIPT DOESN’T SUCK You’re just doing it wrong.” -- Doug Crockford Wednesday, April 29, 2009
  13. 13. O(n) Natural to you, but not to designers. Wednesday, April 29, 2009
  14. 14. CALCULATING COMPLEXITY IN CSS All solutions are not created equal Wednesday, April 29, 2009
  15. 15. FRONT END ARCHITECTURE NEEDS TO BE RIGHT Even best practices, like CSS sprites, can have unintended consequences. Wednesday, April 29, 2009
  16. 16. WHOA! Wednesday, April 29, 2009
  17. 17. Wednesday, April 29, 2009
  18. 18. Wednesday, April 29, 2009
  19. 19. LET’S SORT THIS OUT. In what ways have the solutions introduced complexity? Wednesday, April 29, 2009
  20. 20. 4x HTTP REQUESTS Four images where one is enough Wednesday, April 29, 2009
  21. 21. 4x HTTP REQUESTS Four images where one is enough Wednesday, April 29, 2009
  22. 22. 1x HTTP REQUEST because background color is tied to border color 2x CSS CODE because structure is duplicated for both Wednesday, April 29, 2009
  23. 23. 1x HTTP REQUEST because background color is tied to border color 2x CSS CODE because structure is duplicated for both Wednesday, April 29, 2009
  24. 24. EXTRA WEIGHT because sprites duplicate iconography 2x CSS CODE because the two cannot share the same CSS Wednesday, April 29, 2009
  25. 25. EXTRA WEIGHT because sprites duplicate iconography 2x CSS CODE because the two cannot share the same CSS Wednesday, April 29, 2009
  26. 26. EXTRA WEIGHT because sprites include text as images EXTRA CSS because each button requires its own CSS Wednesday, April 29, 2009
  27. 27. EXTRA WEIGHT because sprites include text as images EXTRA CSS because each button requires its own CSS Wednesday, April 29, 2009
  28. 28. 3 METRICS 1. HTTP requests 2. Size of images 3. Size of the CSS Wednesday, April 29, 2009
  29. 29. OBJECT-ORIENTED CSS CAN HELP Wednesday, April 29, 2009
  30. 30. CREATE A COMPONENT LIBRARY of reusable “legos” Wednesday, April 29, 2009
  31. 31. SEPARATE CONTAINER AND CONTENT Wednesday, April 29, 2009
  32. 32. Contour blocks Background blocks Content Objects - headings, paragraphs, lists, headers, footers, buttons, etc. Capital of the Canterbury region and the largest city on the South Island (population just over 300,000) exudes a palpable air of gentility and a connectedness with the mother country. Read more... X X 1:n Wednesday, April 29, 2009
  33. 33. EXTEND OBJECTS: APPLY MULTIPLE CLASSES Wednesday, April 29, 2009
  34. 34. MEDIA Extending objects, a simple example. Wednesday, April 29, 2009
  35. 35. <!-- media --> <div class=quot;media mediaExtquot;> <img class=quot;fixedMediaquot; src=quot;myImg.pngquot; /> <div class=quot;bodyquot;> ... </div> </div> Wednesday, April 29, 2009
  36. 36. SEPARATE STRUCTURE FROM SKIN two separate classes Wednesday, April 29, 2009
  37. 37. block inner hd STRUCTURE Solves browser bugs, positions bd presentational elems, and generally does the heavy lifting of CSS. ft Wednesday, April 29, 2009
  38. 38. SKIN Makes it pretty. The goal is very predictable skins, complexity is absorbed by the structure object and shared across the site. Wednesday, April 29, 2009
  39. 39. /* ----- simple (extends mod) ----- */ .simple .inner { border:1px solid gray; -moz-border-radius: 7px; -webkit-border-radius: 7px; border-radius: 7px; } .simple b{ *background-image:url(skin/mod/corners.png); } Wednesday, April 29, 2009
  40. 40. AVOID LOCATION DEPENDENT STYLES to keep CSS file size in check Wednesday, April 29, 2009
  41. 41. Heading should not become a A Heading in another part of the page. Wednesday, April 29, 2009
  42. 42. CONSISTENCY Writing more rules to overwrite the crazy rules from before. e.g. Heading should behave predictably in any module. Wednesday, April 29, 2009
  43. 43. #weatherModule h2{...} #weatherModule h3{...} #weatherModule p{...} #tabs h2{...} #tabs h3{...} #tabs p{...} +1 FOR MODULARITY, BUT STILL BROKEN Wednesday, April 29, 2009
  44. 44. DEMO Wednesday, April 29, 2009
  45. 45. PHOTO CREDITS • “South Carolina” by Army.Mil • “So Happy Together” by kalandrakas • “sometimes, a hug is all what we need” by kalandrakas Wednesday, April 29, 2009
  46. 46. PHOTO CREDITS “You Crack Me Up” by http://flickr.com/photos/nickwheeleroz/2474196275/in/photostream/ • “red lego” by http://flickr.com/photos/niznoz/5753993/ • “Pablo’s cubism period began at three” by http://flickr.com/photos/wwworks/2475349116/in/ • set-72157608035966422/ “Kuwait water tower” by http://flickr.com/photos/asam/327911794/ • idigit_teddy: http://www.flickr.com/photos/design_inspiration/238542495/ • lucianvenutian: http://www.flickr.com/photos/lucianvenutian/1142630637/ • Gimli_36: http://www.flickr.com/photos/navillot/1878124531/ • NathanFromDeVryEET: http://www.flickr.com/photos/thatguyfromcchs08/2300190277/ • Stabilo Boss: http://flickr.com/photos/stabilo-boss/101793494/in/set-72057594060779001/ • Wednesday, April 29, 2009
  47. 47. LET’S KEEP TALKING... http://stubbornella.org http://github.com/stubbornella/oocss/ nicole@stubbornella.org “stubbornella” on the web... twitter, dopplr, slideshare, everywhere... Wednesday, April 29, 2009

×