What Are the Goals and Design Principles of Water.css?

Updated

Water.css is a drop-in stylesheet for simple static sites. Its stated goals are: responsive by default, good code quality, good browser support, small size (under 2kb minified and gzipped), beautiful defaults, and no classes. It suits pages written in plain semantic HTML where you don't want to hand-write CSS or add utility classes.

The goals, and what each one means in practice

Goal What it implies for your page
Responsive No fancy layout styles, so it adapts easily to mobile. You still need the responsive viewport meta tag.
Good code quality The stylesheet is meant to be readable and maintainable, not a pile of overrides.
Good browser support Built to work across browsers rather than relying on the newest CSS features.
Small size (< 2kb min + gzip) Negligible load cost, which matters for simple, fast pages.
Beautiful The default rendering of plain HTML elements should already look presentable.
No classes You style by writing correct semantic HTML, not by adding class names.

The "no classes" principle is the one that shapes everything else. Because styling is driven entirely by element selectors, the quality of your output depends on using the right tags for the right content — headings, table, form, details/summary, dialog, and so on — rather than on decorating elements.

Responsiveness: what you still have to do

Water.css describes itself as responsive, but it doesn't include layout machinery. The site's own guidance is that you just add the standard responsive viewport tag and you're set:

<meta name="viewport" content="width=device-width, initial-scale=1">

Without that tag, mobile browsers fall back to a desktop-width viewport and the page won't scale as intended. So "responsive" here means "nothing in the stylesheet fights small screens," not "layout is handled for you."

Installation

Paste the stylesheet link into the <head> of your HTML. The site presents this as a copyable snippet with theme options:

  • Automatic — follows the visitor's system dark/light preference
  • Dark theme — forces the dark variant
  • Light theme — forces the light variant

Pick the variant that matches how you want the page to behave, then include it before your own content. The site also lists version info and file size (min + gzip) alongside these options, so you can confirm what you're shipping.

Trying it without touching your site: the bookmarklet

Water.css ships a bookmarklet called Waterize. A bookmarklet is a snippet of JavaScript stored in your bookmarks bar. Dragging the Waterize link to your bookmarks bar lets you replace the styles of any page you're viewing with Water.css — useful for making an ugly page more readable, or for previewing how Water.css treats a given set of markup before you commit to it.

What the element demos tell you about coverage

The demo page exists to exercise the stylesheet across many elements, which is a good checklist for what "no classes" covers:

  • Form elements — text inputs, read-only and disabled inputs, selects, checkboxes
  • Code — inline code and code blocks
  • Tables — a marked-up table with header row and body rows
  • Details/summary — collapsible disclosure content
  • Dialog — the dialog element, including form and menu usage inside it
  • Typography — paragraphs and general text flow
  • Miscellaneous — horizontal rules and images

If your page is built from these kinds of elements, Water.css will style it without any class attributes. If your page depends on custom components, grids, or utility-class frameworks, that's outside what this stylesheet is designed to do.

When Water.css is the right choice

Choose it when you have a simple static site, you're writing semantic HTML, and you want decent defaults with essentially zero CSS authoring and near-zero payload. Skip it when you need a design system, custom components, or class-based control over layout — the goals here deliberately exclude that.