Resources

Modern CSS Solutions for Old CSS Problems

ArticleSprout

Stephanie Eckles' series — thirty-odd articles, each taking a problem front-end developers have solved with hacks for a decade (centering, custom checkboxes, aspect ratios, sticky footers, responsive type) and solving it with what CSS can do now — with SmolCSS, her companion site of copy-and-paste modern layouts, and Style Stage, a community showcase of one HTML file styled a hundred ways. Free.

Web

The site the glossary's modern CSS entry is named after, and the best worked-example set for it: each article states the old problem, shows the old workaround, and replaces it with the modern property — aspect-ratio for the padding hack, gap for the negative-margin grid, :is() and :where() for the selector lists, custom properties for the theme switch. Eckles writes for developers who already know the workaround, which is the audience that needs to be told it can stop.

SmolCSS is the companion: the same ideas as snippets — the responsive grid, the flexible sidebar, the aspect-ratio card — each under a screen of CSS. Style Stage is the Zen Garden idea again, which is this site's own theme model, run as a community. All free; there is a paid course beside them.

  • a: Appearance
  • ?: Keyboard shortcuts