Nicole Sullivan


THE FAST AND THE FABULOUS
WHY ARE YOU HERE?
IS CSS DESIGN OR
  ENGINEERING?
IS YOUR CSS FILE
GROWING LIKE A WEED?
GOOD NEWS
CSS and front-end architecture have a huge impact on
                   performance.
AND BAD
 NEWS




 If I don’t do my job right, I can slow your site down to a crawl
Web Dev Philosophy

• Work out of respect for the design.
• Designers make our code as beautiful and
  clever on the outsi...
WHAT COUNTS?
   toward fast design
PAGE WEIGHT
the heavier your page, the slower it will be
TOTAL REQUESTS
TOTAL REQUESTS
REQUIRED:


❖   Firefox
❖   Firebug
❖   http://OOCSS.org


               http://www.slideshare.net/stubbornella
WHAT IS OBJECT-ORIENTED
         CSS?
     A framework? A tool? A philosophy?
MORE LIKE AN EVOLUTION
  OF THE LANGUAGE
      it makes CSS more powerful
HOW IS IT DIFFERENT?


          ul{...}
       ul li{...}
     ul li a{...}
HOW IS IT DIFFERENT?


                        ul{...}
                     ul li{...}
                   ul li a{...}



...
HOW IS IT DIFFERENT?


                   ul{...}
                ul li{...}
              ul li a{...}



But, the archit...
“JAVASCRIPT DOESN’T SUCK
  You’re just doing it wrong.” -- Doug Crockford
“JAVASCRIPT DOESN’T SUCK
  You’re just doing it wrong.” -- Doug Crockford
CSS
“JAVASCRIPT DOESN’T SUCK
  You’re just doing it wrong.” -- Doug Crockford
CSS CIRCA 2005
    total spaghetti
CSS CIRCA 2008
    a little better
RATHER THAN MAKING
 OUR CODE PLAY NICE
      We built big fences
BUT FOR PERFORMANCE?
SITES GET SLOW
As file size and HTTP requests are not optimized
CSS CIRCA 2009
OBJECT ORIENTED CSS




         best practices for performance,
        scalability, and most importantly,
              ...
9 BEST PRACTICES
1. Component library: reuse    5. Be Flexible
   and redundancy
                               6. Learn t...
LEARN MORE
 designing fast websites
LEARN MORE
    image optimization




Even Faster Webistes with Stoyan Stefanov
CREATE A COMPONENT
       LIBRARY
      of reusable “legos”
REUSING ELEMENTS
   MAKES THEM
    performance “freebies”
COMPONENTS
ARE LIKE LEGO
  Mix and match to create
diverse and interesting pages.
BUILD HTML FROM THE
COMPONENT LIBRARY.
New pages should not generally require additional CSS
Heading Level 1
                                Heading Level 2
   HEADINGS                     Heading Level 3
Getting th...
Default List   ‣   Toggle List
                               List Item 2    ‣   List Item 2
                             ...
SITE-WIDE LEGOS
❖   Headings
❖   Lists (e.g. action list, external link list, product list, or
    feature list)
❖   Modul...
AVOID DUPLICATION
Wasting performance resources on components that can’t add
                          value.
NEARLY
 IDENTICAL
  MODULES
Headings 3 and 5 are too
         similar.
Rule of thumb:
If two modules look too similar to include on
the same page, they are too similar to include
together in a ...
HOW ABOUT
AN EXAMPLE?
Yahoo! Personal Finance
2+ DIFFERENT
TAB STYLES.
COULD THEY
USE THE SAME
IMAGES?
3 contour
components are
too similar. Chose
one.
Changes in module
width, background
color, or background
image are an excellent
example of module
reuse.
AVOID LOCATION-
DEPENDENT STYLES
 Sandboxing is better than spaghetti,
 but leads to performance problems
AVOID WHAT?
FUNCTION AREA()
FUNCTION AREA()
FUNCTION AREA()
EVERY NOW AND THEN...
RETURNED DIAMETER
BROKEN.
IN CSS WE DO THIS
   ALL THE TIME
BROKEN.
A   Heading should not become a          Heading

          in another part of the page.
AVOID
                          EXAMPLE
             #weatherModule h3{color:red;}
             #tabs h3{color:blue}


❖  ...
AVOID
                          EXAMPLE
             h3{color:black;}
             #weatherModule h3{color:red;}
         ...
CONSISTENCY
    Writing more rules to
overwrite the crazy rules from
           before.

 e.g. Heading should behave
 pred...
