Sumi.css, a Small Classless CSS Framework, semantic HTML without classes

Sumi.css is a new CSS framework that aims to make plain HTML look finished without adding classes. CSS is the code that controls how a web page looks.

The idea is called "classless-first." You write normal, semantic HTML, meaning tags that describe what the content is, like headings, forms, tables and navigation. Sumi styles those elements directly. You add a class only when you want something more specific.

According to the project page, Sumi is one file with no build step. It is listed at 6.7 KB when minified and gzipped, and it uses no JavaScript and no dependencies. To use it, you copy sumi.min.css into your project and link it. The unminified sumi.css is meant for development, and its comments explain each section.

The page says headings, forms, tables, cards, accordions, modals and navigation are all styled from the HTML element alone. For example, an <article> becomes a card, <details> and <summary> become an accordion, and <dialog> becomes a modal with a blurred backdrop. A <nav> with two lists becomes a navigation bar with left and right groups.

There are optional classes and attributes for layout and extras. A .grid class makes auto-fitting columns, and classes like .cols-3 or .span-8 give fixed column layouts. Other options include .container for page width, .prose for long reading text, and .callout for message boxes. Attributes like role="switch" and aria-busy="true" turn on a toggle switch or a loading spinner.

Light and dark mode are built in. Sumi follows the visitor's system setting automatically. Setting data-theme to light or dark on the <html> tag, or on any single element, forces a mode. The docs note that the dark palette appears twice in sumi.css, so anyone changing dark colors needs to edit both blocks.

Theming is done with CSS custom properties, which are named variables. Every color, font, size and radius is one, and they all start with --s-. You override them in a stylesheet that loads after Sumi. The same variables can be set on a single element.

Overriding styles is meant to be easy. Sumi wraps its element styles in :where(), which gives them zero specificity. In practice, that means a plain selector in your own CSS wins, with no need for !important.

The project also lists accessibility features. These include visible focus rings, states driven by ARIA attributes such as aria-invalid, aria-busy and aria-current, and support for reduced motion.

Browser support covers current versions of Chrome, Edge, Firefox and Safari. Sumi uses :where(), :has() and color-mix(), which are available from Chrome and Edge 111, Firefox 121 and Safari 16.2. The docs say older browsers still show readable pages, with plainer hover and focus colors.

The repository includes sumi.css, sumi.min.css, a docs.html page with every component and a live token editor, and a tutorial.html guide. To rebuild the minified file after editing the source, the docs give the command npx lightningcss-cli --minify sumi.css -o sumi.min.css.