Introduction

A lightweight CSS architecture convention for modern web applications.

What is STACSS?

STACSS is a CSS architecture convention. It defines where to put your stylesheets and how to name them — nothing more.

There is no tooling to install and no configuration to write. STACSS is a shared vocabulary that any developer can understand in minutes and apply to any project or framework.

Not a framework. Not a library. Just a convention.

Recommended structure

STACSS organizes stylesheets into five directories, each with a clear purpose.

utilities/

Variables and mixins. No CSS output on their own.

base/

Resets, fonts, and themes. Applied once across the whole app.

components/

Reusable UI elements shared across multiple views.

views/

Styles specific to individual pages or screens. Not shared elsewhere.

helpers/

Single-purpose utility classes used directly in HTML.

See File Structure for the full example and advice on adapting this layout to your framework.