Managing CSS for a big ass website - at Netlog

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

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

Managing CSS for a big ass website - at Netlog

by Lennart Schoors

Accessibility

Categories

Upload Details

Usage Rights

9 Embeds 456

Statistics

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