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,
              ...
1. Create objects rather than pages or modules
2. Set good global defaults on content objects
3. Abstract reusable element...
CREATE OBJECTS
 rather than pages or modules
SET GOOD GLOBAL
    DEFAULTS?
  for standard content objects
ABSTRACT REUSABLE
    ELEMENTS?
to allow maximum scalability, and less code
Contour blocks       Background blocks       Content Objects -
                                         headings, paragrap...
TAME THE CASCADE
Apply classes to the object we wish to extend, rather than
           random parent nodes. Predictability!
TAMING THE CASCADE


❖   Within any one object use the cascade fully
❖   All sub-nodes of an object should be prefaced wit...
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
USE MULTIPLE CLASSES?
      to simulate inheritance
Media
                     Subheading
                     Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed d...
<!-- media -->
<div class=quot;media mediaExtquot;>
  <img class=quot;fixedMediaquot; src=quot;myImg.pngquot; />

 <div cl...
SEPARATE STRUCTURE
    FROM SKIN
     two separate classes
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...
WHAT NOT TO DO!
inappropriate dependence on the cascade is not object
                     oriented.
LOCATION DEPENDENT
       STYLES
        avoid!
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
                  CODE EXAMPLE
             #weatherModule h3{color:red;}
             #tabs h3{color:blue}


❖   Gl...
AVOID
                  CODE 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{...}
    ...
CALCULATING
COMPLEXITY IN CSS
  All solutions are not created equal
O(n)
Natural to you, but not to designers.
FRONT END ARCHITECTURE
   NEEDS TO BE RIGHT
 Even best practices, like CSS sprites, can have unintended
                  ...
3 METRICS


1. HTTP requests

2. Size of images

3. Size of the CSS
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 ...
JS COMMUNITY
 How to remain JS lib agnostic?
      DHTML objects?
   Easily adding behaviors?
     Trigger parameters?
