CSS Best Practices

Specs I've Worked On Since 2004

CSS2.1 (ghosteditor)
CSS Style Attributes
CSS Namespaces
Selectors Level 3
Selectors Level 4
CSS Pseudo-Elements Level 4
CSS Scoping Level 3
CSS Cascading & Inheritance Level 3
CSS Backgrounds & Borders Level 3
CSS Image Values & Replaced Content Level 3
CSS Values & Units Level 3
CSS Text Decoration Level 3
CSS Text Level 3
CSS Inline Layout Level 3
CSS Line Grid Level 1
CSS Ruby Layout Level 1
CSS Writing Modes Level 3
CSS Fragmentation Level 3
CSS Paged Media Level 3
CSS Box Alignment Level 3
CSS Intrinsic & Extrinsic Sizing Level 3
CSS Flexible Box Layout Level 1
CSS Grid Layout Level 1
CSS Display Level 3

Pet Peeves: Indentation

Indent your code.

Foundations: Learn CSS

Learn CSS.

Foundations: Separate Content and Style

Use Semantic Markup
Classes for meaning, not for show.
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.

Adaptability: Media Queries

Try resizing the window...

Adaptability: Liquid Layouts and Relativity

What is your sizing based on?

Containing block size? → Use percents.
Viewport size? → Use viewport units: vw, vh, vmin, vmax
Font height? → Use em or rem.
Font pitch? → Use em or ch.
Content size? → Use auto or min-content/max-content.
Combination of the above? → Use the appropriate layout formulas: flex, min-width, max-width, etc.

Absolute units (like cm or px) are usually the wrong answer.

WARNING: Requires Critical Thinking

Testing: Test Multiple Environments

Resize the window
Zoom the text
Try a mobile browser
Navigate by keyboard

Defensive Coding: !important means Never Override

Use !important to define overriding rules, not for fixups
Duplicate selectors if you need to increase specificity, or
Simplify selectors if you need to decrease specificity

Defensive Coding: Defensive Use of Shorthands

.lowSpecificity { background: linear-gradient(red, maroon); }
/* … more stuff … */
#highSpecificity { background-color: green; }

Use shorthands. Protect yourself against invading rules!

Defensive Coding: Defensive Use of Shorthands

Set with shorthands.
Tweak with longhands.

background: url(…) top left, url(…) bottom right, url(…) center;
background-repeat: no-repeat

Defensive Coding: Don't Over-escalate

z-index: 9999999999999999999999999999999999999;

Understand your code, and don't overkill.

Defensive Coding: Drop Dead Code

Tried something and it didn't work? Delete it now.

Defensive Coding: Code to Standard

Don't rely on proprietary extensions.
Don't use experimental features in production or commit to keeping up-to-date.
Provide fallbacks / use @supports.

Keep the Web open to everyone!

Testing: Test in Multiple Browsers

Testing in Chrome ≠ Works for Everyone

CSS Best Practices: Summary

Logical Source Order: Keep DOM order readable: for accessibility, mobile optimization, device adaptability, and long-term maintainability.
Liquid Layouts and Relativity: Use smart relative sizing: to optimize layouts while minimizing media query code forks.
Media Queries: Adapt to screen size changes; get font size adaptation free by using ems.

CSS Best Practices: Summary

Shorthands: Use shorthands to create a “blank slate”. Use longhands for only for targetted tweaking.
Never use direction or unicode-bidi.: Use the HTML dir attribute, because it's content, not style (and you can then use :dir() selectors).
Prevent zombie code: Dead code may come alive as CSS changes. Delete it before it does, and ruins your layout.

CSS Best Practices: Summary

Test in Multiple Browsers: Your favorite browser is not always right.
Don't use proprietary features!: Keep the Web open to everyone! Don't rely on the latest -WebKit- invention.
Turn off CSS: A well-coded page will be understandable without it.