SlideShare a Scribd company logo
OBJECT ORIENTED CSS
                        for high performance web applications and sites.




                                                                 Nicole Sullivan
Monday, February 16, 2009
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.



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




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




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




Monday, February 16, 2009
REQUIRE EXPERT ABILITY
              JUST TO GET STARTED.
                            this is not a sign of maturity.




Monday, February 16, 2009
FILE SIZE JUST KEEPS
                          GETTING BIGGER
                   As the site evolves we continuously modify the CSS.




Monday, February 16, 2009
CODE RE-USE IS ALMOST
              NONEXISTENT
                            people don’t trust other developers code.




Monday, February 16, 2009
CODE IS TOO FRAGILE.
       Even the cleanest code gets ruined by the first non-expert to
                                 touch it.




Monday, February 16, 2009
WHAT IS THE MOST
                IMPORTANT MISTAKE
               TALENTED CODERS ARE
                     MAKING?
                            Writing really clever modules.




Monday, February 16, 2009
THE SIZE OF THEIR CSS
                    WILL INCREASE
            in a 1:1 relationship with the number of blocks, pages, and
                               complexity of content.




Monday, February 16, 2009
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 - Minimal HTTP
requests & minimal size.
Future-proof - maintainable,
semantic, standards oriented,
prepared for future-browsers,
redesign compatible. Visually
interesting and adaptable -
respectful of UED and
mar keting constraints.
Simplifies and speeds CSS
development. Accessible -
SEO, Screen readers, etc.
Monday, February 16, 2009
Modular - combinable ,
reusable, extensible. Light -
One to many relationship
between CSS and potential
layouts. Fast - Minimal HTTP
requests & minimal size.
Future-proof - maintainable,
semantic, standards oriented,
prepared for future-browsers,
redesign compatible. Visually
interesting and adaptable -
respectful of UED and
mar keting constraints.
Simplifies and speeds CSS
development. Accessible -
SEO, Screen readers, etc.
Monday, February 16, 2009
SOLUTION
                            Object Oriented CSS




Monday, February 16, 2009
TWO MAIN PRINCIPLES
                               1. Separate Structure and Skin
                            2. Separate Container and Content




Monday, February 16, 2009
10 BEST PRACTICES
                    1. Create a component           6. Minimize selectors
                       library
                                                    7. Separate structure and skin
                    2. Use consistent semantic
                       styles                       8. Separate container and
                                                       content
                    3. Design modules to be
                       transparent on the inside.   9. Extend objects by applying
                                                       multiple classes to an
                    4. Be flexible.                     element

                    5. Learn to love grids.         10. Use reset and fonts from
                                                        YUI



Monday, February 16, 2009
9 PITFALLS
                    1. Location dependent styles.   5. Don’t sprite every image
                                                       together (unless your has
                                                       very few pages).
                    2. Avoid specifying what tag
                       a class applies.
                                                    6. Avoid height alignment
                    3. Avoid IDs to style inside
                       the main content areas.      7. Text as text, not as images.

                    4. Avoid drop shadows and       8. Redundancy
                       rounded corners over
                       irregular backgrounds.       9. Avoid premature
                                                       optimization.




Monday, February 16, 2009
CREATE A COMPONENT
                     LIBRARY
                            of reusable “legos”




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




Monday, February 16, 2009
SEPARATE
                            CONTAINER AND
                              CONTENT
                  break the dependency between the container module
                           and the content objects it contains.




Monday, February 16, 2009
Monday, February 16, 2009
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
Monday, February 16, 2009
Build HTML from the
                             component library.
                 New pages should not generally require additional CSS




Monday, February 16, 2009
SITE-WIDE LEGOS
                • Headings

                • Lists  (e.g. action list, external link list, product list, or
                    feature list)

                • Module     headers and footers

                • Grids

                • Buttons




Monday, February 16, 2009
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




Monday, February 16, 2009
‣ Toggle List
                                          Default 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.




Monday, February 16, 2009
MEDIA
                            Extending objects, a simple
                                    example.


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

 <div class=quot;textquot;>

 
 ...

 </div>
</div>




Monday, February 16, 2009
SEPARATE
                            STRUCTURE AND
                                 SKIN
                 abstract the structure of the block from the skin which
                                     is being applied.




Monday, February 16, 2009
block
                                          inner
                                                  hd



                       BLOCK
                                                  bd
         class can be extended by
        adding additional classes to
             the block element.                   ft




Monday, February 16, 2009
Reusing elements
                              makes them
                               performance “freebies”




Monday, February 16, 2009
Legos first
                      Design individual pages only once all the legos have
                                         been defined.




Monday, February 16, 2009
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 are too similar to include
                    together in a site, choose one!




Monday, February 16, 2009
USE CONSISTENT
                            SEMANTIC STYLES




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


                                    in another part of the page.




Monday, February 16, 2009
Consistency
        Writing more rules to overwrite
         the crazy rules from before.

               e.g. Heading should behave
               predictably in any module.




Monday, February 16, 2009
How about an
                              example?
                             Yahoo! Personal Finance




Monday, February 16, 2009
2+ different tab
                            styles. Could they
                            use the same
                            images?




Monday, February 16, 2009
3 contour
                            components are
                            too similar. Chose
                            one.




Monday, February 16, 2009
Changes in module
                            width, background
                            color, or background
                            image are an excellent
                            example of module
                            reuse.
Monday, February 16, 2009
Mix and match
                            Container and content objects to achieve high
                                        performance design.




Monday, February 16, 2009
DESIGN MODULES TO
                     BE TRANSPARENT
                            on the inside.




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



               Bonus: Consider PNG8 for
                progressive enhancement



