Efficient, maintainable CSS
 

Efficient, maintainable CSS

on

  • 51,164 views

Many web sites have moved away from table based layouts to CSS. But what about the longer term? Is you CSS efficient, maintainable and modular? Find out about taking your CSS to the next level.

Many web sites have moved away from table based layouts to CSS. But what about the longer term? Is you CSS efficient, maintainable and modular? Find out about taking your CSS to the next level.

Statistics

Views

Total Views
51,164
Views on SlideShare
35,157
Embed Views
16,007

Actions

Likes
207
Downloads
2,022
Comments
13

187 Embeds 16,007

http://woorkup.com 6517
http://how2designweb.wordpress.com 2097
http://higher.com.ua 658
http://css9.net 613
http://blog.dreamcss.com 597
http://www.barbarosalp.com 556
http://www.chinaz.com 427
http://vagabundia.blogspot.com 311
http://variable3.com 290
http://trend21c.tistory.com 242
http://www.bobd.cn 230
http://vivaotux.blogspot.com 209
http://www.2hjob.com 204
http://vanilladesign.ru 195
http://www.maxdesign.com.au 190
http://css.piotrkulpinski.com 185
http://www.santanu.in 181
http://4evervoyage.net 176
http://blog.xmagicwu.com 144
http://www.giuseppebeghelli.it 140
http://csstips.pl 124
http://www.slideshare.net 123
http://kratce.vzhurudolu.cz 106
http://blog.solucionex.com 89
http://www.webjx.com 80
http://barbarosalp.com 79
http://localhost 76
http://vivaotux.blogspot.com.br 74
http://www.dyanfield.com 69
http://vishalkinikar.com 58
http://fabiancouto.wordpress.com 52
http://www.ilovejs.net 50
http://www.colordeu.es 41
http://littleprince.dyndns.org 31
http://www.daubu.info 31
http://chinaz.com 28
http://daubu.info 23
http://yuanyun.blogbus.com 23
http://www.hanrss.com 23
http://home.cnblogs.com 22
http://techmaster.vn 22
http://smashingweb.info 21
http://yoso.tw 21
http://zoomrotate.blogspot.com 20
http://www.dougegen.de 20
https://how2designweb.wordpress.com 18
http://www.cnblogs.com 18
http://blog.fengyiyi.com 18
http://translate.googleusercontent.com 17
http://jersus.blogspot.com 17
More...

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel

15 of 13 Post a comment

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Efficient, maintainable CSS Efficient, maintainable CSS Presentation Transcript

  • efficientmaintainable, modularCSS
  • Here are some quick tips for creating efficient, maintainable CSS.
  • Applying CSS
  • 1. Avoid using inline styles as they are hard to maintain and increase file size. Avoid<body><h2 style=“color: red;”>! Heading here</h2>
  • 2. Avoid using header styles as they are also hard to maintain and increase file size. Avoid<style> p { color: red; }</style>
  • 3. Avoid using @import withinthe HTML as this will slow down IE browsers. Avoid<style> @import "a.css";</style>
  • 4. Avoid using multiple CSS files, or use a script to combine all CSS files into one.<link rel="stylesheet" href=”reset.css"><link rel="stylesheet" href=”grids.css"><link rel="stylesheet" href=”text.css"><link rel="stylesheet" href=”modules.css"><link rel="stylesheet" href=”colors.css"> Avoid
  • Writing CSS rules
  • 5. Use multiple declarations where possiblep{! margin: 0 0 1.5em;! background: green;}
  • 6. Use multiple selectors where possibleh1, h2, h3, h4, h5{! color: #666;! margin: 0 0 .5em;}
  • 7. Use shorthand properties where possible.body Avoid{ margin-top: 20px; margin-right: 10px; margin-bottom: 20px; margin-left: 10px;} Preferredbody { margin: 20px 10px; }
  • 8. Avoid !important as it is often unnecessary.p { margin: 0 !important; } Avoid
  • 9. Avoid complex selectors. Try to be only as specific as needed. Avoid.nav ul li a { margin: 0; }.nav a { margin: 0; } Preferred
  • 10. Avoid universal selectors due to performance issues..nav * { margin: 0; } Avoid
  • 11. Avoid qualifying selectors as this is often unnecessary. Avoiddiv.nav { }.nav { } Preferred
  • 12. Avoid IE-proprietary filters as they slow page performance. Avoidfilter:Alpha(Opacity=40);-ms-filter: "Alpha(Opacity=40)";
  • 13. Avoid IDs. Where possible, use classes instead. Avoid#header { ... }.header { ... } Preferred
  • 14. Try not to use use too many font-size declarations.h1 { font-size: 200%; }.nav { font-size: 80%; } Avoid.widget { font-size: 70%; }.intro { font-size: 110%; }.sidebar { font-size: 85%; }
  • Optimisation
  • 15. Use a CSS minifier toreduce your overall CSS file size: http://refresh-sf.com/yui/
  • 16. Optimise images as much as possible
  • 17. Where possible, combine images into sprites. http://designsbynickthegeek.com/tutorials/social-menu-icon-sprites
  • 18. Where possible, use CSS3 instead of images to reduce server requests and page size. Avoidp { background: url(round-corners.png); }p { border-radius: 10px; } Preferred
  • Russ WeakleyMax DesignSite: maxdesign.com.auTwitter: twitter.com/russmaxdesignSlideshare: slideshare.net/maxdesignLinkedin: linkedin.com/in/russweakley