hacss

hacss

Hackable inline style language embedded in HTML classes

While many consider inline styles to be, in essence, more maintainable than external stylesheets, the limited capabilities of vanilla inline styles (e. g. no media queries or pseudo-selectors) often force a project to use external stylesheets or to resort to JavaScript for even trivial state changes (like changing the color of a button on hover) or responsive designs. Moreover, JavaScript cannot replace stylesheets completely, as it offers no direct way to style pseudo-elements such as input placeholders.

Hacss combines the maintainability benefits of inline styles with the capabilities of external stylesheets by embedding its own styling DSL within HTML class attributes. At build time, Hacss automatically generates a stylesheet from the CSS classes used throughout the project: <h1 class="C(red)">Hello World</h1>, for example, yields a CSS block .C\(red\) { color: red; }.

Hacss is a drop-in replacement for acss.io's Atomizer tool for the majority of use cases. In general, the "Atomic" and "Helper" classes listed on the acss.io Reference page are applicable to Hacss as well. Hacss may be a better option than Atomizer for non-basic use cases for a few reasons:

• Simpler configuration model. Hacss combines "rules" (aka "atomic classes") and "helpers" into a single concept of a rule. Verbose schemas for defining "rules" and "helpers" are replaced by a simple map between a rule name and its definition (typically a function used to generate the corresponding styles).
• Where Atomizer blocks attempts to change rules, Hacss makes redefining rules easy. A common use case for this would be to re-implement O (outline) using box-shadow as described here.
• Hacss configuration is function-oriented, offering greater control and flexibility. Instead of a map of global variables, for example, Hacss uses globalMapArg to allow global variable lookups as well as other transformations.

For more, see the guides.