SlideShare a Scribd company logo
1 of 124
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 outside as it is on the inside.
• Respect the original design vision.
  consistent design = clean code = fast site.
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{...}



Until now, we focused all our effort here
HOW IS IT DIFFERENT?


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



But, the architecture lives here
“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
The Fast And The Fabulous
CSS CIRCA 2008
    a little better
RATHER THAN MAKING
 OUR CODE PLAY NICE
      We built big fences
BUT FOR PERFORMANCE?
The Fast And The Fabulous
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,
                     ease of use.
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
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 the look and feel you
want with the semantics you     Heading Level 4
            need.
                                Heading Level 5

                                Heading Level 6
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.
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
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 site, choose one!
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}


❖   Global color undefined for h3, so it will be
    ‣   unstyled in new modules,
    ‣   developers forced to write more CSS for the same style
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
CONSISTENCY
    Writing more rules to
overwrite the crazy rules from
           before.

 e.g. Heading should behave
 predictably in any module.
TRY THIS INSTEAD
                        h1,    .h1{...}
                        h2,    .h2{...}
                        h3,    .h3{...}
                        h4,    .h4{...}
                        h5,    .h5{...}
                        h6,    .h6{...}

❖   Global values defined
❖   Semantics respected (while allowing visual flexibility)
NEED MORE THAN 6
   HEADINGS?
 Really? Any duplicates? Any too similar?
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
ABSTRACT
reusable bits of code
person-man-photographer          person-woman-photographer




      REPETITION OF CODE
   caused by a failure to abstract different levels of semantics
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 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
image
or flash   OPEN EDITABLE ZONE
The Fast And The Fabulous
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
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 PNG8 for
        progressive enhancement
http://alistapart.com/articles/mountaintop/
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
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
mod
                                   block
                                      inner
                                              hd



  STRUCTURE
Solves browser bugs, positions                bd
  presentational elems, and
generally does the heavy lifting
            of CSS.
                                              ft
mod
                                   block
                                      inner
                                              hd



  STRUCTURE
Solves browser bugs, positions                bd
  presentational elems, and
generally does the heavy lifting
            of CSS.
                                              ft
mod complex
 mod complex
mod pop
SKIN
      Makes it pretty.

 The goal is very predictable
skins, complexity is absorbed
 by the structure object and
    shared across the site.
