Managing CSS for a big ass website - at Netlog
Upcoming SlideShare
Loading in...5
×
 

Managing CSS for a big ass website - at Netlog

on

  • 6,736 views

presented at Barcamp Antwerp 4, September 11, 2010

presented at Barcamp Antwerp 4, September 11, 2010

Statistics

Views

Total Views
6,736
Views on SlideShare
6,264
Embed Views
472

Actions

Likes
7
Downloads
49
Comments
0

9 Embeds 472

http://www.westworld.be 238
http://lensco.be 218
http://translate.googleusercontent.com 4
http://paper.li 4
http://www.linkedin.com 3
http://webcache.googleusercontent.com 2
http://static.slidesharecdn.com 1
http://feeds.feedburner.com 1
http://localhost:8888 1
More...

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

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

Managing CSS for a big ass website - at Netlog Managing CSS for a big ass website - at Netlog Presentation Transcript

  • Managing CSS for a BIG ASS WEBSITE – at Netlog – Lennart Schoors
  • Me . web designer at Netlog http://www.netlog.com . blog at http://lensco.be
  • Netlog
  • How big is big ass? . 100.000.000 visitors/month . 3.000.000.000 pageviews/month . more than 1.500 templates . lots of traffic & lots of different pages . 3 designers (vs. ~15 developers)
  • Environment Staging Live . full, commented . minified . seperate files . concatenated . about 60 CSS files . about 40 CSS files . in SVN . 3-4 files/page max . served from CDN
  • Framework
  • netlog.css . the engine . about 150kb . used sitewide on nearly every page
  • netlog.css consists of (1/3) . netlog.core.css . css reset, typography (all of it), basic elements & headings, common classes like left, right, clearfix, clear, lists, … . netlog.common.css . "grid", boxes, building blocks & widgets, navigation, tabs, status messages, dialogs
  • netlog.css consists of (2/3) . netlog.icons.css & netlog.ui.css . images sprites . use text clippings to expand “icon” to <img src="{top.__static}/s/i/common/blank.gif" class="icon icon " alt="" />
  • bonus tip . hover & selected states for icon sprites <img src="{top.__static}/s/i/common/blank.gif" class="icon iconDelete iconOn" alt="" /> <img src="{top.__static}/s/i/common/blank.gif" class="icon iconDeleteAlt iconOff" alt="" />
  • netlog.css consists of (3/3) . netlog.wrapper.css . header & footer styles . netlog.forms.css . buttons & inputs, form layouts, … . netlog.ads.css
  • Other files . seperate file per “vertical” . seperate files for certain features . IE6 & IE7 styles via conditional comments . Right-to-left styles for RTL languages . mobile . external widgets
  • Our code . lots of comments . headings & subheadings . indentation
  • . emphasis on classes & combing them <a href="/foo" class="button buttonSmall buttonRed buttonCapitals inline">bar</a> . shift the load from always downloaded CSS to take-what-you-need HTML . “new pages don't need new css”
  • Some call it ... “OOCSS” ... but CSS is not programming ;-)
  • Deploying
  • Deploy script . check diff . combines & minifies specified files . rsync to our servers . sync to CDN
  • Dealing with cache . deploy bumps version number in config http://v.netlogstatic.com/v6.00/3077/s/c/netlog.css . now global, soon per file
  • That’s all folks! Questions? Read on at http://lensco.be