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

6,040

Published on

presented at Barcamp Antwerp 4, September 11, 2010

Published in: Technology
0 Comments
7 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
6,040
On Slideshare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
56
Comments
0
Likes
7
Embeds 0
No embeds

No notes for slide

Managing CSS for a big ass website - at Netlog

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

    Clipping is a handy way to collect important slides you want to go back to later.

×