modern-css

Modern CSS best practices and patterns. Use when writing, editing, or reviewing CSS, SCSS, styled-components, or any task that produces CSS output. Provides modern alternatives to legacy hacks, JavaScript workarounds, and library dependencies.

Jump to install

Repository: magarcia/skills
Last source activity: July 23, 2026 at 14:20
Detected SKILL.md language: English
Stars: 4
Forks: 0

Install options

The review-first prompt is selected by default. You can switch to a direct command or download a local copy.

Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.

A direct command skips the review prompt. Inspect the source before running it.

npx skills add https://github.com/magarcia/skills --skill modern-css

The command stays on one line. Scroll horizontally to inspect it before copying.

Prefer a local copy? Download the files currently available to SkillsMP.

Review the source files

Read SKILL.md and any companion files shown by SkillsMP before deciding whether to install.

File Explorer

64 files

SKILL.md

Source instructions · Read-only preview

Back to search Back to installation

name	modern-css
description	Modern CSS best practices and patterns. Use when writing, editing, or reviewing CSS, SCSS, styled-components, or any task that produces CSS output. Provides modern alternatives to legacy hacks, JavaScript workarounds, and library dependencies.

Modern CSS

When writing or reviewing CSS, prefer modern CSS features over legacy hacks, JavaScript workarounds, or library dependencies.

How to Use

Read individual rule files in the rules/ directory for detailed before/after code examples:

rules/layout-inset.md
rules/color-oklch.md
rules/selector-has.md

Each rule file contains a before/after comparison and browser support percentage. See rules/_sections.md for category definitions and ordering.

Treat bundled support percentages as snapshots, not current compatibility guarantees. Check the project's Browserslist or supported-browser policy first. For newly available or experimental features, verify current support in primary browser documentation before recommending production use.

Rule Categories

Priority	Category	Prefix	Support
1	Layout & Positioning	`layout-`	90%+
2	Colors & Theming	`color-`	83-96%
3	Typography & Fonts	`typography-`	79-96%
4	Selectors & Specificity	`selector-`	84-96%
5	Transitions & Animation	`animation-`

Instead of...	Use
`position: absolute; top:0; right:0; bottom:0; left:0`	`inset: 0`
`display:grid; justify:center; align:center` (verbose)	`place-items: center`
`calc(100% - padding)` width hacks	`width: stretch`
Padding-top aspect ratio hack	`aspect-ratio: 16/9`
JS scroll listeners for sticky	`position: sticky; top: 0`
Margin + `:last-child` override	`gap: 16px`
Sass `$variables`	`var(--custom-property)`
Media query breakpoint ladder	`clamp(1rem, 2.5vw, 2rem)`
Manual `<br>` for headline wrapping	`text-wrap: balance`
Sass nesting (build step)	Native CSS nesting `& a { }`
`:focus` (shows on click)	`:focus-visible`
Complex selectors for resets	`:where()` (zero specificity)
Repeating selectors	`:is(h1, h2, h3)` grouping
`.parent.has-child` class toggle	`:has()` parent selector
Background-image cover hack	`object-fit: cover`
`overflow-y: scroll` for shift	`scrollbar-gutter: stable`
JS `preventDefault` on scroll	`overscroll-behavior: contain`
JS IntersectionObserver for lazy	`content-visibility: auto`
Separate `@font-face` per weight	Variable font `font-weight: 100 900`
JS for dark mode form controls	`color-scheme: light dark`
Duplicated dark mode variables	`light-dark(#111, #eee)`
`appearance: none` + custom styles	`accent-color: #7c3aed`
Separate transform shorthand rewrite	`translate`, `rotate`, `scale` individually
JS `classList.toggle` for display	`transition-behavior: allow-discrete` + `@starting-style`
Sass `mix()`	`color-mix(in oklch, color1, color2)`

modern-css

Install options

Review the source files

Modern CSS

How to Use

Rule Categories

Modern CSS

How to Use

Rule Categories

Core Principles

Quick Reference — Use These (90%+ Support)

Support Tiers

Widely Available (90%+) — Use freely

Newly Available (80-89%) — Use with confidence

Limited Support (< 80%) — Use progressively or check project targets

modern-css

Source facts

Install options

Review the source files

More from this repository

More from this repository

Modern CSS

How to Use

Rule Categories

Modern CSS

How to Use

Rule Categories

Core Principles

Quick Reference — Use These (90%+ Support)

Support Tiers

Widely Available (90%+) — Use freely

Newly Available (80-89%) — Use with confidence

Limited Support (< 80%) — Use progressively or check project targets