Skip to content

comparison.md

Latest commit

 

History

History
196 lines (123 loc) · 6.58 KB

comparison.md

File metadata and controls

196 lines (123 loc) · 6.58 KB
Raw

Comparison

There is no single "best" CSS base. Different tools solve different layers of the problem:

  • some normalize browser inconsistencies
  • some create a blank canvas for utility-first workflows
  • some ship ready-made visual styling for semantic HTML
  • some provide design tokens rather than a base

browserux.css belongs to the base category, but with a broader scope than traditional reset/normalize stylesheets.

Direct comparisons: CSS bases

These tools are the closest comparisons because they all operate at the base layer before your own project styles.

Overview

browserux.css modern-normalize sanitize.css Tailwind Preflight
Philosophy Reset + normalization + UX + accessibility Pure normalization Normalization + useful defaults + modular files Aggressive reset for utilities
Dependencies None None None Requires Tailwind CSS
CSS Variables Yes (--bux-*) No No No
Dark mode support Yes No No No
User preferences 5 media queries None Separate motion stylesheet None
Focus strategy Visible fallback + :focus-visible No Partial / utility defaults No
Dialog support Normalized + animated No No No
Print styles Yes No No No
Modular distribution Yes No Yes No

What changes between them

modern-normalize

Created by Sindresorhus, modern-normalize is deliberately narrow: it fixes browser inconsistencies and little else.

Choose it when you want the lightest possible normalization layer and already know how you want to handle UX, accessibility, and browser UI behaviors yourself.

sanitize.css

sanitize.css is the closest adjacent project to browserux.css in spirit. It goes beyond strict normalization by adding documented best-practice defaults, and it is intentionally modular (forms.css, typography.css, reduce-motion.css, etc.).

Compared with browserux.css:

  • sanitize.css is broader than modern-normalize
  • it is more modular out of the box
  • it stays more neutral on browser UI and visual behavior
  • browserux.css goes further on system preferences, focus strategy, dialog, scrollbar theming, and form UX

Tailwind Preflight

Tailwind Preflight is built to support Tailwind's utility workflow. It removes many browser defaults so utility classes can fully take over.

Without Tailwind, it is not really a standalone base: it strips styles but does not replace them with a usable baseline.

browserux.css

browserux.css starts from a different assumption: modern browsers already provide native UX and accessibility hooks that many bases leave untouched.

Its goal is not only to normalize, but to prepare a better native baseline:

  • system preference support
  • visible keyboard focus
  • form UX improvements
  • browser UI theming
  • dialog normalization
  • print support

Detailed differences

User preferences

Preference layer browserux.css modern-normalize sanitize.css Tailwind Preflight
prefers-color-scheme Yes No No No
prefers-reduced-motion Yes No Separate optional stylesheet No
prefers-contrast Yes No No No
prefers-reduced-transparency Yes No No No
forced-colors Yes No No No

This remains one of browserux.css's strongest differentiators.

Focus

browserux.css provides a visible :focus fallback and refines it with :focus-visible, which makes it stronger as a published baseline than bases that leave focus untouched.

Forms

Compared with other bases, browserux.css goes further on form ergonomics:

  • accent-color
  • caret-color
  • :user-valid / :user-invalid
  • field-sizing: content
  • touch-action: manipulation

Browser UI layer

Only browserux.css treats scrollbars, dialog behavior, and browser-level interaction details as part of the base itself.

Adjacent tools: classless / semantic frameworks

These are useful comparisons, but they do not solve the same problem as a pure CSS base.

Pico CSS

Pico CSS is a lightweight semantic framework that gives HTML elements a polished visual design out of the box.

Compared with browserux.css:

  • Pico is much more visual and opinionated
  • Pico is closer to a class-light framework than to a reset/normalize layer
  • browserux.css is better when you want a base and plan to build your own design on top
  • Pico is better when you want semantic HTML to already look styled with very little extra work

Water.css

Water.css belongs to the same broad "classless styling" family: it makes plain HTML look good immediately.

That makes it a useful alternative when your main goal is instant visual output, not a low-level CSS base.

Complementary tools: token libraries

Open Props

Open Props is not a direct competitor to browserux.css.

It primarily provides design tokens and CSS custom properties for colors, sizing, typography, animation, and more.

In practice:

  • browserux.css solves the base problem
  • Open Props solves the token/design-variable problem

They can absolutely be used together.

When to choose what

Choose modern-normalize

  • You only want cross-browser normalization.
  • You want the smallest possible baseline.
  • You prefer to build everything else yourself.

Choose sanitize.css

  • You want a broader best-practices base than modern-normalize.
  • You value modular files and selective imports.
  • You want useful defaults without moving as far into browser UX territory as browserux.css.

Choose Tailwind Preflight

  • You use Tailwind CSS.
  • You want a reset designed specifically for utility-first styling.

Choose Pico CSS or Water.css

  • You want semantic HTML to look good immediately.
  • You are looking for default visual styling, not just a base layer.

Choose Open Props

  • You mainly need design tokens and CSS variables.
  • You already have a base but want a richer token system.

Choose browserux.css

  • You write CSS manually or with a preprocessor.
  • You want a stronger native UX/a11y baseline.
  • You want browser preferences, focus, form UX, dialog, and print support handled in one base.
  • You want something broader than normalize, but lighter than a framework.

What browserux.css does not replace

browserux.css is not:

  • a design system
  • a component library
  • a classless visual framework
  • a utility framework
  • a token library

It is best understood as a modern UX-first CSS base.