Home

Introduction

Bangs are CSS classes that have one style, one responsibility. For the most common CSS property-value pairs, there is a corresponding Bang class. For an overview on usage, see the readme. You can also look through the issues to see what features are being added or how they’re being changed. Check out the releases for version updates. This documentation describes the naming convention used throughout the project.

In general, the syntax of a bang classname looks like this:

.-‹prop›-‹val›[-‹suffix›]?

<style>
  .-fs-t { font-style: italic; }
  @media screen and (min-width: 60em) {
    .-d-lb-sG { display: inline-block !important; }
  }
  .-bc-b-h:hover { background-color: #000000 !important; }
</style>
<p class="-fs-t">Italic font in all media.</p>
<p class="-d-lb-sG">Displays as inline-block for large screen sizes.</p>
<p class="-bc-b-h">Black background on hover.</p>

The leading hyphen indicates the class is an “Atom,” which is to be used on top of all the Object, Component, and Helper styles. A developer seeing this classname in the markup will understand that the class is very localized and specific.

‹prop› is the initials for the property name, and -‹val› is the initials for the property value. The optional -‹suffix› could stand for a media query or pseudo-class, such as :hover. The most common initials are listed below.

Global Values

Every CSS property has the three global values inherit, initial, and unset. In addition, a great many properties also have normal, none, auto, and a few other common values.

Fallbacks

Due to currently narrow, but increasing, support for initial, every class with -0 has a fallback, which corresponds to the CSS-specified initial value for that property. For example .-d-0 is defined as {display: inline; display: initial;} because inline is the CSS-specified initial value for display.

To that same end, every unset class has a fallback, which corresponds to one of the values inherit (if that property is inherited) or initial (if it is not).

Extensions

By default, all bangs work in all media types. Additionally, each bang supports the screen and print media queries. Even further, there are more sets of classes that provide support for additional media queries and hover/focus, and these are mentioned on a per-property basis below.

Trends

This table describes typical letter usage. The most frequent instances of the letter correspond with the properties and values described below. Note that this list is non-normative and non-comprehensive: these are not the only uses of the letters, and there may be exceptions. Warning: these abbreviations can change at any time (until Version 1.0.0).