Maintainable CSS
Upcoming SlideShare
Loading in...5
×
 

Maintainable CSS

on

  • 20,481 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,481
Views on SlideShare
19,890
Embed Views
591

Actions

Likes
20
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 Maintainable CSS Presentation Transcript

  • 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 also be organized into these sections.
  • Resulting CSS files: layout.css color.css type.css IE (6/7) Print etc. A single file can also be organized into these sections.
  • 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 framework, which decreases maintainability.
  • 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 meaning. Microformats have portable meaning.
  • 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: 1.2; margin: .8em; padding: .2em; }
  • 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; } }
  • 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.
  • Formatting Element tree indentation div.news { (...) } div.news h2 { (...) } div.news h2.just-in { (...) } div.news p { (...) }
  • 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 understand what it’s doing.
  • 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/