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=\"designer\" >Andy Clarke</li>

Marking up a web designer
<li class=\"designer\" id=\"andy\">Andy Clarke</li>

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 .

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/