Your SlideShare is downloading. ×
Managing CSS for a big ass website - at Netlog
Managing CSS for a big ass website - at Netlog
Managing CSS for a big ass website - at Netlog
Managing CSS for a big ass website - at Netlog
Managing CSS for a big ass website - at Netlog
Managing CSS for a big ass website - at Netlog
Managing CSS for a big ass website - at Netlog
Managing CSS for a big ass website - at Netlog
Managing CSS for a big ass website - at Netlog
Managing CSS for a big ass website - at Netlog
Managing CSS for a big ass website - at Netlog
Managing CSS for a big ass website - at Netlog
Managing CSS for a big ass website - at Netlog
Managing CSS for a big ass website - at Netlog
Managing CSS for a big ass website - at Netlog
Managing CSS for a big ass website - at Netlog
Managing CSS for a big ass website - at Netlog
Managing CSS for a big ass website - at Netlog
Managing CSS for a big ass website - at Netlog
Managing CSS for a big ass website - at Netlog
Managing CSS for a big ass website - at Netlog
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Managing CSS for a big ass website - at Netlog

5,906

Published on

presented at Barcamp Antwerp 4, September 11, 2010

presented at Barcamp Antwerp 4, September 11, 2010

Published in: Technology
0 Comments
7 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
5,906
On Slideshare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
55
Comments
0
Likes
7
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 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="" />
  • 10. 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="" />
  • 11. netlog.css consists of (3/3) . netlog.wrapper.css . header & footer styles . netlog.forms.css . buttons & inputs, form layouts, … . netlog.ads.css
  • 12. 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
  • 13. Our code . lots of comments . headings & subheadings . indentation
  • 14. . 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”
  • 15. Some call it ... “OOCSS” ... but CSS is not programming ;-)
  • 16. Deploying
  • 17. Deploy script . check diff . combines & minifies specified files . rsync to our servers . sync to CDN
  • 18. 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
  • 19. That’s all folks! Questions? Read on at http://lensco.be

×