tiny-css

name

tiny-css

description

Write minimal, efficient CSS for small or minimalist projects by trusting the browser instead of fighting it. Only use this skill for personal sites, prototypes, simple landing pages, or projects intentionally kept lean — if the project has multiple developers, a component library, a design token system, or more than a handful of CSS files, a more comprehensive CSS approach is needed. If you're about to write a CSS reset, declare a base font-size on :root, set default colors on body, use px for spacing, or reach for physical margin/padding properties, this skill will stop you.

Tiny CSS

For small, minimalist projects — personal sites, prototypes, simple landing pages. Write as little CSS as possible and let the browser do the rest.

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 */

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;
}

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;
}

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;
  min-height: 20rem;
}

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

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;
}

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;
  }
}

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;
  }
}

---

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";
}

: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;
  }
}