http://alistapart.com/articles/mountaintop/
Monday, February 16, 2009
Pitfalls
                            Variable or gradient
                               backgrounds.




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

                       Don’t:    div.myClass {...}



                      Exception: Extending a      Extend the error class to
                      class to work on several    apply to strong or div
                      elements.                   elements specify the
                                                  specific tag in the rule that
                      e.g..error{} which, by      declares only the values
                                                  that are different than the
                      default, applies to a P.
                                                  default value.

Monday, February 16, 2009
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 “sale module” inherit
       from “module”.
           .module{}
           .saleModule{extends: module;}




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




    2. Or, class-order should impact the cascade.
           <div class=“module saleMod ducati”> ... </div>




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

                            saleMod
                                                         Ducati Superbike 848

    3. Proximity should
                                                         The 848 is Ducati's most impressive
                                                         middleweight Superbike ever. Its exceptional
                                                         lightweight and legendary Ducati chassis set-up

       impact the cascade.                               combined with the smooth and thrilling torque
                                                         delivery of the L-Twin Desmo provide the ideal
                                                         way to enter the world of Ducati Superbikes.

       Nested modules, first
       one last in the CSS.                              Ducati Superbike 848
                                                         The 848 is Ducati's most impressive
                                                         middleweight Superbike ever. Its exceptional
                                                         lightweight and legendary Ducati chassis set-up
                                                         combined with the smooth and thrilling torque
                                                         delivery of the L-Twin Desmo.
           .protectiveGear{...}
           .saleMod{...}
                                                         Arai RX7 Corsair Full Face Helmet - Haga Fire
                                                         and Ice
                                                         The 848 is Ducati's most impressive
                                                         middleweight Superbike ever.

                   protectiveGear
Monday, February 16, 2009
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/
    •



Monday, February 16, 2009
Let’s keep talking...
                                       http://stubbornella.org
                                     nicole@stubbornella.org
                                   “stubbornella” on the web...
                             twitter, dopplr, slideshare, everywhere...




Monday, February 16, 2009

More Related Content

What's hot

Angular Data Binding
Angular Data BindingAngular Data Binding
Angular Data Binding
Jennifer Estrada
 
Frontend Crash Course: HTML and CSS
Frontend Crash Course: HTML and CSSFrontend Crash Course: HTML and CSS
Frontend Crash Course: HTML and CSS
Thinkful
 
Spring annotation
Spring annotationSpring annotation
Spring annotation
Rajiv Srivastava
 
BEM it! Introduction to BEM
BEM it! Introduction to BEMBEM it! Introduction to BEM
BEM it! Introduction to BEM
Varya Stepanova
 
Learn BEM: CSS Naming Convention
Learn BEM: CSS Naming ConventionLearn BEM: CSS Naming Convention
Learn BEM: CSS Naming Convention
In a Rocket
 
BEM - CSS, Seriously
BEM - CSS, SeriouslyBEM - CSS, Seriously
BEM - CSS, Seriously
Roland Lösslein
 
Responsive web-design through bootstrap
Responsive web-design through bootstrapResponsive web-design through bootstrap
Responsive web-design through bootstrap
Zunair Sagitarioux
 
Introduction to BOOTSTRAP
Introduction to BOOTSTRAPIntroduction to BOOTSTRAP
Introduction to BOOTSTRAP
Jeanie Arnoco
 
The New JavaScript: ES6
The New JavaScript: ES6The New JavaScript: ES6
The New JavaScript: ES6
Rob Eisenberg
 
Bootstrap 5 ppt
Bootstrap 5 pptBootstrap 5 ppt
Bootstrap 5 ppt
Mallikarjuna G D
 
Its time to React.js
Its time to React.jsIts time to React.js
Its time to React.js
Ritesh Mehrotra
 
Introduction to CSS3
Introduction to CSS3Introduction to CSS3
Introduction to CSS3
Doris Chen
 
Css position
Css positionCss position
Css position
Webtech Learning
 
Styled Components & React.js
Styled Components & React.jsStyled Components & React.js
Styled Components & React.js
Grayson Hicks
 
Design Fast Websites
Design Fast WebsitesDesign Fast Websites
Design Fast Websites
Nicole Sullivan
 
jQuery for beginners
jQuery for beginnersjQuery for beginners
jQuery for beginners
Arulmurugan Rajaraman
 
Advanced Javascript
Advanced JavascriptAdvanced Javascript
Advanced Javascript
Adieu
 
jQuery
jQueryjQuery
jQuery
Jay Poojara
 
jQuery from the very beginning
jQuery from the very beginningjQuery from the very beginning
jQuery from the very beginning
Anis Ahmad
 
Our Best Practices Are Killing Us
Our Best Practices Are Killing UsOur Best Practices Are Killing Us
Our Best Practices Are Killing Us
Nicole Sullivan
 

What's hot (20)

Angular Data Binding
Angular Data BindingAngular Data Binding
Angular Data Binding
 
Frontend Crash Course: HTML and CSS
Frontend Crash Course: HTML and CSSFrontend Crash Course: HTML and CSS
Frontend Crash Course: HTML and CSS
 
Spring annotation
Spring annotationSpring annotation
Spring annotation
 
BEM it! Introduction to BEM
BEM it! Introduction to BEMBEM it! Introduction to BEM
BEM it! Introduction to BEM
 
Learn BEM: CSS Naming Convention
Learn BEM: CSS Naming ConventionLearn BEM: CSS Naming Convention
Learn BEM: CSS Naming Convention
 
