Maintainable CSS

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 ﬁle we need.

Design language as a guide.

Components of design language: Layout (composition) Color Imagery Typography Form

Resulting CSS ﬁles: layout/form/reset color/imagery type IE (6/7) Print etc. A single ﬁle can also be organized into these sections.

Resulting CSS ﬁles: layout.css color.css type.css IE (6/7) Print etc. A single ﬁle can also be organized into these sections.

No section or page-based ! Site sections can be handled within each ﬁle.

Old news? Everybody does it this way? Nope.

IE code in separate ﬁles. Use conditional comments to include these ﬁles.

Pamela Anderson comment

Pamela Anderson comment  IE conditional comment

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 ﬁll with layout code

Framework classes are often meaningless outside the context of the framework. This demands knowledge of the speciﬁc 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 speciﬁc only when necessary. This will simplify your .

Understand speciﬁcity. Helps when working with someone else’s code.

a b c d = speciﬁcity

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 Speciﬁcity 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 ﬁrst 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 ﬁrst 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 { (...) }

Eﬀective text editing Folding Marks Tags Abbreviations, mapping Decent text editors do these and more.

Folding gives you the big picture

Marks for jumping around your code

Tags for tables of contents

Abbreviations as ad-hoc variables

Finding stuﬀ Highlight search

Finding stuﬀ Highlight search Incremental search

Finding stuﬀ Highlight search Incremental search regexp search

documenting.css

How do you do this stuﬀ? Write it down.

How do you do this stuﬀ? 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

Organize your ﬁles 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/

http://www.the-haystack.com	561
http://www.slideshare.net	26
http://static.slideshare.net	1
http://www.awayback.com	1
http://translate.googleusercontent.com	1

Maintainable CSS

by Stephen Hay

Accessibility

Categories

Upload Details

Usage Rights

5 Embeds 590

Statistics

Maintainable CSS Presentation Transcript