FLICKR PHOTO CREDITS
❖   “spaghetti con salsa de tomate y carne + albahaca” by pablovenegas
❖   “Jenga” by j3ku (3 photos,...
LET’S KEEP TALKING


❖   “Stubbornella” on the web. Twitter, doppler, everywhere...
❖   http://stubbornella.org
❖   nicole...
What is Object Oriented CSS?
What is Object Oriented CSS?
What is Object Oriented CSS?
What is Object Oriented CSS?
Upcoming SlideShare
Loading in …5
×

What is Object Oriented CSS?

39,399 views

Published on

More on Object Oriented CSS at the Silicon Valley JavaScript Meet Up. How to extend objects, avoiding location dependent styles, and best practices for fast sites.

Published in: Technology
3 Comments
138 Likes
Statistics
Notes
No Downloads
Views
Total views
39,399
On SlideShare
0
From Embeds
0
Number of Embeds
5,318
Actions
Shares
0
Downloads
0
Comments
3
Likes
138
Embeds 0
No embeds

No notes for slide






  • After which he said that &#x201C;CSS is broken&#x201D;
    Very common to say that CSS is broken when it is misunderstood.
    &#x201C;Emerging frameworks are a sign that CSS is broken.&#x201D;
    Java developers -- Math class
    TRANSITION
    On the other hand, I honestly do believe we are doing it wrong.
  • After which he said that &#x201C;CSS is broken&#x201D;
    Very common to say that CSS is broken when it is misunderstood.
    &#x201C;Emerging frameworks are a sign that CSS is broken.&#x201D;
    Java developers -- Math class
    TRANSITION
    On the other hand, I honestly do believe we are doing it wrong.



  • Modular CSS is a great idea in theory, but in practice...


  • Nothing is shared between modules, each reinvents the CSS wheel. Wastefully file sizes and http requests grow and...
  • What is ... ?



  • lists, headings, etc should all be global
  • grids
  • contours X backgrounds X content objects = complexity
    1 X foo
    bar X 1
    2 X 4 = 8 HTTP req
    5 X 5 = 25 HTTP req
  • Classes on object we wish to extend.


  • media, media extended, wrap
    Open editable zone
  • media, media extended, wrap
    Open editable zone

  • media, media extended, wrap
    Open editable zone





















  • function created to return area that occasionally returns the diameter instead.







  • There is a general belief in CSS development that there are many &#x2018;right&#x2019; ways. This isn&#x2019;t always true.


  • Each time you analyze a solution, there are three main metrics that should be considered.






  • What is Object Oriented CSS?

    1. WHAT IS OBJECT-ORIENTED CSS? A framework? A tool? A philosophy?
    2. MORE LIKE AN EVOLUTION OF THE LANGUAGE it makes CSS more powerful
    3. HOW IS IT DIFFERENT? ul{...} ul li{...} ul li a{...}
    4. HOW IS IT DIFFERENT? ul{...} ul li{...} ul li a{...} Until now, we focused all our effort here
    5. HOW IS IT DIFFERENT? ul{...} ul li{...} ul li a{...} But, the architecture lives here
    6. “JAVASCRIPT DOESN’T SUCK You’re just doing it wrong.” -- Doug Crockford
    7. “JAVASCRIPT DOESN’T SUCK You’re just doing it wrong.” -- Doug Crockford
    8. CSS “JAVASCRIPT DOESN’T SUCK You’re just doing it wrong.” -- Doug Crockford
    9. CSS CIRCA 2005 total spaghetti
    10. CSS CIRCA 2008 a little better
    11. RATHER THAN MAKING OUR CODE PLAY NICE We built big fences
    12. BUT FOR PERFORMANCE?
    13. SITES GET SLOW As file size and HTTP requests are not optimized
    14. CSS CIRCA 2009
    15. OBJECT ORIENTED CSS best practices for performance, scalability, and most importantly, easy to use.
    16. 1. Create objects rather than pages or modules 2. Set good global defaults on content objects 3. Abstract reusable elements 4. Separate structure and skin (into two classes) 5. Separate container and content (open editable zones) 6. Tame the cascade 7. Use multiple classes to simulate OO
    17. CREATE OBJECTS rather than pages or modules
    18. SET GOOD GLOBAL DEFAULTS? for standard content objects
    19. ABSTRACT REUSABLE ELEMENTS? to allow maximum scalability, and less code
    20. 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
    21. TAME THE CASCADE Apply classes to the object we wish to extend, rather than random parent nodes. Predictability!
    22. TAMING THE CASCADE ❖ Within any one object use the cascade fully ❖ All sub-nodes of an object should be prefaced with the object class name. For example: .mymodule .inner{...} ❖ Avoid the cascade as much as possible between objects
    23. SEPARATE CONTAINER AND CONTENT define the boundaries of each object
    24. 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
    25. image or flash OPEN EDITABLE ZONE
    26. USE MULTIPLE CLASSES? to simulate inheritance
    27. 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. Media Extended 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. MEDIA Extending objects, a simple example.
    28. <!-- media --> <div class=quot;media mediaExtquot;> <img class=quot;fixedMediaquot; src=quot;myImg.pngquot; /> <div class=quot;bodyquot;> ... </div> </div>
    29. SEPARATE STRUCTURE FROM SKIN two separate classes
    30. mod block inner hd STRUCTURE Solves browser bugs, positions bd presentational elems, and generally does the heavy lifting of CSS. ft
    31. mod block inner hd STRUCTURE Solves browser bugs, positions bd presentational elems, and generally does the heavy lifting of CSS. ft
    32. mod complex mod complex
    33. mod pop
    34. SKIN Makes it pretty. The goal is very predictable skins, complexity is absorbed by the structure object and shared across the site.
    35. /* ----- 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); }
    36. WHAT BELONGS IN THE SKIN? Every value in the skin should be predictable, something that can easily be calculated or measured. Colors Borders Images
    37. WHAT NOT TO DO! inappropriate dependence on the cascade is not object oriented.
    38. LOCATION DEPENDENT STYLES avoid!
    39. FUNCTION AREA()
    40. FUNCTION AREA()
    41. FUNCTION AREA()
    42. EVERY NOW AND THEN...
    43. RETURNED DIAMETER
    44. BROKEN.
    45. IN CSS WE DO THIS ALL THE TIME
    46. BROKEN.
    47. A Heading should not become a Heading in another part of the page.
    48. AVOID CODE 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
    49. AVOID CODE 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
    50. CONSISTENCY Writing more rules to overwrite the crazy rules from before. e.g. Heading should behave predictably in any module.
    51. TRY THIS INSTEAD h1, .h1{...} h2, .h2{...} h3, .h3{...} h4, .h4{...} h5, .h5{...} h6, .h6{...} ❖ Global values defined ❖ Semantics respected (while allowing visual flexibility)
    52. NEED MORE THAN 6 HEADINGS? Really? Any duplicates? Any too similar?
    53. STILL NEED MORE HEADINGS? .category{...} .section{...} .product{...} .prediction{...} ❖ Extend the heading object via a class on the object itself ❖ Avoid using the cascade to place classes on parent objects
    54. CALCULATING COMPLEXITY IN CSS All solutions are not created equal
    55. O(n) Natural to you, but not to designers.
    56. FRONT END ARCHITECTURE NEEDS TO BE RIGHT Even best practices, like CSS sprites, can have unintended consequences.
    57. 3 METRICS 1. HTTP requests 2. Size of images 3. Size of the CSS
    58. OUTCOMES If the theory is right, it should yield better results.
    59. TEMPLATE • 807 bytes • 13 lines of code • easily extended to custom page and column width
    60. 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
    61. MODULE • 1.3K (structure) • 22 lines of code • Width and height agnostic • Three structures • 264 different combos of skins
    62. JS COMMUNITY How to remain JS lib agnostic? DHTML objects? Easily adding behaviors? Trigger parameters?
    63. FLICKR PHOTO CREDITS ❖ “spaghetti con salsa de tomate y carne + albahaca” by pablovenegas ❖ “Jenga” by j3ku (3 photos, same title) ❖ “Sandbox Fun” by engelsrud ❖ “Golden Gate from Alcatraz” by Tolka Rover ❖ “Treasure Island / The Island / L'île Perdu / La Isla Maravillosa - Version II” by Aaron Escobar ❖ “Razor Wire (01)” by Amy ❖ “At the landfill” by digitalsadhu ❖ “Happy Day” by Daniel Gebhart ❖ “Finding Time to Laugh” by Leepack ❖ “Very Happy Baby” by Yogi
    64. LET’S KEEP TALKING ❖ “Stubbornella” on the web. Twitter, doppler, everywhere... ❖ http://stubbornella.org ❖ nicole@stubbornella.org

    ×