CSS Best practice

Like this? Share it with your network

Share

CSS Best practice

  • 11,007 views
Uploaded on

A quick presentation on some tips for writing better CSS.

A quick presentation on some tips for writing better CSS.

More in: Education , Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
  • Hi,
    Slide-13,'Avoid using multiple css files, or combine all css files before final production'
    Does this mean 'avoid combine before final production'?

    Thanks
    Are you sure you want to
    Your message goes here
  • excelente tutorial
    Are you sure you want to
    Your message goes here
  • liked the tips - thanks
    Are you sure you want to
    Your message goes here
  • thanks...
    i {love: css;}
    Are you sure you want to
    Your message goes here
No Downloads

Views

Total Views
11,007
On Slideshare
10,308
From Embeds
699
Number of Embeds
12

Actions

Shares
Downloads
325
Comments
4
Likes
12

Embeds 699

http://www.maxdesign.com.au 477
http://devlog3001.blogspot.com 124
http://www.andreatavazzani.it 70
http://xtremepassion.leladystore.com 9
http://ckdesign.11.3.lms.crossknowledge.com 6
http://draft.blogger.com 4
http://meltwaternews.com 3
http://ckdesign112.nightwish.epistema.local 2
http://ckdesign111.nightwish.epistema.local 1
http://test.121.coldplay.epistema.local 1
http://ckdesign.nightwish.epistema.local 1
http://www.onlydoo.com 1

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. CSSBEST PRACTICE
  • 2. Best practice
  • 3. “Best practice” is a very looseand often poorly defined term.
  • 4. “Best practice” often comes down to personal opinion.
  • 5. “Best practice” can depend on the team environment you are working in.
  • 6. “Best practice” may also dependon the applications you have to work with.
  • 7. Your personal “best practices”may change radically over time!
  • 8. With that in mind, here are some tips that may help you whensetting up CSS files in the future.
  • 9. Applying CSS
  • 10. 1. Avoid using inline styles as they are hard to maintain and increase file size. Avoid<body><h2 style=“color: red;”>! Heading here</h2>
  • 11. 2. Avoid using header styles as they are also hard to maintain and increase file size. Avoid<style> p { color: red; }</style>
  • 12. 3. Avoid using @import within the HTML as this will slow down IE browsers. Avoid<style> @import "a.css";</style>
  • 13. 4. Avoid using multiple CSS files, or combine all CSS files before final production. Avoid<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">
  • 14. Writing CSS rules
  • 15. 5. Use multiple declarations where possiblep{! margin: 0 0 1.5em;! background: green;}
  • 16. 6. Use multiple selectors where possibleh1, h2, h3, h4, h5{! color: #666;! margin: 0 0 .5em;}
  • 17. 7. Use shorthand properties where possiblebody{ Avoid margin-top: 20px; margin-right: 10px; margin-bottom: 20px; margin-left: 10px;} Preferredbody { margin: 20px 10px; }
  • 18. 8. Avoid !important as it is often unnecessary - especially when you understand the cascade.p Avoid{! margin: 0 !important;}
  • 19. 9. Avoid complex selectors (taxing for browsers). Try to be only as specific as needed. Avoid#navigation ul li a { margin: 0; }#navigation a { margin: 0; } Preferred
  • 20. 10. Avoid universal selectors. Avoid.nav * { margin: 0; }
  • 21. 11. Avoid qualifying selectors as this is often unnecessary. Avoiddiv.nav { }.nav { } Preferred
  • 22. 12. Avoid IE-proprietary filters as they slow page performance. Avoidfilter:Alpha(Opacity=40);-ms-filter: "Alpha(Opacity=40)";
  • 23. 13. Avoid IDs. Where possible use classes instead. Avoid#header { ... }.header { ... } Preferred
  • 24. 14. Try not to use too many font-size declarations.h1 { font-size: 200%; } Avoid.nav { font-size: 80%; }.widget { font-size: 70%; }.intro { font-size: 110%; }.sidebar { font-size: 85%; }
  • 25. Optimisation
  • 26. 15. Some people like to use a CSS minifier to reduce your overall CSS file size: http://refresh-sf.com/yui/
  • 27. 16. Optimise images as much as possible
  • 28. 17. Where possible, combine images into sprites.
  • 29. 18. If possible, use CSS3 rules instead of images to reduce server requests and page size. Avoidp { background: url(round-corners.png); }p { border-radius: 10px; } Preferred
  • 30. Russ WeakleyMax DesignSite: maxdesign.com.auTwitter: twitter.com/russmaxdesignSlideshare: slideshare.net/maxdesignLinkedin: linkedin.com/in/russweakley