Architecting CSS

Kevin Lawver

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

Architecting CSS

• Web Development is no longer simple
• We no longer create simple documents
• Our CSS is hazardous to our sanity

Mark It Up For Sanity

• Use id's and classes on the body element.
• Use logical page divisions to 'partition' content.
• Use logical class names to keep like elements grouped.
• Be consistent!

Burn The Blankets

• No more type selectors that apply to all elements!
• No more generic wildcards
• Be careful about what styles you apply to generic elements and styles that inherit.

Give Every Selector A Home

• Always descend from an ID
• Use selectors rooted to a logical container
• Descend down the DOM to get proper specificity

Create Scopes And Stick To Them

• Descending from a logical container keeps your styles confined to a scope.
• Keeps your styles from "overflowing" and affecting other unintended elements
• Have to fake it until we come up with a spec for scoped style sheets (coming some day)

Appropriately Specific

• Be just specific enough
• Don't use !important when increased specificity will do.
  • Don't ever use !important - it's a crutch for those who don't get specificity

Keep Your CSS Orderly

• Start from less specific to more within your document.
• Try to style containers in document order.
• Style the container, then its descendants
• Use logical selectors to keep your CSS readable

Keep Your Declarations Orderly

• Use the following order in your declarations (even if you don't use that particular section):
  • positioning
  • float and clear
  • width and height
  • margin and padding
  • overflow
  • border
  • background
  • font and text effects
• Keep hacks grouped with overridden properties and declarations

Sandbox "Dangerous" Content

• hats, ads and external content, oh my!
• Create boxes for them outside your styled flow
• Don't be afraid to use overflow:hidden

Best Practices For The Syndicator

• Use obviously unique id's and always descend from them.
• Avoid arbitrary classes. Hell, avoid classes period.
• Keep it simple.
  • Avoid complex positioning and floats if you can help it.
  • If you do float, clear yourself.

Best Practices For The Includer

• Use the sandbox
• Don't float included content
• Protect yourself:
  • overflow:hidden the included content's container.
  • keep it outside your normally styled flow

Example: Document Skeleton

• Let's start simple, and look at a basic example of the concept.
• Here's our skeleton
• Notice how everything but body descends from an id.
• But, it's minimally specific after that, to allow for more specific overrides later on.

Example: Imported Content

• Let's say that we're going to import a list of links on the right hand side of our content area that has its own set of styles.
• Here's our skeleton, plus the new stuff.
• Notice how specific the CSS is for the imported content, overriding using shorthand.
• Still doesn't cover all possibilities, but covers the basics.

Example: Imported Content Run Amok

• Let's say our imported content goes crazy and wants to be 300px wide instead of the 125px we agreed on.
• Same page, different js
• Nothing bad happened! Why?

Example: In The Real World... Imported Content

• My AOL has to deal with an infinite amount of unreliable content.
• Images floated, ads, content of extreme width, etc. How do we deal?
  • We added float:none to images
  • We used overflow:auto on the container (a dd).
  • We cleared the last element in the container (p.readMore).

Conclusions

• Use more logical selectors
• Stop wildcarding
• Avoid unintended inheritance

Q&A

• Bring it!