BEM - CSS, Seriously
BEM - CSS, SeriouslyBEM - CSS, Seriously
BEM - CSS, Seriously
 
Responsive web-design through bootstrap
Responsive web-design through bootstrapResponsive web-design through bootstrap
Responsive web-design through bootstrap
 
Introduction to BOOTSTRAP
Introduction to BOOTSTRAPIntroduction to BOOTSTRAP
Introduction to BOOTSTRAP
 
The New JavaScript: ES6
The New JavaScript: ES6The New JavaScript: ES6
The New JavaScript: ES6
 
Bootstrap 5 ppt
Bootstrap 5 pptBootstrap 5 ppt
Bootstrap 5 ppt
 
Its time to React.js
Its time to React.jsIts time to React.js
Its time to React.js
 
Introduction to CSS3
Introduction to CSS3Introduction to CSS3
Introduction to CSS3
 
Css position
Css positionCss position
Css position
 
Styled Components & React.js
Styled Components & React.jsStyled Components & React.js
Styled Components & React.js
 
Design Fast Websites
Design Fast WebsitesDesign Fast Websites
Design Fast Websites
 
jQuery for beginners
jQuery for beginnersjQuery for beginners
jQuery for beginners
 
Advanced Javascript
Advanced JavascriptAdvanced Javascript
Advanced Javascript
 
jQuery
jQueryjQuery
jQuery
 
jQuery from the very beginning
jQuery from the very beginningjQuery from the very beginning
jQuery from the very beginning
 
Our Best Practices Are Killing Us
Our Best Practices Are Killing UsOur Best Practices Are Killing Us
Our Best Practices Are Killing Us
 

Similar to Object Oriented CSS

The Fast And The Fabulous
The Fast And The FabulousThe Fast And The Fabulous
The Fast And The Fabulous
Nicole Sullivan
 
Responsive Design Workflow: Webshaped 2012
Responsive Design Workflow: Webshaped 2012Responsive Design Workflow: Webshaped 2012
Responsive Design Workflow: Webshaped 2012
Stephen Hay
 
Responsive Design Workflow: Mobilism 2012
Responsive Design Workflow: Mobilism 2012Responsive Design Workflow: Mobilism 2012
Responsive Design Workflow: Mobilism 2012
Stephen Hay
 
Responsive Design Workflow (Breaking Development Conference 2012 Orlando)
Responsive Design Workflow (Breaking Development Conference 2012 Orlando)Responsive Design Workflow (Breaking Development Conference 2012 Orlando)
Responsive Design Workflow (Breaking Development Conference 2012 Orlando)
Stephen Hay
 
Drupal Themes: Past, present and future
Drupal Themes: Past, present and futureDrupal Themes: Past, present and future
Drupal Themes: Past, present and future
Nicolas Borda
 
Designing Special Feature Pages
Designing Special Feature PagesDesigning Special Feature Pages
Designing Special Feature Pages
Jackie Hai
 
Fusion-io SSD and SQL Server 2008
Fusion-io SSD and SQL Server 2008Fusion-io SSD and SQL Server 2008
Fusion-io SSD and SQL Server 2008
Mark Ginnebaugh
 
Fusion Iossdandsqlserver2008 091022013943 Phpapp02
Fusion Iossdandsqlserver2008 091022013943 Phpapp02Fusion Iossdandsqlserver2008 091022013943 Phpapp02
Fusion Iossdandsqlserver2008 091022013943 Phpapp02
eddiesauvao
 
catalog_09_web
catalog_09_webcatalog_09_web
catalog_09_web
tutorialsruby
 
catalog_09_web
catalog_09_webcatalog_09_web
catalog_09_web
tutorialsruby
 
Object Oriented Css For High Performance Websites And Applications
Object Oriented Css For High Performance Websites And ApplicationsObject Oriented Css For High Performance Websites And Applications
Object Oriented Css For High Performance Websites And Applications
PerconaPerformance
 
Web or SDK Development
Web or SDK DevelopmentWeb or SDK Development
Web or SDK Development
John Wilker
 
SharePoint Branding - 3 Most Common Mistakes
SharePoint Branding - 3 Most Common MistakesSharePoint Branding - 3 Most Common Mistakes
SharePoint Branding - 3 Most Common Mistakes
NicolePullin
 
Boston, MA Developer Group 2/7/2019 - Introduction to lightning web components
Boston, MA Developer Group 2/7/2019 - Introduction to lightning web componentsBoston, MA Developer Group 2/7/2019 - Introduction to lightning web components
Boston, MA Developer Group 2/7/2019 - Introduction to lightning web components
BingWang77
 
JavaScript: the who, what, when, where, why, & how
JavaScript: the who, what, when, where, why, & howJavaScript: the who, what, when, where, why, & how
JavaScript: the who, what, when, where, why, & how
Monty Dickerson
 
Understanding Dom
Understanding DomUnderstanding Dom
Understanding Dom
LiquidHub
 
Building an E-commerce website in MEAN stack
Building an E-commerce website in MEAN stackBuilding an E-commerce website in MEAN stack
Building an E-commerce website in MEAN stack
divyapisces
 
Foundation of Web Application Developmnet - XHTML
Foundation of Web Application Developmnet - XHTMLFoundation of Web Application Developmnet - XHTML
Foundation of Web Application Developmnet - XHTML
Vashira Ravipanich
 
Between a Block & a Hard Place
Between a Block & a Hard PlaceBetween a Block & a Hard Place
Between a Block & a Hard Place
WP Engine
 
