• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Maintainable CSS
 

Maintainable CSS

on

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

Actions

Likes
19
Downloads
149
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

13 of 3 previous next Post a comment

  • 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/