OBJECT ORIENTED CSS
                        for high performance web applications and sites.




                         ...
Web Dev Philosophy

                    • Work out of respect for the design.
                    • Designers make our cod...
“JAVASCRIPT DOESN’T SUCK
                            You’re just doing it wrong.” -- Doug Crockford




Monday, February 1...
“JAVASCRIPT DOESN’T SUCK
                            You’re just doing it wrong.” -- Doug Crockford




Monday, February 1...
CSS
         “JAVASCRIPT DOESN’T SUCK
                            You’re just doing it wrong.” -- Doug Crockford




Monda...
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, pages...
BUT, WE WANT A LOT!
                              and sometimes those goals conflict.




Monday, February 16, 2009
and sometimes those goals conflict.




Monday, February 16, 2009
Monday, February 16, 2009
Modular - combinable ,
reusable, extensible. Light -
One to many relationship
between CSS and potential
layouts. Fast - Mi...
Modular - combinable ,
reusable, extensible. Light -
One to many relationship
between CSS and potential
layouts. Fast - Mi...
SOLUTION
                            Object Oriented CSS




Monday, February 16, 2009
TWO MAIN PRINCIPLES
                               1. Separate Structure and Skin
                            2. Separate ...
10 BEST PRACTICES
                    1. Create a component           6. Minimize selectors
                       library...
9 PITFALLS
                    1. Location dependent styles.   5. Don’t sprite every image
                               ...
CREATE A COMPONENT
                     LIBRARY
                            of reusable “legos”




Monday, February 16, 2...
Components
              are like legos
        Mix and match to create diverse
             and interesting pages.




Mo...
SEPARATE
                            CONTAINER AND
                              CONTENT
                  break the depen...
Monday, February 16, 2009
Contour blocks               Background blocks       Content Objects -
                                                   ...
Build HTML from the
                             component library.
                 New pages should not generally requir...
