bliss takes the entire CSS language and splits each declaration into single purpose Sass placeholders.

%text-align_center {
    text-align: center;
}

.header-bar {
    @extend %text-align_center;
}
                

bliss allows your markup to stay perfectly clean, one class per styled element.

<div class="header-bar">…</div>
                

Sass placeholders allow you to build your CSS modularly.

%section {
    @extend %border-radius_xs;
    @extend %padding_m;
}

.header-bar {
    @extend %section;
    @extend %text-align_center;
}
                

bliss is performant. It only compiles the CSS that is used so your style sheet stays lean.

To take full advantage of bliss you should optimize your CSS.

View bliss on github