Maintainable CSS
Upcoming SlideShare
Loading in...5
×
 

Like this? Share it with your network

Share

Maintainable CSS

on

  • 20,818 views

Presentation for Fronteers 2008 conference in Amsterdam. ...

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)

Statistics

Views

Total Views
20,818
Views on SlideShare
20,227
Embed Views
591

Actions

Likes
21
Downloads
152
Comments
3

5 Embeds 591

http://www.the-haystack.com 562
http://www.slideshare.net 26
http://static.slideshare.net 1
http://www.awayback.com 1
http://translate.googleusercontent.com 1

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Maintainable CSS Presentation 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/