TRY THIS INSTEAD
                        h1,    .h1{...}
                        h2,    .h2{...}
                        h...
NEED MORE THAN 6
   HEADINGS?
 Really? Any duplicates? Any too similar?
STILL NEED MORE
                HEADINGS?
           .category{...}
           .section{...}
           .product{...}
    ...
ABSTRACT
reusable bits of code
person-man-photographer          person-woman-photographer




      REPETITION OF CODE
   caused by a failure to abstract...
SEPARATE:


❖   Container and Content
❖   Structure and Skin
❖   Contour and Background
❖   Objects and Mixins
SEPARATE CONTAINER
   AND CONTENT
  define the boundaries of each object
Media
           Subheading
           Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor inc...
image
or flash   OPEN EDITABLE ZONE
Contour blocks       Background blocks       Content Objects -
                                         headings, paragrap...
MIX AND MATCH
Container and content objects to achieve high performance
                         design.
SEPARATE CONTOUR AND
     BACKGROUND
     transparent on the Inside!
MAKING IT
              LOOK FAB
         Requires careful choice of
                  pixels.



        Bonus: Consider ...
PITFALLS
Variable or gradient
   backgrounds.
SEPARATE STRUCTURE
    FROM SKIN
     two separate classes
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed
do eiusmod tempor incididunt ut labore et dolore magna
aliqu...
mod
                                   block
                                      inner
                                 ...
mod
                                   block
                                      inner
                                 ...
mod complex
 mod complex
mod pop
SKIN
      Makes it pretty.

 The goal is very predictable
skins, complexity is absorbed
 by the structure object and
    ...
