DSS ✨

DSS (Deterministic StyleSheets) is a component-oriented CSS authoring system that compiles to high-performance atomic CSS classes-based stylesheets.

DSS works like CSS Modules except that supports a subset of CSS that can be compiled to atomic CSS classes. Thanks to atomic CSS classes styles can be resolved in a deterministic way based on their application order:

<!-- the text will be green -->
<div class="red green">hello</div>

<!-- the text will be red -->
<div class="green red">hello</div>

Features

⚡️ Automatic compilation to Atomic CSS classes and high-performance stylesheets
🆎 Deterministic styles resolution: styles are always resolved in application order
📦 Scoped Styles
🌎 Framework and language agnostic
🤝 Preprocessors friendly
💻 Standalone CLI and support for Webpack 3 and 4 with automatic vendor prefixing
✂️ CSS the Best Parts

How it works

Thanks to the DSS compiler and a simple classNames helper, DSS styles are resolved in deterministic way that respects the application order.

DSS is language agnostic. Styles are authored in static .css files, compiled down to atomic CSS classes for smaller bundle size and then consumed in any language (Ruby, PHP, Python etc) that implements the super simple classNames helper.

Given two class names that set the color to red and green:

.foo {
  color: red;
}
.bar {
  color: green;
}

when applied to an element one class wins over the other depending on the order in which the classes are applied:

<!-- the text will be green -->
<div class="foo bar">hello</div>

<!-- the text will be red -->
<div class="bar foo">hello</div>

Such a feature makes it possible to tell with confidence which rules apply or overrule others at any given point in time.