It may require a bit more analysis, but it is always better
to think of class names that represent the meaning/function of the specific element(s)
rather than what happens to be their current presentation.
That way when their presentation changes (as it inevitably does),
or alternative presentations are designed for additional media types or devices,
you avoid such confusing style rules like:
.black { color:navy; }
—Tantek, 2004
Use <table> for tabular data.
direction property dir attribute
Foundations: Linearized Logical Source Order
Keep the DOM in linearized logical order! (That is, the order you would read it in!)
Works best for mobile.
Works best for accessibility.
Works best as a foundation for device adaptation (media queries).
Works best for long-term site maintainability.
Foundations: Linearized Logical Source Order
Reorder visuals by reordering the source
not by using order or positioning
unless there's a clear accessibility justification for keeping them out of sync.
Foundations: Linguistic Variations
Set the language (<html lang="…">) correctly for better typography.
Testing: Test without CSS
Turn off CSS.
If the page makes no sense, fix your markup.
Adaptability: Media Queries
Set media query breakpoints in em or ch, not always in px.