Your SlideShare is downloading. ×
0
Maintainable CSS
Maintainable CSS
Maintainable CSS
Maintainable CSS
Maintainable CSS
Maintainable CSS
Maintainable CSS
Maintainable CSS
Maintainable CSS
Maintainable CSS
Maintainable CSS
Maintainable CSS
Maintainable CSS
Maintainable CSS
Maintainable CSS
Maintainable CSS
Maintainable CSS
Maintainable CSS
Maintainable CSS
Maintainable CSS
Maintainable CSS
Maintainable CSS
Maintainable CSS
Maintainable CSS
Maintainable CSS
Maintainable CSS
Maintainable CSS
Maintainable CSS
Maintainable CSS
Maintainable CSS
Maintainable CSS
Maintainable CSS
Maintainable CSS
Maintainable CSS
Maintainable CSS
Maintainable CSS
Maintainable CSS
Maintainable CSS
Maintainable CSS
Maintainable CSS
Maintainable CSS
Maintainable CSS
Maintainable CSS
Maintainable CSS
Maintainable CSS
Maintainable CSS
Maintainable CSS
Maintainable CSS
Maintainable CSS
Maintainable CSS
Maintainable CSS
Maintainable CSS
Maintainable CSS
Maintainable CSS
Maintainable CSS
Maintainable CSS
Maintainable CSS
Maintainable CSS
Maintainable CSS
Maintainable CSS
Maintainable CSS
Maintainable CSS
Maintainable CSS
Maintainable CSS
Maintainable CSS
Maintainable CSS
Maintainable CSS
Maintainable CSS
Maintainable CSS
Maintainable 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

Maintainable CSS

20,502

Published on

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

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

×