maintainable.css
    Stephen Hay . Fronteers, Amsterdam . 20080911
#maintainable.css {
  organizing: yes;
  authoring: quality;
  documenting: please;
  }
organizing.css
Firebug makes us lazy.
We need to know intuitively which file we need.
Design language
as a guide.
Components of design language:




   Layout (composition)
   Color
   Imagery
   Typography
   Form
Resulting CSS files:



   layout/form/reset
   color/imagery
   type
   IE (6/7)
   Print
   etc.

   A single file can als...
Resulting CSS files:



   layout.css
   color.css
   type.css
   IE (6/7)
   Print
   etc.

   A single file can also be or...
No section or page-based                        !
Site sections can be handled within each file.
Old news? Everybody does it this way? Nope.
IE code in separate files.
Use conditional comments to include these files.
Pamela Anderson comment
<!-- Pamela Anderson -->
Pamela Anderson comment
<!-- Pamela Anderson -->


IE conditional comment
<!--[if lt IE 7]>
    (...)
<![endif]-->
Use version control.
authoring.css
{
focus: less-here;
}
focus .more .here {
   focus: less-here;
   }
Maintainable    starts
with maintainable      .
And semantic   = maintainable   .
Avoid placing   in the
markup.
Frameworks can be
a problem.
    Frameworks are made for ease of development,
not for maintainability.
Frameworks fill   with layout code
Framework classes are
often meaningless outside
the context of the
framework.
This demands knowledge of the specific framew...
The Rule of Portable Meaning




   ids identify
   classes classify
Marking up a web designer

<li                         >Andy Clarke</li>
Marking up a web designer

<li class=quot;designerquot;        >Andy Clarke</li>
Marking up a web designer

<li class=quot;designerquot; id=quot;andyquot;>Andy Clarke</li>
Marking up a web designer

<li class=quot;designerquot; id=quot;andyquot;>Andy Clarke</li>


This list item has portable m...
Use the cascade.
Be specific only when necessary.
This will simplify your  .
Understand                    specificity.
Helps when working with someone else’s code.
a   b   c   d = specificity
inline   IDs               classes/attributes   elements
               (pseudo−)
li#andy
                           1element = 0101
0inline   1ID   0classes
li.designer
                          1element = 0011
0inline   0IDs   1class
Otherwise, read Andy Clarke’s Specificity Wars.
Is it really that !important?
Avoid !important whenever possible.
Use a system
for declaration order and formatting.
Declaration order



 Alphabetical order

 div.news {
     border: 1px solid #ccc;
     color: #878787;
     line-height: ...
Declaration order



 Alphabetical order            Layout first

 div.news {                    div.news {
     border: 1p...
Declaration order



 Alphabetical order                  Layout first

 div.news {                          div.news {
   ...
Formatting


   Element tree indentation
   div.news {
       (...)
       }
       div.news h2 {
           (...)
       ...
Effective text editing




   Folding
   Marks
   Tags
   Abbreviations, mapping
   Decent text editors do these and more.
Folding gives you the big picture
Folding gives you the big picture
Marks for jumping around your code
Tags for tables of contents
Tags for tables of contents
Abbreviations as ad-hoc variables
Abbreviations as ad-hoc variables
Abbreviations as ad-hoc variables
Finding stuff




 Highlight search
Finding stuff




 Highlight search
 Incremental search
Finding stuff




 Highlight search
 Incremental search
 regexp search
documenting.css
How do you do this stuff?
Write it down.
How do you do this stuff?
Write it down.
Congratulations! You just wrote documentation.
You should document two things:
your conventions & your code.
Use comments in the                                .
This is where    comes to life; it’s where other
developers must unde...
You can generate
documentation from your
comments.
Documentation generation with Natural Docs
Documentation generation with Natural Docs
Documentation generation with Natural Docs
Documentation generation with Natural Docs
Organize your files
Write quality code
Document code & conventions
Something we need:




   An app/script which alerts
   us to unused selectors, etc.
   Anyone?
Thank you!
These slides will be posted on
www.the-haystack.com/presentations/fronteers2008/
Maintainable CSS
Maintainable CSS
Maintainable CSS
Maintainable CSS
Maintainable CSS
Upcoming SlideShare
Loading in...5
×

Maintainable CSS

20,867

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
20,867
On Slideshare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
161
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/
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×