Tiny CSS

Write as little CSS as possible. Leverage browser defaults and modern CSS features instead of overriding everything.

Core Principles

1. Trust the browser — Don't reset what already works
2. Use modern features — Let CSS handle what JavaScript used to do
3. Respect user preferences — Honor system settings for motion, contrast, and color schemes
4. Write resilient styles — Use logical properties for internationalization

Guidelines

Don't Declare Base Font Size

Let the browser handle the base font size, which defaults to 100% (typically 16px). Users can adjust this in their browser settings for accessibility.

/* Don't do this */
:root {
  font-size: 16px;
}
html {
  font-size: 100%;
}
body {
  font-size: 1rem;
}

/* Do nothing — the browser already handles this */

Don't Declare Default Colors

Skip declaring color and background-color on the root. Browser defaults work and respect user preferences.

/* Don't do this */
body {
  color: #000;
  background-color: #fff;
}

/* Do nothing — browser defaults are fine */

Enable Light and Dark Modes

Use color-scheme to automatically support light and dark modes based on user system preferences.

:root {
  color-scheme: light dark;
}

Customize Interactive Element Colors

Use accent-color to change the color of checkboxes, radio buttons, range sliders, and progress bars.

:root {
  accent-color: #0066cc; /* Replace with desired color */
}

Match SVG Icons with Text Color

Make SVG icons inherit the current text color automatically.

:where(svg) {
  fill: currentColor;
}

Support Forced Colors Mode

Ensure buttons remain visible in Windows High Contrast Mode by adding explicit borders.

@media (forced-colors: active) {
  :where(button) {
    border: 1px solid;
  }
}

Handle Reduced Transparency

Only apply translucent or glassy effects when the user hasn't requested reduced transparency.

@media (prefers-reduced-transparency: no-preference) {
  .glass-panel {
    background: oklch(100% 0 0 / 0.8);
    backdrop-filter: blur(1rem);
  }
}

Use System Font with Better Glyphs

Enable distinct characters for uppercase I, lowercase l, and slashed zero in San Francisco font.

:root {
  font-family: system-ui;
  font-feature-settings: "ss06";
}

Improve Text Wrapping

Prevent widows and improve line breaks.

:where(h1, h2, h3, h4, h5, h6) {
  text-wrap: balance;
}

:where(p) {
  text-wrap: pretty;
}

Use Logical Properties

Write CSS that works across all languages and writing directions. Use logical properties instead of physical ones.

/* Don't do this */
.card {
  margin-left: 1rem;
  margin-right: 1rem;
  padding-top: 2rem;
  padding-bottom: 2rem;
  width: 20rem;
  height: auto;
}

/* Do this */
.card {
  margin-inline: 1rem;
  padding-block: 2rem;
  inline-size: 20rem;
  block-size: auto;
}

Make Media Embeds Responsive

Ensure images, videos, and iframes scale proportionally.

:where(img, svg, video, iframe) {
  max-inline-size: 100%;
  block-size: auto;
}

Add Pointer Cursors to Interactive Elements

Provide a baseline hover affordance for all clickable elements.

:where(input:is([type="checkbox"], [type="radio"]), select, label, button) {
  cursor: pointer;
}

Create Consistent Focus Outlines

Ensure all interactive elements have visible, high-contrast focus indicators.

*:focus-visible {
  outline: 2px solid;
  outline-offset: 2px;
}

Respect Reduced Motion Preferences

Only animate elements when the user hasn't requested reduced motion.

@media (prefers-reduced-motion: no-preference) {
  .animated-element {
    transition: transform 0.3s ease;
  }
}

Enable Smooth Scrolling Conditionally

Apply smooth scrolling only when the user hasn't requested reduced motion.

@media (prefers-reduced-motion: no-preference) {
  :root {
    scroll-behavior: smooth;
  }
}

Use ARIA Attributes as Styling Hooks

Style components based on their accessibility state rather than creating modifier classes.

/* Don't do this */
.accordion-header--collapsed {
  /* collapsed styles */
}
.accordion-header--expanded {
  /* expanded styles */
}

/* Do this */
[aria-expanded="false"] {
  /* collapsed styles */
}
[aria-expanded="true"] {
  /* expanded styles */
}

More examples:

/* Navigation states */
[aria-current="page"] {
  font-weight: bold;
}

/* Disabled states */
[aria-disabled="true"] {
  opacity: 0.6;
  cursor: not-allowed;
}

/* Selected states */
[aria-selected="true"] {
  background-color: highlight;
}

/* Invalid form fields */
[aria-invalid="true"] {
  border-color: red;
}

Minimal Base Stylesheet

Here's a complete minimal base that incorporates all guidelines:

:root {
  color-scheme: light dark;
  accent-color: #0066cc;
  font-family: system-ui;
  font-feature-settings: "ss06";
}

*:focus-visible {
  outline: 2px solid;
  outline-offset: 2px;
}

:where(h1, h2, h3, h4, h5, h6) {
  text-wrap: balance;
}

:where(p) {
  text-wrap: pretty;
}

:where(img, svg, video, iframe) {
  max-inline-size: 100%;
  block-size: auto;
}

:where(svg) {
  fill: currentColor;
}

:where(input:is([type="checkbox"], [type="radio"]), select, label, button) {
  cursor: pointer;
}

@media (forced-colors: active) {
  :where(button) {
    border: 1px solid;
  }
}

@media (prefers-reduced-motion: no-preference) {
  :root {
    scroll-behavior: smooth;
  }
}