Pronounced S-pro-ut-Co-re (Introduction to SproutCore)
Pronounced S-pro-ut-Co-re (Introduction to SproutCore)Pronounced S-pro-ut-Co-re (Introduction to SproutCore)
Pronounced S-pro-ut-Co-re (Introduction to SproutCore)
Julio Javier Cicchelli
 

Similar to Object Oriented CSS (20)

The Fast And The Fabulous
The Fast And The FabulousThe Fast And The Fabulous
The Fast And The Fabulous
 
Responsive Design Workflow: Webshaped 2012
Responsive Design Workflow: Webshaped 2012Responsive Design Workflow: Webshaped 2012
Responsive Design Workflow: Webshaped 2012
 
Responsive Design Workflow: Mobilism 2012
Responsive Design Workflow: Mobilism 2012Responsive Design Workflow: Mobilism 2012
Responsive Design Workflow: Mobilism 2012
 
Responsive Design Workflow (Breaking Development Conference 2012 Orlando)
Responsive Design Workflow (Breaking Development Conference 2012 Orlando)Responsive Design Workflow (Breaking Development Conference 2012 Orlando)
Responsive Design Workflow (Breaking Development Conference 2012 Orlando)
 
Drupal Themes: Past, present and future
Drupal Themes: Past, present and futureDrupal Themes: Past, present and future
Drupal Themes: Past, present and future
 
Designing Special Feature Pages
Designing Special Feature PagesDesigning Special Feature Pages
Designing Special Feature Pages
 
Fusion-io SSD and SQL Server 2008
Fusion-io SSD and SQL Server 2008Fusion-io SSD and SQL Server 2008
Fusion-io SSD and SQL Server 2008
 
Fusion Iossdandsqlserver2008 091022013943 Phpapp02
Fusion Iossdandsqlserver2008 091022013943 Phpapp02Fusion Iossdandsqlserver2008 091022013943 Phpapp02
Fusion Iossdandsqlserver2008 091022013943 Phpapp02
 
catalog_09_web
catalog_09_webcatalog_09_web
catalog_09_web
 
catalog_09_web
catalog_09_webcatalog_09_web
catalog_09_web
 
Object Oriented Css For High Performance Websites And Applications
Object Oriented Css For High Performance Websites And ApplicationsObject Oriented Css For High Performance Websites And Applications
Object Oriented Css For High Performance Websites And Applications
 
Web or SDK Development
Web or SDK DevelopmentWeb or SDK Development
Web or SDK Development
 
SharePoint Branding - 3 Most Common Mistakes
SharePoint Branding - 3 Most Common MistakesSharePoint Branding - 3 Most Common Mistakes
SharePoint Branding - 3 Most Common Mistakes
 
Boston, MA Developer Group 2/7/2019 - Introduction to lightning web components
Boston, MA Developer Group 2/7/2019 - Introduction to lightning web componentsBoston, MA Developer Group 2/7/2019 - Introduction to lightning web components
Boston, MA Developer Group 2/7/2019 - Introduction to lightning web components
 
JavaScript: the who, what, when, where, why, & how
JavaScript: the who, what, when, where, why, & howJavaScript: the who, what, when, where, why, & how
JavaScript: the who, what, when, where, why, & how
 
Understanding Dom
Understanding DomUnderstanding Dom
Understanding Dom
 
Building an E-commerce website in MEAN stack
Building an E-commerce website in MEAN stackBuilding an E-commerce website in MEAN stack
Building an E-commerce website in MEAN stack
 
Foundation of Web Application Developmnet - XHTML
Foundation of Web Application Developmnet - XHTMLFoundation of Web Application Developmnet - XHTML
Foundation of Web Application Developmnet - XHTML
 
Between a Block & a Hard Place
Between a Block & a Hard PlaceBetween a Block & a Hard Place
Between a Block & a Hard Place
 
Pronounced S-pro-ut-Co-re (Introduction to SproutCore)
Pronounced S-pro-ut-Co-re (Introduction to SproutCore)Pronounced S-pro-ut-Co-re (Introduction to SproutCore)
Pronounced S-pro-ut-Co-re (Introduction to SproutCore)
 

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
 
Why are you here?
Why are you here?Why are you here?
Why are you here?
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 Performance
Nicole Sullivan
 
Don't feed the trolls
Don't feed the trollsDon't feed the trolls
Don't feed the trolls
Nicole Sullivan
 
CSS Power Tools
CSS Power ToolsCSS Power Tools
CSS Power Tools
Nicole Sullivan
 
5 Mistakes of Massive CSS
5 Mistakes of Massive CSS5 Mistakes of Massive CSS
5 Mistakes of Massive CSS
Nicole Sullivan
 
CSS Wish List @JSConf
CSS Wish List @JSConfCSS Wish List @JSConf
CSS Wish List @JSConf
Nicole 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
 
Taming CSS Selectors
Taming CSS SelectorsTaming CSS Selectors
Taming CSS Selectors
Nicole 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 Performance
Nicole Sullivan
 
After YSlow "A"
After YSlow "A"After YSlow "A"
After YSlow "A"
Nicole Sullivan
 

More from Nicole Sullivan (12)

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
 
Pourquoi la performance?
Pourquoi la performance?Pourquoi la performance?
Pourquoi la performance?
 
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

一比一原版美国加州大学欧文分校毕业证(UCI学位证)如何办理
一比一原版美国加州大学欧文分校毕业证(UCI学位证)如何办理一比一原版美国加州大学欧文分校毕业证(UCI学位证)如何办理
一比一原版美国加州大学欧文分校毕业证(UCI学位证)如何办理
02tygie
 
