On CSS

Some useful tools and interesting code

• https://marksheet.io
• Google and @mdo styleguides

Useful CSS

• nested CSS (but not for &- and @media only at root)¹
• @media (orientation portrait) is a nice shoe-in for mobiles. (can also use landscape)
• @media (prefers-color-scheme: dark) overrides.
• @layer and how and why to use cascade layers (I don't like these much)
• grid (examples for layout, major sections)²
  • subgrid is occasionally handy.
• flexbox (for alignment, small sections)²
• :empty
• :only-child and :only-of-type
• nth-child
• filter
• tab-size is useful for pre blocks?
• ~ general sibling selector (not + adjacent)
•   and spacing (Unicode chars)

Typography

• optical-size a great primer
• font-variation-settings

Images

• aspect-ratio (and object-fit)

Easy to forget stuff

• margin and padding order: top | right | bottom | left and top | left and right | bottom (clockwise)
• @media print and @page
• @media print and (prefers-color-scheme: dark) multiple @media queries.
• content: " (" attr(href) ")"; or a[href]:after { content: none; } (display link)

Annoying stuff

• margin collapse (but not for inline-block!)
• table tr border won't style without border-collapse on the table.

Future stuff (someday)

I don't think there's any point listing these until they're widely adopted. It also adds another layer of complexity and cognitive load.

Things like html5 web components and css mixins. Wherever possible avoid javascript and use plain HTML and CSS: most programming languages have templates and {{ tags }} anyway.

Footnotes

1. This has pretty good coverage for modern browsers, but a few (only a few) still don't support it. It'd be wise, for now, to continue using .less (or .sass) files and compile to regular CSS. They're also handy for chunking your files, which regular css can't do (still) ↩

2. In my mind both of these are fucking confusing. A simple question to ask yourself when deciding between grid or flexbox is: do I only need to control the layout by row or column? (use a flexbox); do I need to control the layout by row and column (use a grid). ↩ ↩²