Your SlideShare is downloading. ×
0
Efficient css
Efficient css
Efficient css
Efficient css
Efficient css
Efficient css
Efficient css
Efficient css
Efficient css
Efficient css
Efficient css
Efficient css
Efficient css
Efficient css
Efficient css
Efficient css
Efficient css
Efficient css
Efficient css
Efficient css
Efficient css
Efficient css
Efficient css
Efficient css
Efficient css
Efficient css
Efficient css
Efficient css
Efficient css
Efficient css
Efficient css
Efficient css
Efficient css
Efficient css
Efficient css
Efficient css
Efficient css
Efficient css
Efficient css
Efficient css
Efficient css
Efficient css
Efficient css
Efficient css
Efficient css
Efficient css
Efficient css
Efficient css
Efficient css
Efficient css
Efficient css
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

Efficient css

2,261

Published on

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

No Downloads
Views
Total Views
2,261
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
0
Comments
0
Likes
6
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.  
  • 2. Efficient Maintainable, Modular By Gopinath Ambothi CSS
  • 3. Writing efficient CSS
  • 4. 1 Use external style sheets instead of inline or header styles.
  • 5. Not good:
  • 6. <!DOCTYPE HTML PUBLIC &quot;-//W3C//DTD HTML 4.01//EN&quot; &quot;http://www.w3.org/TR/html4/strict.dtd&quot;> <html lang=&quot;en&quot;> <head> <meta http-equiv=&quot;content-type&quot; content=&quot;text <title>Page title</title> </head> <body> <p style= &quot; co lor: red &quot; > ... </p> </body> </html>
  • 7. Not good:
  • 8. <!DOCTYPE HTML PUBLIC &quot;-//W3C//DTD HTML 4.01//EN&quot; &quot;http://www.w3.org/TR/html4/strict.dtd&quot;> <html lang=&quot;en&quot;> <head> <meta http-equiv=&quot;content-type&quot; content=&quot;text <title>Page title</title> <style type=&quot;text/css&quot; media=&quot;screen&quot;> p { color: red; } </style> </head> <body> ... </body> </html>
  • 9. Good:
  • 10. <!DOCTYPE HTML PUBLIC &quot;-//W3C//DTD HTML 4.01//EN&quot; &quot;http://www.w3.org/TR/html4/strict.dtd&quot;> <html lang=&quot;en&quot;> <head> <meta http-equiv=&quot;content-type&quot; content=&quot;text <title>Page title</title> <link rel=&quot;stylesheet&quot; href=&quot;name.css&quot; type=&quot;text/css&quot; media=&quot;screen&quot; /> < /head> <body> ... </body> </html>
  • 11. 2 Use link rather than @import for IE & NN4
  • 12. Not good:
  • 13. <!DOCTYPE HTML PUBLIC &quot;-//W3C//DTD HTML 4.01//EN&quot; &quot;http://www.w3.org/TR/html4/strict.dtd&quot;> <html lang=&quot;en&quot;> <head> <meta http-equiv=&quot;content-type&quot; content=&quot;text <title>Page title</title> <style type=&quot;text/css&quot; media=&quot;screen&quot;> @import url(&quot;styles.css&quot;); </style> </style> </head> <body> ... </body> </html>
  • 14. Good:
  • 15. <!DOCTYPE HTML PUBLIC &quot;-//W3C//DTD HTML 4.01//EN&quot; &quot;http://www.w3.org/TR/html4/strict.dtd&quot;> <html lang=&quot;en&quot;> <head> <meta http-equiv=&quot;content-type&quot; content=&quot;text <title>Page title</title> <link rel=&quot;stylesheet&quot; href=&quot;name.css&quot; type=&quot;text/css&quot; media=&quot;screen&quot; /> </head> <body> ... </body> </html>
  • 16. Use inheritance 3
  • 17. Inefficient
  • 18. p { font-family: arial, helvetica, sans-serif; } #container { font-family: arial, helvetica, sans-serif; } #navigation { font-family: arial, helvetica, sans-serif; } #content { font-family: arial, helvetica, sans-serif; } #sidebar { font-family: arial, helvetica, sans-serif; } h1 { font-family: georgia, times, serif; }
  • 19. Efficient
  • 20. body { font-family: arial, helvetica, sans-serif; } h1 { font-family: georgia, times, serif; }
  • 21. 4 Use multiple selectors
  • 22. Inefficient
  • 23. h1 { color: #236799; } h2 { color: #236799; } h3 { color: #236799; } h4 { color: #236799; }
  • 24. Efficient
  • 25. h1, h2, h3, h4 { color: #236799; }
  • 26. 5 Use multiple declarations
  • 27. Inefficient
  • 28. p { margin: 0 0 1em; } p { background: #ddd; } p { color: #666; }
  • 29. Efficient
  • 30. p { margin: 0 0 1em; background: #ddd; color: #666; }
  • 31. 6 Use shorthand properties
  • 32. Inefficient
  • 33. body { font-size : 85%; font-family : arial, helvetica, sans-serif; background-image : url(image.gif); background-repeat : no-repeat; background-position : 0 100%; margin-top : 1em; margin-right : 1em; margin-bottom : 0; margin-left : 1em; padding-top : 10px; padding-right : 10px; padding-bottom : 10px; padding-left : 10px; border-style : solid; border-width : 1px; border-color : red; color : #222222; }
  • 34. Efficient
  • 35. body { font : 85% arial, helvetica, sans-serif; background : url(image.gif) no-repeat 0 100%; margin : 1em 1em 0; padding : 10px; border : 1px solid red; color : #222; }
  • 36. Writing maintainable CSS
  • 37. Place a time stamp, author and notation at top of CSS files. 1
  • 38. /* --------------------------------- Site: Site name Author: Name Updated: Date and time Updated by: Name --------------------------------- */
  • 39. Include global color notation 2
  • 40. /* --------------------------------- COLORS Body background: #def455 Container background: #fff Main Text: #333 Links: #00600f Visited links: #098761 Hover links: #aaf433 H1, H2, H3: #960 H4, H5, H6: #000 --------------------------------- */
  • 41. Use meaningful names for IDs & classes 3
  • 42. Not Good:
  • 43. .green-box { ... } #big-text { ... }
  • 44. Better:
  • 45. .pullquote {... } #introduction {... }
  • 46. Group related rules 4
  • 47. #header { ... } #header h1 { ... } #header h1 img { ... } #header form { ... } #header a#skip { ... } #navigation { ... } #navigation ul { ... } #navigation ul li { ... } #navigation ul li a { ... } #navigation ul li a:hover { ... } #content { ... } #content h2 { ... } #content p { ... } #content ul { ... } #content ul li { ... }
  • 48. Add clear comments to your CSS files 5
  • 49. /* --------------------------------- header styles --------------------------------- */ #header { ... } #header h1 { ... } #header h1 img { ... } #header form { ... } /* --------------------------------- navigation styles --------------------------------- */ #navigation { ... }
  • 50. Modular CSS (to be continued…)
  • 51. Thank You!

×