一比一原版肯特大学毕业证UKC成绩单一模一样
一比一原版肯特大学毕业证UKC成绩单一模一样一比一原版肯特大学毕业证UKC成绩单一模一样
一比一原版肯特大学毕业证UKC成绩单一模一样
tobbk6s8
 
Getting Data Ready for Culture Hack by Neontribe
Getting Data Ready for Culture Hack by NeontribeGetting Data Ready for Culture Hack by Neontribe
Getting Data Ready for Culture Hack by Neontribe
Harry Harrold
 
一比一原版布兰登大学毕业证(BU毕业证书)如何办理
一比一原版布兰登大学毕业证(BU毕业证书)如何办理一比一原版布兰登大学毕业证(BU毕业证书)如何办理
一比一原版布兰登大学毕业证(BU毕业证书)如何办理
wkip62b
 
UXpert_Report (UALR Mapping Renewal 2022).pdf
UXpert_Report (UALR Mapping Renewal 2022).pdfUXpert_Report (UALR Mapping Renewal 2022).pdf
UXpert_Report (UALR Mapping Renewal 2022).pdf
anthonylin333
 
一比一原版(UCB毕业证)英国伯明翰大学学院毕业证如何办理
一比一原版(UCB毕业证)英国伯明翰大学学院毕业证如何办理一比一原版(UCB毕业证)英国伯明翰大学学院毕业证如何办理
一比一原版(UCB毕业证)英国伯明翰大学学院毕业证如何办理
zv943dhb
 
一比一原版(UoB毕业证)英国伯明翰大学毕业证如何办理
一比一原版(UoB毕业证)英国伯明翰大学毕业证如何办理一比一原版(UoB毕业证)英国伯明翰大学毕业证如何办理
一比一原版(UoB毕业证)英国伯明翰大学毕业证如何办理
zv943dhb
 
一比一原版南安普顿索伦特大学毕业证Southampton成绩单一模一样
一比一原版南安普顿索伦特大学毕业证Southampton成绩单一模一样一比一原版南安普顿索伦特大学毕业证Southampton成绩单一模一样
一比一原版南安普顿索伦特大学毕业证Southampton成绩单一模一样
3vgr39kx
 
Plastic Molding Infographic - RPWORLD.pdf
Plastic Molding Infographic - RPWORLD.pdfPlastic Molding Infographic - RPWORLD.pdf
Plastic Molding Infographic - RPWORLD.pdf
RPWORLD Manufacturing
 
Rethinking Kållered │ From Big Box to a Reuse Hub: A Transformation Journey ...
Rethinking Kållered │  From Big Box to a Reuse Hub: A Transformation Journey ...Rethinking Kållered │  From Big Box to a Reuse Hub: A Transformation Journey ...
Rethinking Kållered │ From Big Box to a Reuse Hub: A Transformation Journey ...
SirmaDuztepeliler
 
一比一原版美国哥伦比亚大学毕业证Columbia成绩单一模一样
一比一原版美国哥伦比亚大学毕业证Columbia成绩单一模一样一比一原版美国哥伦比亚大学毕业证Columbia成绩单一模一样
一比一原版美国哥伦比亚大学毕业证Columbia成绩单一模一样
881evgn0
 
一比一原版(UoN毕业证书)纽卡斯尔大学毕业证如何办理
一比一原版(UoN毕业证书)纽卡斯尔大学毕业证如何办理一比一原版(UoN毕业证书)纽卡斯尔大学毕业证如何办理
一比一原版(UoN毕业证书)纽卡斯尔大学毕业证如何办理
f22b6g9c
 
欧洲杯足彩-欧洲杯足彩买球软件-欧洲杯足彩买球软件下载|【​网址​🎉ac123.net🎉​】
欧洲杯足彩-欧洲杯足彩买球软件-欧洲杯足彩买球软件下载|【​网址​🎉ac123.net🎉​】欧洲杯足彩-欧洲杯足彩买球软件-欧洲杯足彩买球软件下载|【​网址​🎉ac123.net🎉​】
欧洲杯足彩-欧洲杯足彩买球软件-欧洲杯足彩买球软件下载|【​网址​🎉ac123.net🎉​】
batchelorerbm45967
 
Dilatometer for measurement of materials
Dilatometer for measurement of materialsDilatometer for measurement of materials
Dilatometer for measurement of materials
ankitsinglaisro
 
一比一原版(LSE毕业证书)伦敦政治经济学院毕业证如何办理
一比一原版(LSE毕业证书)伦敦政治经济学院毕业证如何办理一比一原版(LSE毕业证书)伦敦政治经济学院毕业证如何办理
一比一原版(LSE毕业证书)伦敦政治经济学院毕业证如何办理
340qn0m1
 
一比一原版(lu毕业证书)英国拉夫堡大学毕业证如何办理
一比一原版(lu毕业证书)英国拉夫堡大学毕业证如何办理一比一原版(lu毕业证书)英国拉夫堡大学毕业证如何办理
一比一原版(lu毕业证书)英国拉夫堡大学毕业证如何办理
ubogumo
 
Intel-Centrino-Mobile-Technology-guidelines
Intel-Centrino-Mobile-Technology-guidelinesIntel-Centrino-Mobile-Technology-guidelines
Intel-Centrino-Mobile-Technology-guidelines
EricHo305923
 
一比一原版(UVM毕业证)佛蒙特大学毕业证如何办理
一比一原版(UVM毕业证)佛蒙特大学毕业证如何办理一比一原版(UVM毕业证)佛蒙特大学毕业证如何办理
一比一原版(UVM毕业证)佛蒙特大学毕业证如何办理
yeytf
 