SITE-WIDE LEGOS
                • Headings

                • Lists  (e.g. action list, external link list, product list, ...
Heading Level 1
                                     Heading Level 2
             HEADINGS                Heading Level 3
...
‣ Toggle List
                                          Default List
                                                     ...
MEDIA
                            Extending objects, a simple
                                    example.


Monday, Febru...
<!-- media -->
<div class=quot;media media_extquot;>
  <img class=quot;fixedMediaquot; src=quot;myImg.pngquot; />

 <div c...
SEPARATE
                            STRUCTURE AND
                                 SKIN
                 abstract the str...
block
                                          inner
                                                  hd



            ...
Reusing elements
                              makes them
                               performance “freebies”




Monday...
Legos first
                      Design individual pages only once all the legos have
                                    ...
Pitfalls
                            What not to do.




Monday, February 16, 2009
Avoid redundancy
Monday, February 16, 2009
Nearly identical
          modules
        Headings 3 and 5 are too similar.




Monday, February 16, 2009
Rule of thumb:
                    If two modules look too similar to include on
                    the same page, they a...
USE CONSISTENT
                            SEMANTIC STYLES




Monday, February 16, 2009
Heading should not become a
                            A                                      Heading


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

               e.g. Heading sho...
How about an
                              example?
                             Yahoo! Personal Finance




Monday, Febru...
2+ different tab
                            styles. Could they
                            use the same
                 ...
3 contour
                            components are
                            too similar. Chose
                      ...
Changes in module
                            width, background
                            color, or background
         ...
Mix and match
                            Container and content objects to achieve high
                                  ...
DESIGN MODULES TO
                     BE TRANSPARENT
                            on the inside.




Monday, February 16, ...
Making it look
                 fab
        Requires careful choice of pixels.



               Bonus: Consider PNG8 for
...
Pitfalls
                            Variable or gradient
                               backgrounds.




Monday, February...
NEVER SPECIFY
                               ELEMENT
                       Do:       .myClass {...}

                    ...
BE FLEXIBLE.
                            Extensible height and width.




Monday, February 16, 2009
• Grids control width
                    • Content controls height



Monday, February 16, 2009
LEARN TO LOVE
                                GRIDS.




Monday, February 16, 2009
MARK-UP AND CSS
                                become predictable




Monday, February 16, 2009
UML TO DESCRIBE
                               both HTML and CSS



Monday, February 16, 2009
TEACHING OO CSS
                               To designers and engineers




Monday, February 16, 2009
A NATURAL PROGRESSION
                            from simple to more complex tasks.




Monday, February 16, 2009
CSS WISH LIST
                             So, maybe CSS isn’t perfect.




Monday, February 16, 2009
CSS WISH LIST
                            So, maybe CSS isn’t perfect.




    1. Extending objects - possible to make “sa...
CSS WISH LIST
                            So, maybe CSS isn’t perfect.




    2. Or, class-order should impact the cascad...
CSS WISH LIST
                                So, maybe CSS isn’t perfect.

                            saleMod
          ...
PHOTO CREDITS

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

      ...
Let’s keep talking...
                                       http://stubbornella.org
                                     ...
Upcoming SlideShare
Loading in...5
×

TEACHING OO CSS Object Oriented CSS

509,407

Published on

TEACHING OO CSS
To designers and engineers




Monday, February 16, 2009

Published in: Design, Technology
41 Comments
978 Likes
Statistics
Notes
  • Thanks to give this information its very useful for beginner like me ...
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • @georghoff1 I agree. And sometimes we want a class called '.error' but acting differently on different elements, for example with form elements.
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • I do not agree with slide 51. CSS-selectors should be as precise as possible and as flexible as necessary. A selector like '.lorem_ipsum { [...] }' is nonsense in most cases, because its styles are meant for a defined element in a defined context (e.g. a paragraph in a teaser-box). A good selector might be instead 'div#sidebar div.teaser_box p.lorem_ipsum { [...] }'. This precise definition of styles leads to safe, readable and maintainable css. Remember what the 'c' stands for in css!
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Assessing by the date of this excellent presentation, it may be safe to deduce that the content pertains in large part to CSS level 2, often referred to as 'CSS 2' or 'CSS2'. According to Wikipedia CSS 2.1 was a Candidate Recommendation mid-2007 and updated twice in 2009. And the W3C no longer maintains the CSS 2 recommendation. Yet the OOCSS concepts remain valid.
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • clearly mind, helpful content supporting for the newbiew to reach the design, the new directory.
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Views
Total Views
509,407
On Slideshare
0
From Embeds
0
Number of Embeds
208
Actions
Shares
0
Downloads
0
Comments
41
Likes
978
Embeds 0
No embeds

No notes for slide
  • Introductions - Nicole Sullivan, worked at yahoo, specialist in scalable high performance websites.


  • After which he said that &#x201C;CSS is broken&#x201D;
    Very common to say that CSS is broken when it is misunderstood.
    Emerging frameworks are a sign that CSS is broken.
    Java developers -- Math class
    TRANSITION
    On the other hand, I honestly do believe we are doing it wrong.
  • couple years coding in the basement by yourself before you are remotely useful.
    Profession needs to accomodate entry level, mid level, and architect level developers.
    Frankly, I&#x2019;m tired of writing rounded corner boxes. I&#x2019;ve done it 1000 times already. What I want is a system that allows newbies to do that part so I can focus on the architect level challenges.

  • New (different) html pages should be able to be built without modifying the CSS.
  • And for good reason. Currently there is no consistency or predictability.
  • Perfectly accessible or high performance website, and then the first newbie to touch it, ruins it. Our code should be robust enough that newbies can contribute while maintaining the standards we&#x2019;ve set.


  • yoga, balance metaphor
  • &#x201C;Once upon a time...&#x201D; pages to modules to objects









  • If we build new HTML pages from a component library, new pages won&#x2019;t require new css.
    So what goes into a component library. First up, content objects.
  • Anything else that should be consistent site-wide.


  • media, media extended, wrap
    Open editable zone

  • presentational elements









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













  • not because you can&#x2019;t do it
    everyone in this room could position something to the left and something else to the right.
    Also because, when working with beginners, they need not to figure out a brand new system with each module.








  • If ducati and saleMod both specify border, and the rules are the same strength, ducati should &#x201C;win&#x201D; as it is the last class specified.
  • Support for child element selectors would solve this, but would increase the length of the rules. E > F


  • ×