/* ----- simple (extends mod) ----- */
.simple .inner {
   border:1px solid gray;
   -moz-border-radius: 7px;
   -webkit-b...
WHAT BELONGS IN THE
           SKIN?

Every value in the skin should be predictable, something that
can easily be calculat...
BE FLEXIBLE
Extensible height and width.
Grids
control the
  width
Content
controls
 height
FIXED DIMENSIONS
limit the ways in which a module can be reused
LEARN TO LOVE GRIDS
   and believe they can be beautiful
GRIDS < 1K


❖   13 tiny lines of code
❖   Simple syntax
❖   Easy (even for beginners) to create complex layouts
❖   Infini...
HTML

line



   unit 1/4     unit 3/4 lastUnit
HTML



unit 1/4    unit 3/4 lastUnit
(1) .line, .lastUnit {overflow: hidden;
     _overflow: visible; _zoom: 1;}
(2) .unit{float: left; _zoom: 1;}
(3) .size1of...
digital mash
Jason Santa Maria
Jason Santa Maria
Jason Santa Maria
Jason Santa Maria
fluid 960 grid system
OUTCOMES
If the theory is right, it should yield better results.
TEMPLATE


• 807   bytes

• 13   lines of code

• easily
      extended to custom
 page and column width
GRIDS
•   574 bytes

•   14 lines of code

•   Percentage widths adapt to
    different page sizes

•   Includes halfs, th...
MODULE

• 1.3K   (structure)

• 22   lines of code

• Width    and height agnostic

• Three   structures

• 264 different ...
YOUR TURN!
 Modify the template
http://wiki.github.com/stubbornella/oocss
1. Remove right column




http://wiki.github.com/stubbornella/oocss
1. Remove right column



 2. Change left
 column width
    to 300px


http://wiki.github.com/stubbornella/oocss
1. Remove right column



 2. Change left
 column width
    to 300px
                             3. Save as myPage.html

...
hint: simply delete
  hint: add one                             the right column
 class to the left
                      ...
http://wiki.github.com/stubbornella/oocss/grids
1. Add four 1/4 grids inside the main column



                   1/4        1/4       1/4       1/4




http://wiki.gith...
hint: copy grids from
                                       the docs and modify
                                      the...
http://wiki.github.com/stubbornella/oocss/module
1. Insert “grab” module in each unit




http://wiki.github.com/stubbornella/oocss/module
1. Insert “grab” module in each unit




          2. Change modules to grab,
         onlinestore, faq, and about
http://...
1. Change block headers to baz,
    online, help, and info
1. Remove left
    column
1. Paste popup_html.txt after the foot
1. Paste popup_html.txt after the foot




2. In mod_skins.css, create a new rounded corner
   box called gblock which inh...
LET’S KEEP TALKING...
                http://stubbornella.org
               nicole@stubbornella.org
            “stubborn...
The Fast And The Fabulous
The Fast And The Fabulous
The Fast And The Fabulous
The Fast And The Fabulous
The Fast And The Fabulous
The Fast And The Fabulous
The Fast And The Fabulous
Upcoming SlideShare
Loading in...5
×

The Fast And The Fabulous

10,194

Published on

You've got a sneaking suspicion that design impacts performance. What next? Your engineers know nothing about design and your designers know nothing about performance. How can you get everyone on the same page? Which design flaws must you absolutely avoid? How do engineers slow designs with poor CSS? This presentation covers the best practices in design and OO CSS for fast, maintainable sites.

* Abstraction
* Flexibility
* Grids
* Location dependent styles

Velocity Conference, 2009

Published in: Technology, Design
4 Comments
66 Likes
Statistics
Notes
No Downloads
Views
Total Views
10,194
On Slideshare
0
From Embeds
0
Number of Embeds
6
Actions
Shares
0
Downloads
0
Comments
4
Likes
66
Embeds 0
No embeds

No notes for slide

Transcript of "The Fast And The Fabulous"

  1. 1. Nicole Sullivan THE FAST AND THE FABULOUS
  2. 2. WHY ARE YOU HERE?
  3. 3. IS CSS DESIGN OR ENGINEERING?
  4. 4. IS YOUR CSS FILE GROWING LIKE A WEED?
  5. 5. GOOD NEWS CSS and front-end architecture have a huge impact on performance.
  6. 6. AND BAD NEWS If I don’t do my job right, I can slow your site down to a crawl
  7. 7. Web Dev Philosophy • Work out of respect for the design. • Designers make our code as beautiful and clever on the outside as it is on the inside. • Respect the original design vision. consistent design = clean code = fast site.
  8. 8. WHAT COUNTS? toward fast design
  9. 9. PAGE WEIGHT the heavier your page, the slower it will be
  10. 10. TOTAL REQUESTS
  11. 11. TOTAL REQUESTS
  12. 12. REQUIRED: ❖ Firefox ❖ Firebug ❖ http://OOCSS.org http://www.slideshare.net/stubbornella
  13. 13. WHAT IS OBJECT-ORIENTED CSS? A framework? A tool? A philosophy?
  14. 14. MORE LIKE AN EVOLUTION OF THE LANGUAGE it makes CSS more powerful
  15. 15. HOW IS IT DIFFERENT? ul{...} ul li{...} ul li a{...}
  16. 16. HOW IS IT DIFFERENT? ul{...} ul li{...} ul li a{...} Until now, we focused all our effort here
  17. 17. HOW IS IT DIFFERENT? ul{...} ul li{...} ul li a{...} But, the architecture lives here
  18. 18. “JAVASCRIPT DOESN’T SUCK You’re just doing it wrong.” -- Doug Crockford
  19. 19. “JAVASCRIPT DOESN’T SUCK You’re just doing it wrong.” -- Doug Crockford
  20. 20. CSS “JAVASCRIPT DOESN’T SUCK You’re just doing it wrong.” -- Doug Crockford
  21. 21. CSS CIRCA 2005 total spaghetti
  22. 22. CSS CIRCA 2008 a little better
  23. 23. RATHER THAN MAKING OUR CODE PLAY NICE We built big fences
  24. 24. BUT FOR PERFORMANCE?
  25. 25. SITES GET SLOW As file size and HTTP requests are not optimized
  26. 26. CSS CIRCA 2009
  27. 27. OBJECT ORIENTED CSS best practices for performance, scalability, and most importantly, ease of use.
  28. 28. 9 BEST PRACTICES 1. Component library: reuse 5. Be Flexible and redundancy 6. Learn to love grids 2. Consistency: Avoid location-dependent styles 7. Avoid non-standard browser fonts 3. Abstraction 8. Avoid height alignment 4. Optimize images and sprites 9. Choose your bling carefully
  29. 29. LEARN MORE designing fast websites
  30. 30. LEARN MORE image optimization Even Faster Webistes with Stoyan Stefanov
  31. 31. CREATE A COMPONENT LIBRARY of reusable “legos”
  32. 32. REUSING ELEMENTS MAKES THEM performance “freebies”
  33. 33. COMPONENTS ARE LIKE LEGO Mix and match to create diverse and interesting pages.
  34. 34. BUILD HTML FROM THE COMPONENT LIBRARY. New pages should not generally require additional CSS
  35. 35. Heading Level 1 Heading Level 2 HEADINGS Heading Level 3 Getting the look and feel you want with the semantics you Heading Level 4 need. Heading Level 5 Heading Level 6
  36. 36. Default List ‣ Toggle List List Item 2 ‣ List Item 2 List Item 3 ‣ List Item 3 LISTS ❖ Action List ❖ List Item 2 Should be available to all ❖ List Item 3 modules on the page.
  37. 37. SITE-WIDE LEGOS ❖ Headings ❖ Lists (e.g. action list, external link list, product list, or feature list) ❖ Module headers and footers ❖ Grids ❖ Buttons ❖ Rounded corner boxes ❖ Tabs, Carousel, toggle blocks
  38. 38. AVOID DUPLICATION Wasting performance resources on components that can’t add value.
  39. 39. NEARLY IDENTICAL MODULES Headings 3 and 5 are too similar.
  40. 40. Rule of thumb: If two modules look too similar to include on the same page, they are too similar to include together in a site, choose one!
  41. 41. HOW ABOUT AN EXAMPLE? Yahoo! Personal Finance
  42. 42. 2+ DIFFERENT TAB STYLES. COULD THEY USE THE SAME IMAGES?
  43. 43. 3 contour components are too similar. Chose one.
  44. 44. Changes in module width, background color, or background image are an excellent example of module reuse.
  45. 45. AVOID LOCATION- DEPENDENT STYLES Sandboxing is better than spaghetti, but leads to performance problems
  46. 46. AVOID WHAT?
  47. 47. FUNCTION AREA()
  48. 48. FUNCTION AREA()
  49. 49. FUNCTION AREA()
  50. 50. EVERY NOW AND THEN...
  51. 51. RETURNED DIAMETER
  52. 52. BROKEN.
  53. 53. IN CSS WE DO THIS ALL THE TIME
  54. 54. BROKEN.
  55. 55. A Heading should not become a Heading in another part of the page.
  56. 56. AVOID EXAMPLE #weatherModule h3{color:red;} #tabs h3{color:blue} ❖ Global color undefined for h3, so it will be ‣ unstyled in new modules, ‣ developers forced to write more CSS for the same style
  57. 57. AVOID EXAMPLE h3{color:black;} #weatherModule h3{color:red;} #tabs h3{color:blue} ❖ Global color defined (better!) ❖ Weather and tabs override default h3 ‣ three styles for h3 cannot co-exist in the same module ‣ default style cannot be used in weather and tabs without costly overrides ❖ Weather and tabs h3 can never be used outside of those modules
  58. 58. CONSISTENCY Writing more rules to overwrite the crazy rules from before. e.g. Heading should behave predictably in any module.
  59. 59. TRY THIS INSTEAD h1, .h1{...} h2, .h2{...} h3, .h3{...} h4, .h4{...} h5, .h5{...} h6, .h6{...} ❖ Global values defined ❖ Semantics respected (while allowing visual flexibility)
  60. 60. NEED MORE THAN 6 HEADINGS? Really? Any duplicates? Any too similar?
  61. 61. STILL NEED MORE HEADINGS? .category{...} .section{...} .product{...} .prediction{...} ❖ Extend the heading object via a class on the object itself ❖ Avoid using the cascade to change display of nested objects
  62. 62. ABSTRACT reusable bits of code
  63. 63. person-man-photographer person-woman-photographer REPETITION OF CODE caused by a failure to abstract different levels of semantics
  64. 64. SEPARATE: ❖ Container and Content ❖ Structure and Skin ❖ Contour and Background ❖ Objects and Mixins
  65. 65. SEPARATE CONTAINER AND CONTENT define the boundaries of each object
  66. 66. Media Subheading Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. image or flash OPEN EDITABLE ZONE
  67. 67. image or flash OPEN EDITABLE ZONE
  68. 68. 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
  69. 69. MIX AND MATCH Container and content objects to achieve high performance design.
  70. 70. SEPARATE CONTOUR AND BACKGROUND transparent on the Inside!
  71. 71. MAKING IT LOOK FAB Requires careful choice of pixels. Bonus: Consider PNG8 for progressive enhancement http://alistapart.com/articles/mountaintop/
  72. 72. PITFALLS Variable or gradient backgrounds.
  73. 73. SEPARATE STRUCTURE FROM SKIN two separate classes
  74. 74. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. EXAMPLE: MODULE
  75. 75. mod block inner hd STRUCTURE Solves browser bugs, positions bd presentational elems, and generally does the heavy lifting of CSS. ft
  76. 76. mod block inner hd STRUCTURE Solves browser bugs, positions bd presentational elems, and generally does the heavy lifting of CSS. ft
  77. 77. mod complex mod complex
  78. 78. mod pop
  79. 79. SKIN Makes it pretty. The goal is very predictable skins, complexity is absorbed by the structure object and shared across the site.
  80. 80. /* ----- 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); } Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu
  81. 81. WHAT BELONGS IN THE SKIN? Every value in the skin should be predictable, something that can easily be calculated or measured. Colors Borders Images
  82. 82. BE FLEXIBLE Extensible height and width.
  83. 83. Grids control the width
  84. 84. Content controls height
  85. 85. FIXED DIMENSIONS limit the ways in which a module can be reused
  86. 86. LEARN TO LOVE GRIDS and believe they can be beautiful
  87. 87. GRIDS < 1K ❖ 13 tiny lines of code ❖ Simple syntax ❖ Easy (even for beginners) to create complex layouts ❖ Infinite nesting and stacking http://wiki.github.com/stubbornella/oocss/grids
  88. 88. HTML line unit 1/4 unit 3/4 lastUnit
  89. 89. HTML unit 1/4 unit 3/4 lastUnit
  90. 90. (1) .line, .lastUnit {overflow: hidden; _overflow: visible; _zoom: 1;} (2) .unit{float: left; _zoom: 1;} (3) .size1of1{float:none;} (4) .size1of2{width:50%;} (5) .size1of3{width:33.33333%;} (6) .size2of3{width:66.66666%;} (7) .size1of4{width:25%;} (8) .size3of4{width:75%;} (9) .size1of5{width:20%;} (10) .size2of5{width:40%;} (11) .size3of5{width:60%;} (12) .size4of5{width:80%;} (13) .lastUnit {float:none; _position: relative; _left:-3px; _margin-right: -3px;width:auto;}
  91. 91. digital mash
  92. 92. Jason Santa Maria
  93. 93. Jason Santa Maria
  94. 94. Jason Santa Maria
  95. 95. Jason Santa Maria
  96. 96. fluid 960 grid system
  97. 97. OUTCOMES If the theory is right, it should yield better results.
  98. 98. TEMPLATE • 807 bytes • 13 lines of code • easily extended to custom page and column width
  99. 99. GRIDS • 574 bytes • 14 lines of code • Percentage widths adapt to different page sizes • Includes halfs, thirds, fourths, and fifths • No gutters • Infinite nesting and stacking
  100. 100. MODULE • 1.3K (structure) • 22 lines of code • Width and height agnostic • Three structures • 264 different combos of skins
  101. 101. YOUR TURN! Modify the template
  102. 102. http://wiki.github.com/stubbornella/oocss
  103. 103. 1. Remove right column http://wiki.github.com/stubbornella/oocss
  104. 104. 1. Remove right column 2. Change left column width to 300px http://wiki.github.com/stubbornella/oocss
  105. 105. 1. Remove right column 2. Change left column width to 300px 3. Save as myPage.html http://wiki.github.com/stubbornella/oocss
  106. 106. hint: simply delete hint: add one the right column class to the left 1. Remove right column column 2. Change left column width to 300px 3. Save as myPage.html http://wiki.github.com/stubbornella/oocss
  107. 107. http://wiki.github.com/stubbornella/oocss/grids
  108. 108. 1. Add four 1/4 grids inside the main column 1/4 1/4 1/4 1/4 http://wiki.github.com/stubbornella/oocss/grids
  109. 109. hint: copy grids from the docs and modify the size and number of units 1. Add four 1/4 grids inside the main column 1/4 1/4 1/4 1/4 http://wiki.github.com/stubbornella/oocss/grids
  110. 110. http://wiki.github.com/stubbornella/oocss/module
  111. 111. 1. Insert “grab” module in each unit http://wiki.github.com/stubbornella/oocss/module
  112. 112. 1. Insert “grab” module in each unit 2. Change modules to grab, onlinestore, faq, and about http://wiki.github.com/stubbornella/oocss/module
  113. 113. 1. Change block headers to baz, online, help, and info
  114. 114. 1. Remove left column
  115. 115. 1. Paste popup_html.txt after the foot
  116. 116. 1. Paste popup_html.txt after the foot 2. In mod_skins.css, create a new rounded corner box called gblock which inherits from pop
  117. 117. LET’S KEEP TALKING... http://stubbornella.org nicole@stubbornella.org “stubbornella” on the web... twitter, dopplr, slideshare, everywhere... http://github.com/stubbornella/oocss/ http://groups.google.com/group/object-oriented-css

×