presented at Barcamp Antwerp 4, September 11, 2010

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

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

12. netlog.css consists of (3/3)
. netlog.wrapper.css
. header & footer styles
. netlog.forms.css
. buttons & inputs, form layouts, …
. netlog.ads.css

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

14. Our code
. lots of comments
. headings & subheadings
. indentation

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

17. Some call it ...
“OOCSS”
... but CSS is not programming ;-)

18. Deploying

19. Deploy script
. check diff
. combines & minifies specified files
. rsync to our servers
. sync to CDN

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

21. That’s all folks!
Questions?
Read on at http://lensco.be