Architecting CSS For Syndicated Content

Kevin Lawver

This is a presentation. If you'd like to view all the slides like a normal web page, you can.

It's fairly simple, but required if you want to be able to syndicate content, and build sites where syndicated content doesn't run amok.
In the list, items higher in the list are more specific than those below, and will override any styles assigned to the less specific selector.
Here's the list:
- style attributes and !important
- id
- class and other attributes
- element

body ul.nav li a:hover { color:#900; }

or

#header

The second one, you win... give yourself a pat on the back
It doesn't matter how many selectors you stack up, id's always trump classes and other attributes, and classes always trump elements.

The specificity rules give us a good starting point to set some guidelines around types of content.
These guidelines will help keep syndicated content "in its place" and allow the pages that incorporate them to override their styles when needed.

level	maximum specificity	minimum specificity	all selectors should start with:
skeleton	0,1,1,2	0,0,0,1	n/a
module	0,0,5,n	0,0,1,1	.module-name (the class assigned when you created the module)
page	0,n,n,n	0,1,0,0	#page
user	0,n,n,n	0,2,0,0	#page #content (since all user styles will be around modules and all modules will be inside of #content)

Document your rules (maybe like this)
Use existing training materials, or write your own to inform developers about CSS

Don't use generic classes or style generic elements.
Avoid id's altogether
Use an obviously unique class on the container, and have all styles descend from it
If you float something, clear yourself inside a relatively positioned container.
Avoid setting text colors unless you also set a background color.
Avoid expectations for generic elements. If you need pixel precise placement, override everything.