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.

Introduction

Examples

Possible Solutions

Specificity Overview

Examples

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

or

#header

If you said...

Using Specificity To Your Advantage

Sample Specificity Table

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)

Publicize Your Intentions, Educate Your Developers

Best Practices For the Syndicator

Best Practices For the Including Site

Examples

Conclusion