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.
abbreviation | value |
---|---|
-i | inherit (global) |
-0 | initial (global)∗ |
-u | unset (global) |
-n | normal or none , if applicable† |
-a | auto , if applicable |
-z | 0 , if applicable |
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.
suffix | query/pseudo | property support |
---|---|---|
no suffix | no media query (same as @media all ) or pseudo-class | all properties |
-s | @media screen (screen) | all properties except: |
-p | @media print (print) | all properties except: |
-sK | @media screen and (min-width: 30em) (small+) | all properties except: |
-sM | @media screen and (min-width: 45em) (medium+) | all properties except: |
-sG | @media screen and (min-width: 60em) (large+) | all properties except: |
-sT | @media screen and (min-width: 75em) (xlarge+) | all properties except: |
-sP | @media screen and (min-width: 90em) (xxlarge+) | all properties except: |
-nK | @media not all and (min-width: 30em) (xsmall-) | all properties except: |
-nM | @media not all and (min-width: 45em) (small-) | all properties except: |
-nG | @media not all and (min-width: 60em) (medium-) | all properties except: |
-nT | @media not all and (min-width: 75em) (large-) | all properties except: |
-nP | @media not all and (min-width: 90em) (xlarge-) | all properties except: |
-h | :hover,:focus |
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).
Letter | Typical Usage | Example Properties | Example Values |
---|---|---|---|
0 | initial | none | global value |
a | all | [padding, margin](-all) | none |
a | auto | none | [left, right, top, bottom, z-index, [justify,align]-[content,items,self], flex, width, margin, column-[count,width], background-size, (box-)overflow]: auto |
b | bottom | bottom | margin, padding]-bottom | background-position: bottom; vertical-align: [text-]bottom |
b | background | background-[image, position, size, repeat, attachment, origin, clip, color] | none |
c | color | [border-, background-]color | [border-, background-]color: currentColor |
c | content | [justify, align]-content | flex: content; [box-sizing, background-[origin, clip]]: content(-box) |
c | column | grid-template-columns, grid-column-gap, column-[width, count, gap, rule-[width,style,color], fill, span] | flex-direction: column[-reverse] |
c | center | none | [[justify, align]-[content,items,self], text-align, background-position]: center; vertical-align: middle (center) |
f | font | font-[style, variant, weight, size, family] | none |
f | fixed | none | [position, background-attachment]: fixed |
g | grid | grid-template-[rows, columns], grid-[row, column]-gap | display: grid (gd) |
h | 0.5 (half) | none | [flex,opacity]: 0.5; [margin,padding]-vertical: 0.5vru; [margin,padding]-horizontal: 0.5rem |
h | hidden | none | [overflow,border-style,visibility]: hidden |
i | inherit | none | global value |
k | box | box-[sizing, shadow], (box-)overflow | none |
k | clip | background-clip | text-overflow: clip |
l | left | left, [margin, padding]-left | [float, clear, text-align, background-position]: left |
m | margin | margin | none |
n | normal | none | [font-[style, variant, weight], line-height, letter-spacing, word-spacing, white-space, overflow-wrap]: normal |
n | none | none | [display, float, clear, border-style, background-image, box-shadow, text-[transform,decoration,shadow], quotes, list-style-[type,image]]: none |
o | overflow | [(box-), text-]overflow, overflow-wrap | none |
p | padding | padding | background-[origin, clip]: padding(-box) |
q | 0.25 (quarter) | none | [margin,padding]-vertical: 0.25vru; [margin,padding]-horizontal: 0.25rem |
r | border | border-[style, color] | [box-sizing, background-[origin, clip]]: border(-box) |
r | right | right, [margin, padding]-right | [float, clear, text-align, background-position]: right |
c | row | grid-template-rows, grid-row-gap | flex-direction: row[-reverse] |
t | top | top, [margin, padding]-top | background-position: top; vertical-align: [text-]top |
t | text | text-[align, indent, transform, decoration, shadow, overflow] | vertical-align: text-[top, bottom] |
u | unset | none | global value |
w | width | width, column-width | none |
w | wrap | [flex, overflow]-wrap | flex-wrap: [nowrap, wrap, wrap-reverse]; white-space: [nowrap, pre-wrap] |
x | flex | flex[-direction, -wrap] | flex-[start, end] |
z | size | box-sizing, font-size, background-size | none |
z | 0 | none | [left, right, top, bottom, z-index, order, width, margin, padding, font-size, line-height, letter-spacing, word-spacing, text-indent, opacity]: 0 |
? | block | any logical properties | display: block; background-position: block-[start, end] |
? | inline | any logical properties | display: inline; background-position: inline-[start, end] |
? | start | any logical properties | [text-align, float]: start; [justify,align]-[content,items,self]: [flex-]start; background-position: [inline-,block-]start |
? | end | any logical properties | [text-align, float]: end; [justify,align]-[content,items,self]: [flex-]end; background-position: [inline-,block-]end |