Managing CSS for a big ass website - at Netlog

Managing CSS for a

BIG ASSWEBSITE

– at Netlog –

Lennart Schoors

Me

.web designer at Netloghttp://www.netlog.com

. blog at http://lensco.be

Netlog

.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)

How big is big ass?

Environment

.minified

.concatenated

.about 40 CSS files

.3-4 files/page max

. served from CDN

Staging

. full, commented

. seperate files

.about 60 CSS files

. in SVN

Live

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="" />

.hover & selected states for icon sprites

bonus tip

<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”

“OOCSS”... but CSS is not programming ;-)

Some call it ...

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!

Read on at http://lensco.be

Questions?