Maintainable CSS

22,486 views
22,335 views

Published on

NOTE: This presentation is more than 6 years old! This is not the way to do things now. :-) - Stephen

Presentation for Fronteers 2008 conference in Amsterdam.

PHOTO CREDITS:
- slide 2: Andrea at http://indigovalleyphotography.com/
- slide 3: raywal65 @ morguefile (http://www.morguefile.com/forum/profile.php?username=RAYWAL65)
- slide 4: Kevin Connors (http://kconnors.com)

Published in: Technology, Education
3 Comments
23 Likes
Statistics
Notes
No Downloads
Views
Total views
22,486
On SlideShare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
171
Comments
3
Likes
23
Embeds 0
No embeds

No notes for slide

Maintainable CSS

  1. 1. maintainable.css Stephen Hay . Fronteers, Amsterdam . 20080911
  2. 2. #maintainable.css { organizing: yes; authoring: quality; documenting: please; }
  3. 3. organizing.css
  4. 4. Firebug makes us lazy. We need to know intuitively which file we need.
  5. 5. Design language as a guide.
  6. 6. Components of design language: Layout (composition) Color Imagery Typography Form
  7. 7. Resulting CSS files: layout/form/reset color/imagery type IE (6/7) Print etc. A single file can also be organized into these sections.
  8. 8. Resulting CSS files: layout.css color.css type.css IE (6/7) Print etc. A single file can also be organized into these sections.
  9. 9. No section or page-based ! Site sections can be handled within each file.
  10. 10. Old news? Everybody does it this way? Nope.
  11. 11. IE code in separate files. Use conditional comments to include these files.
  12. 12. Pamela Anderson comment <!-- Pamela Anderson -->
  13. 13. Pamela Anderson comment <!-- Pamela Anderson --> IE conditional comment <!--[if lt IE 7]> (...) <![endif]-->
  14. 14. Use version control.
  15. 15. authoring.css
  16. 16. { focus: less-here; }
  17. 17. focus .more .here { focus: less-here; }
  18. 18. Maintainable starts with maintainable . And semantic = maintainable .
  19. 19. Avoid placing in the markup.
  20. 20. Frameworks can be a problem. Frameworks are made for ease of development, not for maintainability.
  21. 21. Frameworks fill with layout code
  22. 22. Framework classes are often meaningless outside the context of the framework. This demands knowledge of the specific framework, which decreases maintainability.
  23. 23. The Rule of Portable Meaning ids identify classes classify
  24. 24. Marking up a web designer <li >Andy Clarke</li>
  25. 25. Marking up a web designer <li class=quot;designerquot; >Andy Clarke</li>
  26. 26. Marking up a web designer <li class=quot;designerquot; id=quot;andyquot;>Andy Clarke</li>
  27. 27. Marking up a web designer <li class=quot;designerquot; id=quot;andyquot;>Andy Clarke</li> This list item has portable meaning. Microformats have portable meaning.
  28. 28. Use the cascade. Be specific only when necessary. This will simplify your .
  29. 29. Understand specificity. Helps when working with someone else’s code.
  30. 30. a b c d = specificity
  31. 31. inline IDs classes/attributes elements (pseudo−)
  32. 32. li#andy 1element = 0101 0inline 1ID 0classes
  33. 33. li.designer 1element = 0011 0inline 0IDs 1class
  34. 34. Otherwise, read Andy Clarke’s Specificity Wars.
  35. 35. Is it really that !important? Avoid !important whenever possible.
  36. 36. Use a system for declaration order and formatting.
  37. 37. Declaration order Alphabetical order div.news { border: 1px solid #ccc; color: #878787; line-height: 1.2; margin: .8em; padding: .2em; }
  38. 38. Declaration order Alphabetical order Layout first div.news { div.news { border: 1px solid #ccc; margin: .8em; color: #878787; padding: .2em; line-height: 1.2; line-height: 1.2; margin: .8em; border: 1px solid #ccc; padding: .2em; color: #878787; } }
  39. 39. Declaration order Alphabetical order Layout first div.news { div.news { border: 1px solid #ccc; margin: .8em; color: #878787; padding: .2em; line-height: 1.2; line-height: 1.2; margin: .8em; border: 1px solid #ccc; padding: .2em; color: #878787; } } Necessary? With separate sheets, this is less of a problem.
  40. 40. Formatting Element tree indentation div.news { (...) } div.news h2 { (...) } div.news h2.just-in { (...) } div.news p { (...) }
  41. 41. Effective text editing Folding Marks Tags Abbreviations, mapping Decent text editors do these and more.
  42. 42. Folding gives you the big picture
  43. 43. Folding gives you the big picture
  44. 44. Marks for jumping around your code
  45. 45. Tags for tables of contents
  46. 46. Tags for tables of contents
  47. 47. Abbreviations as ad-hoc variables
  48. 48. Abbreviations as ad-hoc variables
  49. 49. Abbreviations as ad-hoc variables
  50. 50. Finding stuff Highlight search
  51. 51. Finding stuff Highlight search Incremental search
  52. 52. Finding stuff Highlight search Incremental search regexp search
  53. 53. documenting.css
  54. 54. How do you do this stuff? Write it down.
  55. 55. How do you do this stuff? Write it down. Congratulations! You just wrote documentation.
  56. 56. You should document two things: your conventions & your code.
  57. 57. Use comments in the . This is where comes to life; it’s where other developers must understand what it’s doing.
  58. 58. You can generate documentation from your comments.
  59. 59. Documentation generation with Natural Docs
  60. 60. Documentation generation with Natural Docs
  61. 61. Documentation generation with Natural Docs
  62. 62. Documentation generation with Natural Docs
  63. 63. Organize your files Write quality code Document code & conventions
  64. 64. Something we need: An app/script which alerts us to unused selectors, etc. Anyone?
  65. 65. Thank you! These slides will be posted on www.the-haystack.com/presentations/fronteers2008/

×