Getting Started

Try it

You can try the CLI with no installation required using npx. Just provide a snippet of HTML containing a style rule, and a style sheet will be generated:

echo "<span class=\":hover{color:red}\">testing</span>" | npx hacss


The Basement app is a browser-based HTML editor that automatically generates a Hacss style sheet for you. No configuration or installation required!

Start tinkering →



Discover the CSS-in-HTML methodology, how it works, why you might choose it over various alternatives, and some basic rules you need to know.


Learn the syntax of Hacss style rules.


Learn how to configure Hacss with your own variables and at-scopes (media queries).

Command-line interface

Use Hacss with little setup and zero integration effort required.


Integrate Hacss into your existing build process.


Run Hacss programmatically as part of your custom build process.

Style Guide

Learn best practices for using Hacss.


A great starting point for many projects, the Shortcuts package offers a color palette, spacing presets, typography, and more, all in the form of a Hacss configuration.