Efficient Maintainable, Modular By Gopinath Ambothi CSS
Writing efficient CSS
1 Use  external  style sheets instead of inline or header styles.
Not good:
<!DOCTYPE HTML PUBLIC &quot;-//W3C//DTD HTML 4.01//EN&quot; &quot;http://www.w3.org/TR/html4/strict.dtd&quot;> <html lang=...
Not good:
<!DOCTYPE HTML PUBLIC &quot;-//W3C//DTD HTML 4.01//EN&quot; &quot;http://www.w3.org/TR/html4/strict.dtd&quot;> <html lang=...
Good:
<!DOCTYPE HTML PUBLIC &quot;-//W3C//DTD HTML 4.01//EN&quot; &quot;http://www.w3.org/TR/html4/strict.dtd&quot;> <html lang=...
2 Use  link  rather than  @import  for IE & NN4
Not good:
<!DOCTYPE HTML PUBLIC &quot;-//W3C//DTD HTML 4.01//EN&quot; &quot;http://www.w3.org/TR/html4/strict.dtd&quot;> <html lang=...
Good:
<!DOCTYPE HTML PUBLIC &quot;-//W3C//DTD HTML 4.01//EN&quot; &quot;http://www.w3.org/TR/html4/strict.dtd&quot;> <html lang=...
Use  inheritance 3
Inefficient
p { font-family: arial, helvetica, sans-serif;   } #container {  font-family: arial, helvetica, sans-serif;  } #navigation...
Efficient
body { font-family: arial, helvetica, sans-serif;  } h1 { font-family: georgia, times, serif;  }
4 Use  multiple selectors
Inefficient
h1 {  color: #236799;  } h2 {  color: #236799;  } h3 {  color: #236799;  } h4 {  color: #236799;  }
Efficient
h1, h2, h3, h4 {   color: #236799;   }
5 Use  multiple declarations
Inefficient
p {   margin: 0 0 1em;   } p {   background: #ddd;   } p {   color: #666;   }
Efficient
p { margin: 0 0 1em; background: #ddd; color: #666; }
6 Use  shorthand properties
Inefficient
body { font-size : 85%; font-family : arial, helvetica, sans-serif; background-image : url(image.gif); background-repeat :...
Efficient
body { font : 85% arial, helvetica, sans-serif; background : url(image.gif) no-repeat 0 100%; margin : 1em 1em 0; padding ...
Writing maintainable CSS
Place a  time stamp, author and notation  at top of CSS files. 1
/* --------------------------------- Site:  Site name Author: Name  Updated: Date and time Updated by: Name --------------...
Include global  color notation 2
/* --------------------------------- COLORS Body background:  #def455 Container background:  #fff Main Text:  #333 Links: ...
Use  meaningful  names for IDs & classes 3
Not Good:
.green-box { ... } #big-text { ... }
Better:
.pullquote {... } #introduction {... }
Group  related  rules 4
#header { ... } #header h1 { ... } #header h1 img { ... } #header form { ... } #header a#skip { ... } #navigation { ... } ...
Add clear  comments  to your CSS files 5
/* --------------------------------- header styles --------------------------------- */ #header { ... } #header h1 { ... }...
Modular  CSS (to be continued…)
Thank You!
Upcoming SlideShare
Loading in …5
×

Efficient css

2,423 views

Published on

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

No Downloads
Views
Total views
2,423
On SlideShare
0
From Embeds
0
Number of Embeds
319
Actions
Shares
0
Downloads
0
Comments
0
Likes
6
Embeds 0
No embeds

No notes for slide

Efficient css

  1. 2. Efficient Maintainable, Modular By Gopinath Ambothi CSS
  2. 3. Writing efficient CSS
  3. 4. 1 Use external style sheets instead of inline or header styles.
  4. 5. Not good:
  5. 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>
  6. 7. Not good:
  7. 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>
  8. 9. Good:
  9. 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>
  10. 11. 2 Use link rather than @import for IE & NN4
  11. 12. Not good:
  12. 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>
  13. 14. Good:
  14. 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>
  15. 16. Use inheritance 3
  16. 17. Inefficient
  17. 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; }
  18. 19. Efficient
  19. 20. body { font-family: arial, helvetica, sans-serif; } h1 { font-family: georgia, times, serif; }
  20. 21. 4 Use multiple selectors
  21. 22. Inefficient
  22. 23. h1 { color: #236799; } h2 { color: #236799; } h3 { color: #236799; } h4 { color: #236799; }
  23. 24. Efficient
  24. 25. h1, h2, h3, h4 { color: #236799; }
  25. 26. 5 Use multiple declarations
  26. 27. Inefficient
  27. 28. p { margin: 0 0 1em; } p { background: #ddd; } p { color: #666; }
  28. 29. Efficient
  29. 30. p { margin: 0 0 1em; background: #ddd; color: #666; }
  30. 31. 6 Use shorthand properties
  31. 32. Inefficient
  32. 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; }
  33. 34. Efficient
  34. 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; }
  35. 36. Writing maintainable CSS
  36. 37. Place a time stamp, author and notation at top of CSS files. 1
  37. 38. /* --------------------------------- Site: Site name Author: Name Updated: Date and time Updated by: Name --------------------------------- */
  38. 39. Include global color notation 2
  39. 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 --------------------------------- */
  40. 41. Use meaningful names for IDs & classes 3
  41. 42. Not Good:
  42. 43. .green-box { ... } #big-text { ... }
  43. 44. Better:
  44. 45. .pullquote {... } #introduction {... }
  45. 46. Group related rules 4
  46. 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 { ... }
  47. 48. Add clear comments to your CSS files 5
  48. 49. /* --------------------------------- header styles --------------------------------- */ #header { ... } #header h1 { ... } #header h1 img { ... } #header form { ... } /* --------------------------------- navigation styles --------------------------------- */ #navigation { ... }
  49. 50. Modular CSS (to be continued…)
  50. 51. Thank You!

×