一比一原版马来西亚世纪大学毕业证成绩单一模一样
一比一原版马来西亚世纪大学毕业证成绩单一模一样一比一原版马来西亚世纪大学毕业证成绩单一模一样
一比一原版马来西亚世纪大学毕业证成绩单一模一样
k4krdgxx
 
一比一原版(CSU毕业证书)查尔斯特大学毕业证如何办理
一比一原版(CSU毕业证书)查尔斯特大学毕业证如何办理一比一原版(CSU毕业证书)查尔斯特大学毕业证如何办理
一比一原版(CSU毕业证书)查尔斯特大学毕业证如何办理
67n7f53
 

Recently uploaded (20)

一比一原版美国加州大学欧文分校毕业证(UCI学位证)如何办理
一比一原版美国加州大学欧文分校毕业证(UCI学位证)如何办理一比一原版美国加州大学欧文分校毕业证(UCI学位证)如何办理
一比一原版美国加州大学欧文分校毕业证(UCI学位证)如何办理
 
一比一原版肯特大学毕业证UKC成绩单一模一样
一比一原版肯特大学毕业证UKC成绩单一模一样一比一原版肯特大学毕业证UKC成绩单一模一样
一比一原版肯特大学毕业证UKC成绩单一模一样
 
Getting Data Ready for Culture Hack by Neontribe
Getting Data Ready for Culture Hack by NeontribeGetting Data Ready for Culture Hack by Neontribe
Getting Data Ready for Culture Hack by Neontribe
 
一比一原版布兰登大学毕业证(BU毕业证书)如何办理
一比一原版布兰登大学毕业证(BU毕业证书)如何办理一比一原版布兰登大学毕业证(BU毕业证书)如何办理
一比一原版布兰登大学毕业证(BU毕业证书)如何办理
 
UXpert_Report (UALR Mapping Renewal 2022).pdf
UXpert_Report (UALR Mapping Renewal 2022).pdfUXpert_Report (UALR Mapping Renewal 2022).pdf
UXpert_Report (UALR Mapping Renewal 2022).pdf
 
一比一原版(UCB毕业证)英国伯明翰大学学院毕业证如何办理
一比一原版(UCB毕业证)英国伯明翰大学学院毕业证如何办理一比一原版(UCB毕业证)英国伯明翰大学学院毕业证如何办理
一比一原版(UCB毕业证)英国伯明翰大学学院毕业证如何办理
 
一比一原版(UoB毕业证)英国伯明翰大学毕业证如何办理
一比一原版(UoB毕业证)英国伯明翰大学毕业证如何办理一比一原版(UoB毕业证)英国伯明翰大学毕业证如何办理
一比一原版(UoB毕业证)英国伯明翰大学毕业证如何办理
 
一比一原版南安普顿索伦特大学毕业证Southampton成绩单一模一样
一比一原版南安普顿索伦特大学毕业证Southampton成绩单一模一样一比一原版南安普顿索伦特大学毕业证Southampton成绩单一模一样
一比一原版南安普顿索伦特大学毕业证Southampton成绩单一模一样
 
Plastic Molding Infographic - RPWORLD.pdf
Plastic Molding Infographic - RPWORLD.pdfPlastic Molding Infographic - RPWORLD.pdf
Plastic Molding Infographic - RPWORLD.pdf
 
Rethinking Kållered │ From Big Box to a Reuse Hub: A Transformation Journey ...
Rethinking Kållered │  From Big Box to a Reuse Hub: A Transformation Journey ...Rethinking Kållered │  From Big Box to a Reuse Hub: A Transformation Journey ...
Rethinking Kållered │ From Big Box to a Reuse Hub: A Transformation Journey ...
 
一比一原版美国哥伦比亚大学毕业证Columbia成绩单一模一样
一比一原版美国哥伦比亚大学毕业证Columbia成绩单一模一样一比一原版美国哥伦比亚大学毕业证Columbia成绩单一模一样
一比一原版美国哥伦比亚大学毕业证Columbia成绩单一模一样
 
一比一原版(UoN毕业证书)纽卡斯尔大学毕业证如何办理
一比一原版(UoN毕业证书)纽卡斯尔大学毕业证如何办理一比一原版(UoN毕业证书)纽卡斯尔大学毕业证如何办理
一比一原版(UoN毕业证书)纽卡斯尔大学毕业证如何办理
 
欧洲杯足彩-欧洲杯足彩买球软件-欧洲杯足彩买球软件下载|【​网址​🎉ac123.net🎉​】
欧洲杯足彩-欧洲杯足彩买球软件-欧洲杯足彩买球软件下载|【​网址​🎉ac123.net🎉​】欧洲杯足彩-欧洲杯足彩买球软件-欧洲杯足彩买球软件下载|【​网址​🎉ac123.net🎉​】
欧洲杯足彩-欧洲杯足彩买球软件-欧洲杯足彩买球软件下载|【​网址​🎉ac123.net🎉​】
 
Dilatometer for measurement of materials
Dilatometer for measurement of materialsDilatometer for measurement of materials
Dilatometer for measurement of materials
 
一比一原版(LSE毕业证书)伦敦政治经济学院毕业证如何办理
一比一原版(LSE毕业证书)伦敦政治经济学院毕业证如何办理一比一原版(LSE毕业证书)伦敦政治经济学院毕业证如何办理
一比一原版(LSE毕业证书)伦敦政治经济学院毕业证如何办理
 
