Overview

Motivation

Strict separation between HTML and CSS code is mostly accepted without question as a "best practice". When challenged, however, the most common arguments presented in favor include:

On the other hand, practical use cases and real-world workflows reveal the significant advantages of colocating markup and styles, including:

Hacss facilitates the colocation of markup and styles by recovering features not available in native inline styles. It does so without significantly altering the syntax you already know, introducing additional runtime overhead, or committing you to any particular UI library or application framework.

Mechanism

To understand how this works, consider the following HTML snippet which uses native inline styles to change the background color of the button to darkblue and the text color to white:

<button style="background-color: darkblue; color: white">Button Text</button>

This is fine, but it is a rather limited treatment. It is very common, for example, to change the background color of a button on hover; but we cannot achieve this simple effect with a native inline style. Instead, we normally have to resort to a separate style sheet and applying an HTML class:

<button class="foo">Button Text</button>
.foo {
  background-color: darkblue;
  color: white;
}

.foo:hover {
  background-color: blue;
  color: white;
}

Hacss avoids this indirection and manual effort by analyzing the presentational class names you use in HTML and generating the corresponding style sheet automatically. For example:

<button class="background-color:darkblue; color:white;">Button Text</button>

This technique of embedding styles in HTML classes allows Hacss essentially to extend the syntax to include additional features like pseudo-selectors:

<button class="
  background-color:darkblue;
  color:white;
  :hover{background-color:blue;}
">
  Button Text
</button>
Hacss
Overview Getting Started Guides Basement GitHub