managing css for a big ass website - at netlog
DESCRIPTION
presented at Barcamp Antwerp 4, September 11, 2010TRANSCRIPT
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