一比一原版(lu毕业证书)英国拉夫堡大学毕业证如何办理
一比一原版(lu毕业证书)英国拉夫堡大学毕业证如何办理一比一原版(lu毕业证书)英国拉夫堡大学毕业证如何办理
一比一原版(lu毕业证书)英国拉夫堡大学毕业证如何办理
 
Intel-Centrino-Mobile-Technology-guidelines
Intel-Centrino-Mobile-Technology-guidelinesIntel-Centrino-Mobile-Technology-guidelines
Intel-Centrino-Mobile-Technology-guidelines
 
一比一原版(UVM毕业证)佛蒙特大学毕业证如何办理
一比一原版(UVM毕业证)佛蒙特大学毕业证如何办理一比一原版(UVM毕业证)佛蒙特大学毕业证如何办理
一比一原版(UVM毕业证)佛蒙特大学毕业证如何办理
 
一比一原版马来西亚世纪大学毕业证成绩单一模一样
一比一原版马来西亚世纪大学毕业证成绩单一模一样一比一原版马来西亚世纪大学毕业证成绩单一模一样
一比一原版马来西亚世纪大学毕业证成绩单一模一样
 
一比一原版(CSU毕业证书)查尔斯特大学毕业证如何办理
一比一原版(CSU毕业证书)查尔斯特大学毕业证如何办理一比一原版(CSU毕业证书)查尔斯特大学毕业证如何办理
一比一原版(CSU毕业证书)查尔斯特大学毕业证如何办理
 

