maintainable.cssStephen 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 languageas a guide.

Components of design language:

Layout (composition)ColorImageryTypographyForm

Resulting CSS files:

layout/form/resetcolor/imagerytypeIE (6/7)Printetc.

A single file can also be organized into these sections.

Resulting CSS files:

layout.csscolor.csstype.cssIE (6/7)Printetc.

A single file can also be organized into these sections.

No section or page-based css!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 -->

IE conditional comment

<!--[if lt IE 7]>(...)

<![endif]-->

Pamela Anderson comment

<!-- Pamela Anderson -->

IE conditional comment

<!--[if lt IE 7]>(...)

<![endif]-->

Use version control.

authoring.css

focus .more .here

{focus: less-here;}

focus .more .here {focus: less-here;}

Maintainable css startswith maintainable html.And semantic html = maintainable html.

Avoid placing css in themarkup.

Frameworks can bea problem.css Frameworks are made for ease of development,not for maintainability.

Frameworks fill html with layout code

Framework classes areoften meaningless outsidethe context of theframework.This demands knowledge of the specific framework,which decreases maintainability.

The Rule of Portable Meaning

ids identifyclasses classify

Marking up a web designer

<li

class="designer" id="andy"

>Andy Clarke</li>

This list item has portable meaning.Microformats have portable meaning.

Marking up a web designer

<li class="designer"

id="andy"

>Andy Clarke</li>

This list item has portable meaning.Microformats have portable meaning.

Marking up a web designer

<li class="designer" id="andy">Andy Clarke</li>

This list item has portable meaning.Microformats have portable meaning.

Marking up a web designer

<li class="designer" id="andy">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 css.

Understand css specificity.Helps when working with someone else’s code.

a ‖ b ‖ c ‖ d = specificity

inline ‖ IDs ‖(pseudo−) classes/attributes ‖ elements

li#andy0inline ‖ 1ID ‖ 0classes ‖ 1element = 0101

li.designer0inline ‖ 0IDs ‖ 1class ‖ 1element = 0011

Otherwise, read Andy Clarke’s Specificity Wars.

Is it really that !important?Avoid !important whenever possible.

Use a systemfor declaration order and formatting.

Declaration order

Alphabetical order

div.news {border: 1px solid #ccc;color: #878787;line-height: 1.2;margin: .8em;padding: .2em;}

Layout first

div.news {margin: .8em;padding: .2em;line-height: 1.2;border: 1px solid #ccc;color: #878787;}

Necessary?With separate sheets, this is less of a problem.

Declaration order

Alphabetical order

div.news {border: 1px solid #ccc;color: #878787;line-height: 1.2;margin: .8em;padding: .2em;}

Layout first

div.news {margin: .8em;padding: .2em;line-height: 1.2;border: 1px solid #ccc;color: #878787;}

Necessary?With separate sheets, this is less of a problem.

Declaration order

Alphabetical order

div.news {border: 1px solid #ccc;color: #878787;line-height: 1.2;margin: .8em;padding: .2em;}

Layout first

div.news {margin: .8em;padding: .2em;line-height: 1.2;border: 1px solid #ccc;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

FoldingMarksTagsAbbreviations, mappingDecent 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

Incremental searchregexp search

Finding stuff

Highlight searchIncremental search

regexp search

Finding stuff

Highlight searchIncremental searchregexp search

documenting.css

How do you do this stuff?Write it down.

Congratulations! You just wrote documentation.

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 html.This is where css comes to life; it’s where otherdevelopers must understand what it’s doing.

You can generatedocumentation from yourcomments.

Documentation generation with Natural Docs

Documentation generation with Natural Docs

Documentation generation with Natural Docs

Documentation generation with Natural Docs

Organize your filesWrite quality codeDocument code & conventions

Something we need:

An app/script which alertsus to unused selectors, etc.Anyone?

Thank you!These slides will be posted onwww.the-haystack.com/presentations/fronteers2008/