• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
OOCSS presentation
 

OOCSS presentation

on

  • 3,451 views

Presentation I did at the Tauranga Web Meetup. All credit to Nicole Sullivan for this, I just tried to relay the message.

Presentation I did at the Tauranga Web Meetup. All credit to Nicole Sullivan for this, I just tried to relay the message.

http://oocss.org/
http://www.stubbornella.org/

Statistics

Views

Total Views
3,451
Views on SlideShare
2,976
Embed Views
475

Actions

Likes
4
Downloads
35
Comments
0

4 Embeds 475

http://makoto-tanaka.com 460
http://startnewday85.blogspot.com 12
http://webcache.googleusercontent.com 2
http://www.linkedin.com 1

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • Hi I’m Andrew Ford, I’m a Team leader and UI Developer at Cucumber. On Feburay the 13th I attended a workshop at Webstock calledCSS of the future – Building with Object Orientated CSS. It was run by Nicole Sullivan. She’s worked for the likes of Facebook, Yahoo, Box.net and salesforce.
  • So you have a large site, with tons of pages and multiple layouts'. Your constantly adding new features, updating old ones, getting multiple people to work on the site who are less familiar with it so on and so on. What happens to your CSS?
  • You end up with bloat and a poor performing website.
  • This happened to Facebook. Before Nicole started helping them they had 700 css files, they had 1.9mb of CSS. Prime example of massive CSS gone wrong in about 2007.
  • With Massive sites you have to be an expert of the site to modify or add to the css
  • Each feature or module you add the CSS grows
  • Do you guys know what a specificitybomb is? It’s were you keep adding elements to your styling so no one else on the team can override it.
  • We make a 1:1 relationship of the CSS and the modules we create soon enough we’ve doubled or tripled the size of the CSS, and were struggling to make changes due to all the bugs we create.

OOCSS presentation OOCSS presentation Presentation Transcript

  • OOCSS
    Object Orientated CSS
  • The problem?
  • BLOAT!
  • Had 700 CSS files
    Had 1.9mb of CSS
  • Have to be an expert in the siteto modify or add
  • Each new addition to the site, the CSS grows
  • CSS re-use is almost non-existent
  • Code is fragile, have to be more specific to not break other peoples styling.CSS specificitybombs!
  • We make a 1:1 relationship of the CSS & the modules we create
  • How to get round it?
    OOCSS
  • Create your CSS like Lego blocks
  • Lego blocks can be used to make up many different unique structures from the same elements
  • Create a Component library
    http://oocss.org/ex/library.html
  • Separate container and content
    Break the dependency between the container module and the content
  • Build the HTML from the component library
  • Separate structure and skin
    Abstract the structure of the block from the skin which is being applied
  • Lego blocks first
    Design your individual pages only once you have all the lego blocks in front of you
  • Rule of thumb
    If two modules look too similar to include on the same page, they are two similar to have on the site.
    Choose ONE!
  • Mix and match
    Container and content objects to achieve high performance design.
  • Never specify element
    DO: .class
    Don’t: div.class
  • Be Flexible
    Extensible height and width.
    Let the grid control the width and the content control the height.
  • Learn to love grids
  • Mark up and CSS become predictable & consistent
  • Photo credits
    http://www.flickr.com/photos/garlandcannon/4558340132/sizes/l/in/photostream/
    http://www.flickr.com/photos/shawno/3869415226/sizes/l/in/photostream/
    http://www.flickr.com/photos/wakingphotolife/5341066143/sizes/l/in/photostream/
    http://www.flickr.com/photos/evaekeblad/454220744/sizes/o/in/photostream/
    http://www.flickr.com/photos/builtbydave/4584358158/sizes/l/in/photostream/
    http://www.flickr.com/photos/seyerce/342265015/sizes/l/in/photostream/
    http://www.flickr.com/photos/aplumb/3890010967/sizes/l/in/photostream/
    http://www.flickr.com/photos/teknokool/117340388/sizes/o/in/photostream/
    http://www.flickr.com/photos/21561428@N03/4991300232/sizes/l/in/photostream/
  • More info
    OOCSS framework - https://github.com/stubbornella/oocss/
    Nicole Sullivan’s blog - http://www.stubbornella.org/
    Slideshare - http://www.slideshare.net/stubbornella
    OOCSS.org - http://oocss.org/
    Me:
    Twitter: @drewjford
    Email: andrew@andrewford.co.nz