Object Oriented CSS

  • 1. OBJECT ORIENTED CSS for high performance web applications and sites. Nicole Sullivan Monday, February 16, 2009
  • 2. 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. Monday, February 16, 2009
  • 3. “JAVASCRIPT DOESN’T SUCK You’re just doing it wrong.” -- Doug Crockford Monday, February 16, 2009
  • 4. “JAVASCRIPT DOESN’T SUCK You’re just doing it wrong.” -- Doug Crockford Monday, February 16, 2009
  • 5. CSS “JAVASCRIPT DOESN’T SUCK You’re just doing it wrong.” -- Doug Crockford Monday, February 16, 2009
  • 6. REQUIRE EXPERT ABILITY JUST TO GET STARTED. this is not a sign of maturity. Monday, February 16, 2009
  • 7. FILE SIZE JUST KEEPS GETTING BIGGER As the site evolves we continuously modify the CSS. Monday, February 16, 2009
  • 8. CODE RE-USE IS ALMOST NONEXISTENT people don’t trust other developers code. Monday, February 16, 2009
  • 9. CODE IS TOO FRAGILE. Even the cleanest code gets ruined by the first non-expert to touch it. Monday, February 16, 2009
  • 10. WHAT IS THE MOST IMPORTANT MISTAKE TALENTED CODERS ARE MAKING? Writing really clever modules. Monday, February 16, 2009
  • 11. THE SIZE OF THEIR CSS WILL INCREASE in a 1:1 relationship with the number of blocks, pages, and complexity of content. Monday, February 16, 2009
  • 12. BUT, WE WANT A LOT! and sometimes those goals conflict. Monday, February 16, 2009
  • 13. and sometimes those goals conflict. Monday, February 16, 2009
  • 15. Modular - combinable , reusable, extensible. Light - One to many relationship between CSS and potential layouts. Fast - Minimal HTTP requests & minimal size. Future-proof - maintainable, semantic, standards oriented, prepared for future-browsers, redesign compatible. Visually interesting and adaptable - respectful of UED and mar keting constraints. Simplifies and speeds CSS development. Accessible - SEO, Screen readers, etc. Monday, February 16, 2009
  • 16. Modular - combinable , reusable, extensible. Light - One to many relationship between CSS and potential layouts. Fast - Minimal HTTP requests & minimal size. Future-proof - maintainable, semantic, standards oriented, prepared for future-browsers, redesign compatible. Visually interesting and adaptable - respectful of UED and mar keting constraints. Simplifies and speeds CSS development. Accessible - SEO, Screen readers, etc. Monday, February 16, 2009
  • 17. SOLUTION Object Oriented CSS Monday, February 16, 2009
  • 18. TWO MAIN PRINCIPLES 1. Separate Structure and Skin 2. Separate Container and Content Monday, February 16, 2009
  • 19. 10 BEST PRACTICES 1. Create a component 6. Minimize selectors library 7. Separate structure and skin 2. Use consistent semantic styles 8. Separate container and content 3. Design modules to be transparent on the inside. 9. Extend objects by applying multiple classes to an 4. Be flexible. element 5. Learn to love grids. 10. Use reset and fonts from YUI Monday, February 16, 2009
  • 20. 9 PITFALLS 1. Location dependent styles. 5. Don’t sprite every image together (unless your has very few pages). 2. Avoid specifying what tag a class applies. 6. Avoid height alignment 3. Avoid IDs to style inside the main content areas. 7. Text as text, not as images. 4. Avoid drop shadows and 8. Redundancy rounded corners over irregular backgrounds. 9. Avoid premature optimization. Monday, February 16, 2009
  • 21. CREATE A COMPONENT LIBRARY of reusable “legos” Monday, February 16, 2009
  • 22. Components are like legos Mix and match to create diverse and interesting pages. Monday, February 16, 2009
  • 23. SEPARATE CONTAINER AND CONTENT break the dependency between the container module and the content objects it contains. Monday, February 16, 2009
  • 25. 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 Monday, February 16, 2009
  • 26. Build HTML from the component library. New pages should not generally require additional CSS Monday, February 16, 2009
  • 27. SITE-WIDE LEGOS • Headings • Lists (e.g. action list, external link list, product list, or feature list) • Module headers and footers • Grids • Buttons Monday, February 16, 2009
  • 28. 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 Monday, February 16, 2009
  • 29. ‣ Toggle List Default 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. Monday, February 16, 2009
  • 30. MEDIA Extending objects, a simple example. Monday, February 16, 2009
  • 31. <!-- media --> <div class=quot;media media_extquot;> <img class=quot;fixedMediaquot; src=quot;myImg.pngquot; /> <div class=quot;textquot;> ... </div> </div> Monday, February 16, 2009
  • 32. SEPARATE STRUCTURE AND SKIN abstract the structure of the block from the skin which is being applied. Monday, February 16, 2009
  • 33. block inner hd BLOCK bd class can be extended by adding additional classes to the block element. ft Monday, February 16, 2009
  • 34. Reusing elements makes them performance “freebies” Monday, February 16, 2009
  • 35. Legos first Design individual pages only once all the legos have been defined. Monday, February 16, 2009
  • 36. Pitfalls What not to do. Monday, February 16, 2009
  • 38. Nearly identical modules Headings 3 and 5 are too similar. Monday, February 16, 2009
  • 39. 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! Monday, February 16, 2009
  • 40. USE CONSISTENT SEMANTIC STYLES Monday, February 16, 2009
  • 41. Heading should not become a A Heading in another part of the page. Monday, February 16, 2009
  • 42. Consistency Writing more rules to overwrite the crazy rules from before. e.g. Heading should behave predictably in any module. Monday, February 16, 2009
  • 43. How about an example? Yahoo! Personal Finance Monday, February 16, 2009
  • 44. 2+ different tab styles. Could they use the same images? Monday, February 16, 2009
  • 45. 3 contour components are too similar. Chose one. Monday, February 16, 2009
  • 46. Changes in module width, background color, or background image are an excellent example of module reuse. Monday, February 16, 2009
  • 47. Mix and match Container and content objects to achieve high performance design. Monday, February 16, 2009
  • 48. DESIGN MODULES TO BE TRANSPARENT on the inside. Monday, February 16, 2009
  • 49. Making it look fab Requires careful choice of pixels. Bonus: Consider PNG8 for progressive enhancement http://alistapart.com/articles/mountaintop/ Monday, February 16, 2009
  • 50. Pitfalls Variable or gradient backgrounds. Monday, February 16, 2009
  • 51. NEVER SPECIFY ELEMENT Do: .myClass {...} Don’t: div.myClass {...} Exception: Extending a Extend the error class to class to work on several apply to strong or div elements. elements specify the specific tag in the rule that e.g..error{} which, by declares only the values that are different than the default, applies to a P. default value. Monday, February 16, 2009
  • 52. BE FLEXIBLE. Extensible height and width. Monday, February 16, 2009
  • 53. • Grids control width • Content controls height Monday, February 16, 2009
  • 54. LEARN TO LOVE GRIDS. Monday, February 16, 2009
  • 55. MARK-UP AND CSS become predictable Monday, February 16, 2009
  • 56. UML TO DESCRIBE both HTML and CSS Monday, February 16, 2009
  • 57. TEACHING OO CSS To designers and engineers Monday, February 16, 2009
  • 58. A NATURAL PROGRESSION from simple to more complex tasks. Monday, February 16, 2009
  • 59. CSS WISH LIST So, maybe CSS isn’t perfect. Monday, February 16, 2009
  • 60. CSS WISH LIST So, maybe CSS isn’t perfect. 1. Extending objects - possible to make “sale module” inherit from “module”. .module{} .saleModule{extends: module;} Monday, February 16, 2009
  • 61. CSS WISH LIST So, maybe CSS isn’t perfect. 2. Or, class-order should impact the cascade. <div class=“module saleMod ducati”> ... </div> Monday, February 16, 2009
  • 62. CSS WISH LIST So, maybe CSS isn’t perfect. saleMod Ducati Superbike 848 3. Proximity should The 848 is Ducati's most impressive middleweight Superbike ever. Its exceptional lightweight and legendary Ducati chassis set-up impact the cascade. combined with the smooth and thrilling torque delivery of the L-Twin Desmo provide the ideal way to enter the world of Ducati Superbikes. Nested modules, first one last in the CSS. Ducati Superbike 848 The 848 is Ducati's most impressive middleweight Superbike ever. Its exceptional lightweight and legendary Ducati chassis set-up combined with the smooth and thrilling torque delivery of the L-Twin Desmo. .protectiveGear{...} .saleMod{...} Arai RX7 Corsair Full Face Helmet - Haga Fire and Ice The 848 is Ducati's most impressive middleweight Superbike ever. protectiveGear Monday, February 16, 2009
  • 63. 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/ • Monday, February 16, 2009
  • 64. Let’s keep talking... http://stubbornella.org nicole@stubbornella.org “stubbornella” on the web... twitter, dopplr, slideshare, everywhere... Monday, February 16, 2009

Editor's Notes

  1. Introductions - Nicole Sullivan, worked at yahoo, specialist in scalable high performance websites.
  2. 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.
  3. 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.
  4. New (different) html pages should be able to be built without modifying the CSS.
  5. And for good reason. Currently there is no consistency or predictability.
  6. 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.
  7. yoga, balance metaphor
  8. &#x201C;Once upon a time...&#x201D; pages to modules to objects
  9. 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.
  10. Anything else that should be consistent site-wide.
  11. media, media extended, wrap Open editable zone
  12. presentational elements
  13. function created to return area that occasionally returns the diameter instead.
  14. 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.
  15. 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.
  16. Support for child element selectors would solve this, but would increase the length of the rules. E > F