Managing CSS for a big ass website - at Netlog
10 likes4,666 views
1) Netlog is a very large website with over 100 million visitors and 3 billion pageviews per month, requiring efficient CSS management for their over 1500 templates. 2) Their CSS framework separates styles into core, common, icon, UI, wrapper, and form files aggregated into a single minified file for production, while keeping files separated for development. 3) They use a deploy script to combine, minify, version, and sync CSS files to servers and CDNs to efficiently manage caching for their large traffic.
Managing CSS for a big ass website - at Netlog
- 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