Water.css — Classless CSS Framework for Simple Websites

Introduction

Water.css is a classless CSS framework that styles bare HTML elements. Drop a single <link> tag into any page and every heading, paragraph, form, table, and code block gets clean, modern styling with automatic dark mode support—no class names required.

What Water.css Does

• Styles all standard HTML5 elements without requiring any CSS classes
• Provides automatic dark and light themes based on system preferences
• Handles responsive typography and spacing out of the box
• Styles form elements (inputs, selects, textareas, buttons) consistently
• Formats code blocks, tables, blockquotes, and details/summary elements

Architecture Overview

Water.css is a single CSS file built from PostCSS source modules. It uses CSS custom properties for theming (colors, spacing, fonts) and the prefers-color-scheme media query for automatic dark mode. Every rule targets bare HTML element selectors—no class or ID selectors—making it truly classless. The build produces three variants: light-only, dark-only, and automatic.

Installation & Configuration

• Link from a CDN for instant setup with no build step
• Install via npm: npm install water.css for local builds
• Choose between water.min.css (auto), light.min.css, or dark.min.css
• Override CSS custom properties (--background-body, --text-main, etc.) for custom themes
• Works with any static site generator, documentation tool, or plain HTML page

Key Features

• Zero-class approach: write semantic HTML and get styled output
• Automatic dark/light mode via prefers-color-scheme
• Tiny file size under 2KB gzipped
• CSS custom properties for easy theme customization
• Accessibility-focused defaults with proper contrast ratios

Comparison with Similar Tools

• Milligram — provides a grid system and utility classes; Water.css is purely classless
• Pico CSS — similar classless concept with more components; Water.css is simpler and smaller
• MVP.css — another classless framework; Water.css has better dark mode and broader element coverage
• new.css — minimalist classless styles; Water.css offers more theming options via custom properties
• Sakura — classless CSS with a different aesthetic; Water.css provides automatic dark mode

FAQ

Q: Do I need to add any CSS classes to my HTML? A: No. Water.css targets element selectors only. Standard HTML elements are styled automatically.

Q: How does automatic dark mode work? A: The default water.css file uses prefers-color-scheme to match the user's system preference, switching colors via CSS custom properties.

Q: Can I use Water.css alongside other CSS frameworks? A: It can conflict with frameworks that style the same elements. It works best as the sole stylesheet or as a base with custom overrides.

Q: Is Water.css suitable for complex web applications? A: It is designed for simple content pages, documentation, and prototypes. Applications with custom layouts typically need a class-based framework.

Sources

• https://github.com/kognise/water.css
• https://watercss.kognise.dev/