Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
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 tra...
Environment
Staging                 Live
 . full, commented       . minified
 . seperate files        . concatenated
 . ab...
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 & h...
netlog.css consists of              (2/3)

 . netlog.icons.css & netlog.ui.css
    . images sprites
    . use text clippin...
bonus tip
. hover & selected states for icon sprites
 <img src="{top.__static}/s/i/common/blank.gif"
 class="icon iconDele...
netlog.css consists of        (3/3)

 . netlog.wrapper.css
    . header & footer styles
 . netlog.forms.css
    . buttons ...
Other files
 . seperate file per “vertical”
 . seperate files for certain features
 . IE6 & IE7 styles via conditional com...
Our code
. lots of comments
. headings & subheadings
. indentation
. emphasis on classes & combing them
<a href="/foo" class="button buttonSmall buttonRed
buttonCapitals inline">bar</a>



...
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 g...
That’s all folks!
Questions?




Read on at http://lensco.be
Managing CSS for a big ass website - at Netlog
Managing CSS for a big ass website - at Netlog
Upcoming SlideShare
Loading in …5
×

Managing CSS for a big ass website - at Netlog

7,730 views

Published on

presented at Barcamp Antwerp 4, September 11, 2010

Published in: Technology
  • Be the first to comment

Managing CSS for a big ass website - at Netlog

  1. Managing CSS for a BIG ASS WEBSITE – at Netlog – Lennart Schoors
  2. Me . web designer at Netlog http://www.netlog.com . blog at http://lensco.be
  3. Netlog
  4. 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)
  5. 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
  6. Framework
  7. netlog.css . the engine . about 150kb . used sitewide on nearly every page
  8. 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
  9. 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="" />
  10. 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="" />
  11. netlog.css consists of (3/3) . netlog.wrapper.css . header & footer styles . netlog.forms.css . buttons & inputs, form layouts, … . netlog.ads.css
  12. 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
  13. Our code . lots of comments . headings & subheadings . indentation
  14. . 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”
  15. Some call it ... “OOCSS” ... but CSS is not programming ;-)
  16. Deploying
  17. Deploy script . check diff . combines & minifies specified files . rsync to our servers . sync to CDN
  18. 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
  19. That’s all folks! Questions? Read on at http://lensco.be

×