/* ----- 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
WHAT BELONGS IN THE
           SKIN?

Every value in the skin should be predictable, something that
can easily be calculated or measured.

Colors

Borders

Images
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
❖   Infinite nesting and stacking


         http://wiki.github.com/stubbornella/oocss/grids
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) .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;}
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, thirds, fourths, and
    fifths

•   No gutters

•   Infinite nesting and stacking
MODULE

• 1.3K   (structure)

• 22   lines of code

• Width    and height agnostic

• Three   structures

• 264 different combos of
 skins
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

http://wiki.github.com/stubbornella/oocss
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
The Fast And The Fabulous
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.github.com/stubbornella/oocss/grids
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
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://wiki.github.com/stubbornella/oocss/module
The Fast And The Fabulous
1. Change block headers to baz,
    online, help, and info
The Fast And The Fabulous
1. Remove left
    column
The Fast And The Fabulous
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 inherits from pop
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

More Related Content

What's hot

Scalable and Modular CSS FTW!
Scalable and Modular CSS FTW!Scalable and Modular CSS FTW!
Scalable and Modular CSS FTW!FITC
 
Html & Css presentation
Html  & Css presentation Html  & Css presentation
Html & Css presentation joilrahat
 
CSS3 - is everything we used to do wrong?
CSS3 - is everything we used to do wrong? CSS3 - is everything we used to do wrong?
CSS3 - is everything we used to do wrong? Russ Weakley
 
BEM Methodology — @Frontenders Ticino —17/09/2014
BEM Methodology — @Frontenders Ticino —17/09/2014BEM Methodology — @Frontenders Ticino —17/09/2014
BEM Methodology — @Frontenders Ticino —17/09/2014vzaccaria
 
Haml And Sass In 15 Minutes
Haml And Sass In 15 MinutesHaml And Sass In 15 Minutes
Haml And Sass In 15 MinutesPatrick Crowley
 
Introduction to CSS3
Introduction to CSS3Introduction to CSS3
Introduction to CSS3Doris Chen
 
Cssbestpracticesjstyleguidejandtips 150830184202-lva1-app6892
Cssbestpracticesjstyleguidejandtips 150830184202-lva1-app6892Cssbestpracticesjstyleguidejandtips 150830184202-lva1-app6892
Cssbestpracticesjstyleguidejandtips 150830184202-lva1-app6892Deepak Sharma
 
Efficient, maintainable CSS
Efficient, maintainable CSSEfficient, maintainable CSS
Efficient, maintainable CSSRuss Weakley
 
CSS pattern libraries
CSS pattern librariesCSS pattern libraries
CSS pattern librariesRuss Weakley
 
Prototyping w/HTML5 and CSS3
Prototyping w/HTML5 and CSS3Prototyping w/HTML5 and CSS3
Prototyping w/HTML5 and CSS3Todd Zaki Warfel
 
網頁程式設計
網頁程式設計網頁程式設計
網頁程式設計傳錡 蕭
 
Sass Essentials at Mobile Camp LA
Sass Essentials at Mobile Camp LASass Essentials at Mobile Camp LA
Sass Essentials at Mobile Camp LAJake Johnson
 
About Best friends - HTML, CSS and JS
About Best friends - HTML, CSS and JSAbout Best friends - HTML, CSS and JS
About Best friends - HTML, CSS and JSNaga Harish M
 

What's hot (20)

Scalable and Modular CSS FTW!
Scalable and Modular CSS FTW!Scalable and Modular CSS FTW!
Scalable and Modular CSS FTW!
 
CSS Systems
CSS SystemsCSS Systems
CSS Systems
 
Html & Css presentation
Html  & Css presentation Html  & Css presentation
Html & Css presentation
 
CSS3 - is everything we used to do wrong?
CSS3 - is everything we used to do wrong? CSS3 - is everything we used to do wrong?
CSS3 - is everything we used to do wrong?
 
BEM Methodology — @Frontenders Ticino —17/09/2014
BEM Methodology — @Frontenders Ticino —17/09/2014BEM Methodology — @Frontenders Ticino —17/09/2014
BEM Methodology — @Frontenders Ticino —17/09/2014
 
BEM it!
BEM it!BEM it!
BEM it!
 
Haml And Sass In 15 Minutes
Haml And Sass In 15 MinutesHaml And Sass In 15 Minutes
Haml And Sass In 15 Minutes
 
The benefits of BEM CSS
The benefits of BEM CSSThe benefits of BEM CSS
The benefits of BEM CSS
 
Introduction to CSS3
Introduction to CSS3Introduction to CSS3
Introduction to CSS3
 
HTML CSS & Javascript
HTML CSS & JavascriptHTML CSS & Javascript
HTML CSS & Javascript
 
Cssbestpracticesjstyleguidejandtips 150830184202-lva1-app6892
Cssbestpracticesjstyleguidejandtips 150830184202-lva1-app6892Cssbestpracticesjstyleguidejandtips 150830184202-lva1-app6892
Cssbestpracticesjstyleguidejandtips 150830184202-lva1-app6892
 
Efficient, maintainable CSS
Efficient, maintainable CSSEfficient, maintainable CSS
Efficient, maintainable CSS
 
CSS pattern libraries
CSS pattern librariesCSS pattern libraries
CSS pattern libraries
 
LESS
LESSLESS
LESS
 
Prototyping w/HTML5 and CSS3
Prototyping w/HTML5 and CSS3Prototyping w/HTML5 and CSS3
Prototyping w/HTML5 and CSS3
 
Css3
Css3Css3
Css3
 
網頁程式設計
網頁程式設計網頁程式設計
網頁程式設計
 
Sass Essentials at Mobile Camp LA
Sass Essentials at Mobile Camp LASass Essentials at Mobile Camp LA
Sass Essentials at Mobile Camp LA
 
About Best friends - HTML, CSS and JS
About Best friends - HTML, CSS and JSAbout Best friends - HTML, CSS and JS
About Best friends - HTML, CSS and JS
 
ActiveDOM
ActiveDOMActiveDOM
ActiveDOM
 

Viewers also liked

Put A Map On It! Enhanced geolocation in WordPress with Geo Mashup
Put A Map On It! Enhanced geolocation in WordPress with Geo MashupPut A Map On It! Enhanced geolocation in WordPress with Geo Mashup
Put A Map On It! Enhanced geolocation in WordPress with Geo MashupJer Clarke
 
Data Center Readiness Assessment
Data Center Readiness AssessmentData Center Readiness Assessment
Data Center Readiness AssessmentJennifer Stern
 
VMware Erdos manifesto
VMware Erdos manifestoVMware Erdos manifesto
VMware Erdos manifestoJennifer Stern
 
BMC Engage 2016 Keynote
BMC Engage 2016 KeynoteBMC Engage 2016 Keynote
BMC Engage 2016 KeynoteJennifer Stern
 
Photoshop Express Identifive Video Game
Photoshop Express Identifive Video GamePhotoshop Express Identifive Video Game
Photoshop Express Identifive Video GameJennifer Stern
 
Bringing Shadow IT Into the Light
Bringing Shadow IT Into the LightBringing Shadow IT Into the Light
Bringing Shadow IT Into the LightJennifer Stern
 
The Workplace of the Future Is Not a Place
The Workplace of the Future Is Not a PlaceThe Workplace of the Future Is Not a Place
The Workplace of the Future Is Not a PlaceJennifer Stern
 
What Do Executives Need to Do to Go Digital
What Do Executives Need to Do to Go DigitalWhat Do Executives Need to Do to Go Digital
What Do Executives Need to Do to Go DigitalJennifer Stern
 
Achieving Cloud Relevance
Achieving Cloud RelevanceAchieving Cloud Relevance
Achieving Cloud RelevanceJennifer Stern
 
Three's a Cloud Infographic
Three's a Cloud InfographicThree's a Cloud Infographic
Three's a Cloud InfographicJennifer Stern
 
Delivering the Digital Workplace Without the Chaos
Delivering the Digital Workplace Without the ChaosDelivering the Digital Workplace Without the Chaos
Delivering the Digital Workplace Without the ChaosJennifer Stern
 
Lightroom Beta Manifesto
Lightroom Beta ManifestoLightroom Beta Manifesto
Lightroom Beta ManifestoJennifer Stern
 
Digital workplace pitch deck 2:2
Digital workplace pitch deck 2:2Digital workplace pitch deck 2:2
Digital workplace pitch deck 2:2Jennifer Stern
 
Digital workplace pitch deck 1:2
Digital workplace pitch deck 1:2Digital workplace pitch deck 1:2
Digital workplace pitch deck 1:2Jennifer Stern
 
Integrated Marketing Communications
Integrated Marketing CommunicationsIntegrated Marketing Communications
Integrated Marketing CommunicationsDavidt123
 

Viewers also liked (18)

Put A Map On It! Enhanced geolocation in WordPress with Geo Mashup
Put A Map On It! Enhanced geolocation in WordPress with Geo MashupPut A Map On It! Enhanced geolocation in WordPress with Geo Mashup
Put A Map On It! Enhanced geolocation in WordPress with Geo Mashup
 
Data Center Readiness Assessment
Data Center Readiness AssessmentData Center Readiness Assessment
Data Center Readiness Assessment
 
VMware Erdos manifesto
VMware Erdos manifestoVMware Erdos manifesto
VMware Erdos manifesto
 
BMC Engage 2016 Keynote
BMC Engage 2016 KeynoteBMC Engage 2016 Keynote
BMC Engage 2016 Keynote
 
Photoshop Express Identifive Video Game
Photoshop Express Identifive Video GamePhotoshop Express Identifive Video Game
Photoshop Express Identifive Video Game
 
Bringing Shadow IT Into the Light
Bringing Shadow IT Into the LightBringing Shadow IT Into the Light
Bringing Shadow IT Into the Light
 
The Workplace of the Future Is Not a Place
The Workplace of the Future Is Not a PlaceThe Workplace of the Future Is Not a Place
The Workplace of the Future Is Not a Place
 
What Do Executives Need to Do to Go Digital
What Do Executives Need to Do to Go DigitalWhat Do Executives Need to Do to Go Digital
What Do Executives Need to Do to Go Digital
 
Achieving Cloud Relevance
Achieving Cloud RelevanceAchieving Cloud Relevance
Achieving Cloud Relevance
 
Three's a Cloud Infographic
Three's a Cloud InfographicThree's a Cloud Infographic
Three's a Cloud Infographic
 
DEMocracy Manifesto
DEMocracy ManifestoDEMocracy Manifesto
DEMocracy Manifesto
 
Little blue book
Little blue bookLittle blue book
Little blue book
 
Delivering the Digital Workplace Without the Chaos
Delivering the Digital Workplace Without the ChaosDelivering the Digital Workplace Without the Chaos
Delivering the Digital Workplace Without the Chaos
 
Lightroom Beta Manifesto
Lightroom Beta ManifestoLightroom Beta Manifesto
Lightroom Beta Manifesto
 
Digital workplace pitch deck 2:2
Digital workplace pitch deck 2:2Digital workplace pitch deck 2:2
Digital workplace pitch deck 2:2
 
Digital workplace pitch deck 1:2
Digital workplace pitch deck 1:2Digital workplace pitch deck 1:2
Digital workplace pitch deck 1:2
 
IMC of Coca Cola
IMC of Coca ColaIMC of Coca Cola
IMC of Coca Cola
 
Integrated Marketing Communications
Integrated Marketing CommunicationsIntegrated Marketing Communications
Integrated Marketing Communications
 

Similar to The Fast And The Fabulous

Css3 transitions and animations + graceful degradation with jQuery
Css3 transitions and animations + graceful degradation with jQueryCss3 transitions and animations + graceful degradation with jQuery
Css3 transitions and animations + graceful degradation with jQueryAndrea Verlicchi
 
Object oriented css graeme blackwood
Object oriented css graeme blackwoodObject oriented css graeme blackwood
Object oriented css graeme blackwooddrupalconf
 
The Future State of Layout
The Future State of LayoutThe Future State of Layout
The Future State of LayoutStephen Hay
 
Webapp Rendering and Optimization.
Webapp Rendering and Optimization.Webapp Rendering and Optimization.
Webapp Rendering and Optimization.arthurjamain
 
Object oriented css. Graeme Blackwood
Object oriented css. Graeme BlackwoodObject oriented css. Graeme Blackwood
Object oriented css. Graeme BlackwoodPVasili
 
Modern Front-End Development
Modern Front-End DevelopmentModern Front-End Development
Modern Front-End Developmentmwrather
 
The New UI - Staying Strong with Flexbox, SASS, and {{Mustache.js}}
The New UI - Staying Strong with Flexbox, SASS, and {{Mustache.js}}The New UI - Staying Strong with Flexbox, SASS, and {{Mustache.js}}
The New UI - Staying Strong with Flexbox, SASS, and {{Mustache.js}}Eric Carlisle
 
Architecting with Style
Architecting with StyleArchitecting with Style
Architecting with StyleTimothy Knight
 
Faking a Grid - Franco Alvarado (Macmillan Learning), Betsy Granger (Macmilla...
Faking a Grid - Franco Alvarado (Macmillan Learning), Betsy Granger (Macmilla...Faking a Grid - Franco Alvarado (Macmillan Learning), Betsy Granger (Macmilla...
Faking a Grid - Franco Alvarado (Macmillan Learning), Betsy Granger (Macmilla...BookNet Canada
 
Designing True Cross-Platform Apps
Designing True Cross-Platform AppsDesigning True Cross-Platform Apps
Designing True Cross-Platform AppsFITC
 
Pre-processing for Fronteers by Viking Kristof Houben
Pre-processing for Fronteers by Viking Kristof HoubenPre-processing for Fronteers by Viking Kristof Houben
Pre-processing for Fronteers by Viking Kristof HoubenMobile Vikings
 
Html css workshop, lesson 0, how browsers work
Html css workshop, lesson 0, how browsers workHtml css workshop, lesson 0, how browsers work
Html css workshop, lesson 0, how browsers workAlbino Tonnina
 
CMF: a pain in the F @ PHPDay 05-14-2011
CMF: a pain in the F @ PHPDay 05-14-2011CMF: a pain in the F @ PHPDay 05-14-2011
CMF: a pain in the F @ PHPDay 05-14-2011Alessandro Nadalin
 
Teams, styles and scalable applications
Teams, styles and scalable applicationsTeams, styles and scalable applications
Teams, styles and scalable applicationsVittorio Vittori
 
Between a Block & a Hard Place
Between a Block & a Hard PlaceBetween a Block & a Hard Place
Between a Block & a Hard PlaceWP Engine
 
Building Better Responsive Websites
Building Better Responsive WebsitesBuilding Better Responsive Websites
Building Better Responsive WebsitesHolger Bartel
 

Similar to The Fast And The Fabulous (20)

CSS Wish List @JSConf
CSS Wish List @JSConfCSS Wish List @JSConf
CSS Wish List @JSConf
 
Css3 transitions and animations + graceful degradation with jQuery
Css3 transitions and animations + graceful degradation with jQueryCss3 transitions and animations + graceful degradation with jQuery
Css3 transitions and animations + graceful degradation with jQuery
 
Object oriented css graeme blackwood
Object oriented css graeme blackwoodObject oriented css graeme blackwood
Object oriented css graeme blackwood
 
The Future State of Layout
The Future State of LayoutThe Future State of Layout
The Future State of Layout
 
Webapp Rendering and Optimization.
Webapp Rendering and Optimization.Webapp Rendering and Optimization.
Webapp Rendering and Optimization.
 
Object oriented css. Graeme Blackwood
Object oriented css. Graeme BlackwoodObject oriented css. Graeme Blackwood
Object oriented css. Graeme Blackwood
 
Modern Front-End Development
Modern Front-End DevelopmentModern Front-End Development
Modern Front-End Development
 
Advanced Layout Techniques @ CMSExpo
Advanced Layout Techniques @ CMSExpoAdvanced Layout Techniques @ CMSExpo
Advanced Layout Techniques @ CMSExpo
 
The New UI - Staying Strong with Flexbox, SASS, and {{Mustache.js}}
The New UI - Staying Strong with Flexbox, SASS, and {{Mustache.js}}The New UI - Staying Strong with Flexbox, SASS, and {{Mustache.js}}
The New UI - Staying Strong with Flexbox, SASS, and {{Mustache.js}}
 
Architecting with Style
Architecting with StyleArchitecting with Style
Architecting with Style
 
Faking a Grid - Franco Alvarado (Macmillan Learning), Betsy Granger (Macmilla...
Faking a Grid - Franco Alvarado (Macmillan Learning), Betsy Granger (Macmilla...Faking a Grid - Franco Alvarado (Macmillan Learning), Betsy Granger (Macmilla...
Faking a Grid - Franco Alvarado (Macmillan Learning), Betsy Granger (Macmilla...
 
slides-students-C04.pdf
slides-students-C04.pdfslides-students-C04.pdf
slides-students-C04.pdf
 
Designing True Cross-Platform Apps
Designing True Cross-Platform AppsDesigning True Cross-Platform Apps
Designing True Cross-Platform Apps
 
Pre-processing for Fronteers by Viking Kristof Houben
Pre-processing for Fronteers by Viking Kristof HoubenPre-processing for Fronteers by Viking Kristof Houben
Pre-processing for Fronteers by Viking Kristof Houben
 
Html css workshop, lesson 0, how browsers work
Html css workshop, lesson 0, how browsers workHtml css workshop, lesson 0, how browsers work
Html css workshop, lesson 0, how browsers work
 
CMF: a pain in the F @ PHPDay 05-14-2011
CMF: a pain in the F @ PHPDay 05-14-2011CMF: a pain in the F @ PHPDay 05-14-2011
CMF: a pain in the F @ PHPDay 05-14-2011
 
Teams, styles and scalable applications
Teams, styles and scalable applicationsTeams, styles and scalable applications
Teams, styles and scalable applications
 
Between a Block & a Hard Place
Between a Block & a Hard PlaceBetween a Block & a Hard Place
Between a Block & a Hard Place
 
Reveal
RevealReveal
Reveal
 
Building Better Responsive Websites
Building Better Responsive WebsitesBuilding Better Responsive Websites
Building Better Responsive Websites
 

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
 
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 PerformanceNicole Sullivan
 
Our Best Practices Are Killing Us
Our Best Practices Are Killing UsOur Best Practices Are Killing Us
Our Best Practices Are Killing UsNicole Sullivan
 
5 Mistakes of Massive CSS
5 Mistakes of Massive CSS5 Mistakes of Massive CSS
5 Mistakes of Massive CSSNicole 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 PerformanceNicole Sullivan
 

More from Nicole Sullivan (13)

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
 
Our Best Practices Are Killing Us
Our Best Practices Are Killing UsOur Best Practices Are Killing Us
Our Best Practices Are Killing Us
 
CSS Bloat!
CSS Bloat!CSS Bloat!
CSS Bloat!
 
5 Mistakes of Massive CSS
5 Mistakes of Massive CSS5 Mistakes of Massive CSS
5 Mistakes of Massive CSS
 
Object Oriented CSS
Object Oriented CSSObject Oriented CSS
Object Oriented CSS
 
Pourquoi la performance?
Pourquoi la performance?Pourquoi la performance?
Pourquoi la performance?
 
Design Fast Websites
Design Fast WebsitesDesign Fast Websites
Design Fast Websites
 
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

Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...DianaGray10
 
Artificial Intelligence & SEO Trends for 2024
Artificial Intelligence & SEO Trends for 2024Artificial Intelligence & SEO Trends for 2024
Artificial Intelligence & SEO Trends for 2024D Cloud Solutions
 
Bird eye's view on Camunda open source ecosystem
Bird eye's view on Camunda open source ecosystemBird eye's view on Camunda open source ecosystem
Bird eye's view on Camunda open source ecosystemAsko Soukka
 
Videogame localization & technology_ how to enhance the power of translation.pdf
Videogame localization & technology_ how to enhance the power of translation.pdfVideogame localization & technology_ how to enhance the power of translation.pdf
Videogame localization & technology_ how to enhance the power of translation.pdfinfogdgmi
 
COMPUTER 10 Lesson 8 - Building a Website
COMPUTER 10 Lesson 8 - Building a WebsiteCOMPUTER 10 Lesson 8 - Building a Website
COMPUTER 10 Lesson 8 - Building a Websitedgelyza
 
Comparing Sidecar-less Service Mesh from Cilium and Istio
Comparing Sidecar-less Service Mesh from Cilium and IstioComparing Sidecar-less Service Mesh from Cilium and Istio
Comparing Sidecar-less Service Mesh from Cilium and IstioChristian Posta
 
UiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation DevelopersUiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation DevelopersUiPathCommunity
 
Basic Building Blocks of Internet of Things.
Basic Building Blocks of Internet of Things.Basic Building Blocks of Internet of Things.
Basic Building Blocks of Internet of Things.YounusS2
 
Igniting Next Level Productivity with AI-Infused Data Integration Workflows
Igniting Next Level Productivity with AI-Infused Data Integration WorkflowsIgniting Next Level Productivity with AI-Infused Data Integration Workflows
Igniting Next Level Productivity with AI-Infused Data Integration WorkflowsSafe Software
 
COMPUTER 10: Lesson 7 - File Storage and Online Collaboration
COMPUTER 10: Lesson 7 - File Storage and Online CollaborationCOMPUTER 10: Lesson 7 - File Storage and Online Collaboration
COMPUTER 10: Lesson 7 - File Storage and Online Collaborationbruanjhuli
 
Linked Data in Production: Moving Beyond Ontologies
Linked Data in Production: Moving Beyond OntologiesLinked Data in Production: Moving Beyond Ontologies
Linked Data in Production: Moving Beyond OntologiesDavid Newbury
 
Building Your Own AI Instance (TBLC AI )
Building Your Own AI Instance (TBLC AI )Building Your Own AI Instance (TBLC AI )
Building Your Own AI Instance (TBLC AI )Brian Pichman
 
Secure your environment with UiPath and CyberArk technologies - Session 1
Secure your environment with UiPath and CyberArk technologies - Session 1Secure your environment with UiPath and CyberArk technologies - Session 1
Secure your environment with UiPath and CyberArk technologies - Session 1DianaGray10
 
VoIP Service and Marketing using Odoo and Asterisk PBX
VoIP Service and Marketing using Odoo and Asterisk PBXVoIP Service and Marketing using Odoo and Asterisk PBX
VoIP Service and Marketing using Odoo and Asterisk PBXTarek Kalaji
 
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve DecarbonizationUsing IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve DecarbonizationIES VE
 
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdf
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdfIaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdf
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdfDaniel Santiago Silva Capera
 
Empowering Africa's Next Generation: The AI Leadership Blueprint
Empowering Africa's Next Generation: The AI Leadership BlueprintEmpowering Africa's Next Generation: The AI Leadership Blueprint
Empowering Africa's Next Generation: The AI Leadership BlueprintMahmoud Rabie
 
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCostKubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCostMatt Ray
 
NIST Cybersecurity Framework (CSF) 2.0 Workshop
NIST Cybersecurity Framework (CSF) 2.0 WorkshopNIST Cybersecurity Framework (CSF) 2.0 Workshop
NIST Cybersecurity Framework (CSF) 2.0 WorkshopBachir Benyammi
 

Recently uploaded (20)

Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
 
Artificial Intelligence & SEO Trends for 2024
Artificial Intelligence & SEO Trends for 2024Artificial Intelligence & SEO Trends for 2024
Artificial Intelligence & SEO Trends for 2024
 
Bird eye's view on Camunda open source ecosystem
Bird eye's view on Camunda open source ecosystemBird eye's view on Camunda open source ecosystem
Bird eye's view on Camunda open source ecosystem
 
Videogame localization & technology_ how to enhance the power of translation.pdf
Videogame localization & technology_ how to enhance the power of translation.pdfVideogame localization & technology_ how to enhance the power of translation.pdf
Videogame localization & technology_ how to enhance the power of translation.pdf
 
COMPUTER 10 Lesson 8 - Building a Website
COMPUTER 10 Lesson 8 - Building a WebsiteCOMPUTER 10 Lesson 8 - Building a Website
COMPUTER 10 Lesson 8 - Building a Website
 
Comparing Sidecar-less Service Mesh from Cilium and Istio
Comparing Sidecar-less Service Mesh from Cilium and IstioComparing Sidecar-less Service Mesh from Cilium and Istio
Comparing Sidecar-less Service Mesh from Cilium and Istio
 
UiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation DevelopersUiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation Developers
 
Basic Building Blocks of Internet of Things.
Basic Building Blocks of Internet of Things.Basic Building Blocks of Internet of Things.
Basic Building Blocks of Internet of Things.
 
Igniting Next Level Productivity with AI-Infused Data Integration Workflows
Igniting Next Level Productivity with AI-Infused Data Integration WorkflowsIgniting Next Level Productivity with AI-Infused Data Integration Workflows
Igniting Next Level Productivity with AI-Infused Data Integration Workflows
 
20150722 - AGV
20150722 - AGV20150722 - AGV
20150722 - AGV
 
COMPUTER 10: Lesson 7 - File Storage and Online Collaboration
COMPUTER 10: Lesson 7 - File Storage and Online CollaborationCOMPUTER 10: Lesson 7 - File Storage and Online Collaboration
COMPUTER 10: Lesson 7 - File Storage and Online Collaboration
 
Linked Data in Production: Moving Beyond Ontologies
Linked Data in Production: Moving Beyond OntologiesLinked Data in Production: Moving Beyond Ontologies
Linked Data in Production: Moving Beyond Ontologies
 
Building Your Own AI Instance (TBLC AI )
Building Your Own AI Instance (TBLC AI )Building Your Own AI Instance (TBLC AI )
Building Your Own AI Instance (TBLC AI )
 
Secure your environment with UiPath and CyberArk technologies - Session 1
Secure your environment with UiPath and CyberArk technologies - Session 1Secure your environment with UiPath and CyberArk technologies - Session 1
Secure your environment with UiPath and CyberArk technologies - Session 1
 
VoIP Service and Marketing using Odoo and Asterisk PBX
VoIP Service and Marketing using Odoo and Asterisk PBXVoIP Service and Marketing using Odoo and Asterisk PBX
VoIP Service and Marketing using Odoo and Asterisk PBX
 
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve DecarbonizationUsing IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
 
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdf
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdfIaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdf
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdf
 
Empowering Africa's Next Generation: The AI Leadership Blueprint
Empowering Africa's Next Generation: The AI Leadership BlueprintEmpowering Africa's Next Generation: The AI Leadership Blueprint
Empowering Africa's Next Generation: The AI Leadership Blueprint
 
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCostKubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
 
NIST Cybersecurity Framework (CSF) 2.0 Workshop
NIST Cybersecurity Framework (CSF) 2.0 WorkshopNIST Cybersecurity Framework (CSF) 2.0 Workshop
NIST Cybersecurity Framework (CSF) 2.0 Workshop
 

The Fast And The Fabulous

  • 1. Nicole Sullivan THE FAST AND THE FABULOUS
  • 2. WHY ARE YOU HERE?
  • 3. IS CSS DESIGN OR ENGINEERING?
  • 4. IS YOUR CSS FILE GROWING LIKE A WEED?
  • 5. GOOD NEWS CSS and front-end architecture have a huge impact on performance.
  • 6. AND BAD NEWS If I don’t do my job right, I can slow your site down to a crawl
  • 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. WHAT COUNTS? toward fast design
  • 9. PAGE WEIGHT the heavier your page, the slower it will be
  • 12. REQUIRED: ❖ Firefox ❖ Firebug ❖ http://OOCSS.org http://www.slideshare.net/stubbornella
  • 13. WHAT IS OBJECT-ORIENTED CSS? A framework? A tool? A philosophy?
  • 14. MORE LIKE AN EVOLUTION OF THE LANGUAGE it makes CSS more powerful
  • 15. HOW IS IT DIFFERENT? ul{...} ul li{...} ul li a{...}
  • 16. HOW IS IT DIFFERENT? ul{...} ul li{...} ul li a{...} Until now, we focused all our effort here
  • 17. HOW IS IT DIFFERENT? ul{...} ul li{...} ul li a{...} But, the architecture lives here
  • 18. “JAVASCRIPT DOESN’T SUCK You’re just doing it wrong.” -- Doug Crockford
  • 19. “JAVASCRIPT DOESN’T SUCK You’re just doing it wrong.” -- Doug Crockford
  • 20. CSS “JAVASCRIPT DOESN’T SUCK You’re just doing it wrong.” -- Doug Crockford
  • 21. CSS CIRCA 2005 total spaghetti
  • 23. CSS CIRCA 2008 a little better
  • 24. RATHER THAN MAKING OUR CODE PLAY NICE We built big fences
  • 27. SITES GET SLOW As file size and HTTP requests are not optimized
  • 29. OBJECT ORIENTED CSS best practices for performance, scalability, and most importantly, ease of use.
  • 30. 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
  • 31. LEARN MORE designing fast websites
  • 32. LEARN MORE image optimization Even Faster Webistes with Stoyan Stefanov
  • 33. CREATE A COMPONENT LIBRARY of reusable “legos”
  • 34. REUSING ELEMENTS MAKES THEM performance “freebies”
  • 35. COMPONENTS ARE LIKE LEGO Mix and match to create diverse and interesting pages.
  • 36. BUILD HTML FROM THE COMPONENT LIBRARY. New pages should not generally require additional CSS
  • 37. 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
  • 38. 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.
  • 39. 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
  • 40. AVOID DUPLICATION Wasting performance resources on components that can’t add value.
  • 41. NEARLY IDENTICAL MODULES Headings 3 and 5 are too similar.
  • 42. 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!
  • 43. HOW ABOUT AN EXAMPLE? Yahoo! Personal Finance
  • 44. 2+ DIFFERENT TAB STYLES. COULD THEY USE THE SAME IMAGES?
  • 45. 3 contour components are too similar. Chose one.
  • 46. Changes in module width, background color, or background image are an excellent example of module reuse.
  • 47. AVOID LOCATION- DEPENDENT STYLES Sandboxing is better than spaghetti, but leads to performance problems
  • 52. EVERY NOW AND THEN...
  • 55. IN CSS WE DO THIS ALL THE TIME
  • 57. A Heading should not become a Heading in another part of the page.
  • 58. 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
  • 59. 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
  • 60. CONSISTENCY Writing more rules to overwrite the crazy rules from before. e.g. Heading should behave predictably in any module.
  • 61. TRY THIS INSTEAD h1, .h1{...} h2, .h2{...} h3, .h3{...} h4, .h4{...} h5, .h5{...} h6, .h6{...} ❖ Global values defined ❖ Semantics respected (while allowing visual flexibility)
  • 62. NEED MORE THAN 6 HEADINGS? Really? Any duplicates? Any too similar?
  • 63. 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
  • 65. person-man-photographer person-woman-photographer REPETITION OF CODE caused by a failure to abstract different levels of semantics
  • 66. SEPARATE: ❖ Container and Content ❖ Structure and Skin ❖ Contour and Background ❖ Objects and Mixins
  • 67. SEPARATE CONTAINER AND CONTENT define the boundaries of each object
  • 68. 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
  • 69. image or flash OPEN EDITABLE ZONE
  • 71. 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
  • 72. MIX AND MATCH Container and content objects to achieve high performance design.
  • 73. SEPARATE CONTOUR AND BACKGROUND transparent on the Inside!
  • 74. MAKING IT LOOK FAB Requires careful choice of pixels. Bonus: Consider PNG8 for progressive enhancement http://alistapart.com/articles/mountaintop/
  • 76. SEPARATE STRUCTURE FROM SKIN two separate classes
  • 77. 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
  • 78. mod block inner hd STRUCTURE Solves browser bugs, positions bd presentational elems, and generally does the heavy lifting of CSS. ft
  • 79. mod block inner hd STRUCTURE Solves browser bugs, positions bd presentational elems, and generally does the heavy lifting of CSS. ft
  • 80. mod complex mod complex
  • 82. SKIN Makes it pretty. The goal is very predictable skins, complexity is absorbed by the structure object and shared across the site.
  • 83. /* ----- 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
  • 84. WHAT BELONGS IN THE SKIN? Every value in the skin should be predictable, something that can easily be calculated or measured. Colors Borders Images
  • 88. FIXED DIMENSIONS limit the ways in which a module can be reused
  • 89. LEARN TO LOVE GRIDS and believe they can be beautiful
  • 90. 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
  • 91. HTML line unit 1/4 unit 3/4 lastUnit
  • 92. HTML unit 1/4 unit 3/4 lastUnit
  • 93. (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;}
  • 99. fluid 960 grid system
  • 100. OUTCOMES If the theory is right, it should yield better results.
  • 101. TEMPLATE • 807 bytes • 13 lines of code • easily extended to custom page and column width
  • 102. 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
  • 103. MODULE • 1.3K (structure) • 22 lines of code • Width and height agnostic • Three structures • 264 different combos of skins
  • 104. YOUR TURN! Modify the template
  • 106. 1. Remove right column http://wiki.github.com/stubbornella/oocss
  • 107. 1. Remove right column 2. Change left column width to 300px http://wiki.github.com/stubbornella/oocss
  • 108. 1. Remove right column 2. Change left column width to 300px 3. Save as myPage.html http://wiki.github.com/stubbornella/oocss
  • 109. 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
  • 112. 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
  • 113. 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
  • 115. 1. Insert “grab” module in each unit http://wiki.github.com/stubbornella/oocss/module
  • 116. 1. Insert “grab” module in each unit 2. Change modules to grab, onlinestore, faq, and about http://wiki.github.com/stubbornella/oocss/module
  • 118. 1. Change block headers to baz, online, help, and info
  • 120. 1. Remove left column
  • 122. 1. Paste popup_html.txt after the foot
  • 123. 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
  • 124. 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