Hacss

Style like you mean it.

Get Started

Cut the BS out of CSS.

Hacss makes inline styles a viable option, helping you to avoid redundant abstractions, inconsistent or dead code, and surprising behaviors inherent to other approaches and methodologies.

Inline superpowers

Hacss brings pseudo-classes, pseudo-elements, contextual styling capabilities, media queries, variables, and more to the inline style language you already know.

Increase your agility.

This direct approach to styling HTML makes code more transparent and easier to change while eliminating context switches, code alignment issues, and naming challenges.

Just Classes

Simply move inline styles from the style attribute to the class attribute and remove whitespace as needed. Hacss generates a style sheet to apply the styles you have used. No JavaScript runtime is required: Just add a reference to this generated style sheet.
You have 43 unread messages.
<span class="color:#f63;">
  You have 43 unread messages.
</span>

Pseudo-classes

Hacss extends the inline style rule syntax to include pseudo-classes. Now you can affect the style of an element on hover without resorting to JavaScript or authoring a separate style sheet.
<button class="
  background:#e64d1a;
  :hover{background:#f63;}
  :active{background:#c30;}
  color:#fff;
  font-family:sans-serif;
  font-size:14px;
  padding:8px__16px;
  border-radius:999px;
  border:none;
  outline:none;
  :focus{box-shadow:0__0__0__2px__#c30;}
">
  Save Changes
</button>

Pseudo-elements

Pseudo-elements also work as expected, helping to preserve markup semantics by avoiding unnecessary presentational elements.
  1. Welcome
  2. Register
  3. Confirm
<ol class="
  list-style-type:none;
  margin:0;
  padding:0;
  display:flex;
  justify-content:stretch;
">
  <li class="
    ::after{content:'';}
    ::after{position:absolute;}
    ::after{left:50%;}
    ::after{right:0;}
    ::after{top:10px;}
    ::after{height:4px;}
    ::after{background:#f63;}
    position:relative;
    display:inline-block;
    padding-top:30px;
    background-image:url('data:image/svg+xml,%3Csvg%20viewBox=%270%200%202%202%27%20xmlns=%27http://www.w3.org/2000/svg%27%3E%3Ccircle%20cx=%271px%27%20cy=%271px%27%20r=%271px%27%20fill=%27%23f63%27%20/%3E%3C/svg%3E');
    background-size:16px;
    background-repeat:no-repeat;
    background-position-x:center;
    background-position-y:4px;
    flex:1;
    text-align:center;
  ">
    Welcome
  </li>
  <li class="
    ::before{content:'';}
    ::before{position:absolute;}
    ::before{left:0;}
    ::before{right:50%;}
    ::before{top:10px;}
    ::before{height:4px;}
    ::before{background:#f63;}
    ::after{content:'';}
    ::after{position:absolute;}
    ::after{left:calc(50%+12px);}
    ::after{right:0;}
    ::after{top:10px;}
    ::after{height:4px;}
    ::after{background:#b6a5a7;}
    position:relative;
    display:inline-block;
    padding-top:30px;
    background-image:url('data:image/svg+xml,%3Csvg%20viewBox=%270%200%202%202%27%20xmlns=%27http://www.w3.org/2000/svg%27%3E%3Ccircle%20cx=%271px%27%20cy=%271px%27%20r=%271px%27%20fill=%27%23f63%27%20/%3E%3C/svg%3E');
    background-size:24px;
    background-repeat:no-repeat;
    background-position-x:center;
    flex:1;
    text-align:center;
  ">
    Register
  </li>
  <li class="
    ::before{content:'';}
    ::before{position:absolute;}
    ::before{left:0;}
    ::before{right:50%;}
    ::before{top:10px;}
    ::before{height:4px;}
    ::before{background:#b6a5a7;}
    position:relative;
    display:inline-block;
    padding-top:30px;
    background-image:url('data:image/svg+xml,%3Csvg%20viewBox=%270%200%202%202%27%20xmlns=%27http://www.w3.org/2000/svg%27%3E%3Ccircle%20cx=%271px%27%20cy=%271px%27%20r=%271px%27%20fill=%27%23b6a5a7%27%20/%3E%3C/svg%3E');
    background-size:16px;
    background-repeat:no-repeat;
    background-position-x:center;
    background-position-y:4px;
    flex:1;
    text-align:center;
  ">
    Confirm
  </li>
</ol>

Context

You can create style rules contingent upon the element's relationship to another element.
<label class="display:flex; align-items:center;">
  <input
    type="checkbox"
    class="
      cbx
      margin-top:0;
      margin-bottom:0;
      margin-left:0;
      margin-right:8px;
      appearance:none;
      border-width:1px;
      border-style:solid;
      border-color:#f63;
      width:15px;
      height:16px;
      border-radius:0;
      outline:none;
      :checked{background-color:#f63;}
      :checked{background-image:url('data:image/svg+xml,%3Csvg%20viewBox=%270%200%2011%2011%27%20xmlns=%27http://www.w3.org/2000/svg%27%3E%3Cpath%20d=%27M0,7%20l4,4%20l7,-8%20l-2,-2%20l-5,6%20l-3,-2%27%20fill=%27%23fff%27%20/%3E%3C/svg%3E');}
      :checked{background-position-x:1px;}
      :checked{background-position-y:1px;}
      :checked{background-repeat:no-repeat;}
      :checked{background-size:11px;}
      :focus{box-shadow:0__0__0__1px__#f63;}
    " checked />
  <span class="cbx:checked+text-decoration:line-through;">
    Mow the lawn.
  </span>
</label>

Media Queries

You can use media queries to affect the styling of the element based on e.g. device width.
Current breakpoint: small medium large
Current breakpoint:
<strong class="
  display:none;
  @small{display:inline;}
  font-weight:700;
">
  small
</strong>
<strong class="
  display:none;
  @medium{display:inline;}
  font-weight:700;
">
  medium
</strong>
<strong class="
  display:none;
  @large{display:inline;}
  font-weight:700;
">
  large
</strong>

Variables

You can propagate design primitives through variables using an available plugin.

hacss

<h1 class="
  font-family:$display;
  font-weight:normal;
  font-size:48px;
  margin:0;
  line-height:1;
  color:$red700;
">
  hacss
</h1>
Hacss
Overview Getting Started Guides Basement GitHub