NibCSS

Syntax

The complete grammar of a nib attribute: rules, separators, values, modifiers, recipes and !important.

2 min readv1

An attribute is a list of rules separated by ;. Every rule has the same shape:

Text
[breakpoint:][dark:][pseudo:]…  name  [=value]  [!important]

Part

Required

Examples

Modifiers

no

md:, dark:, hover:, before: — any order, chainable

Name

yes

a shorthand (bgc), a CSS property (caret-color), a custom property (--x) or a recipe (btn)

=value

for properties

any valid CSS value; omitted for recipes

!important

no

appended to the value

Rules and separators#

You write

Meaning

p=16px; m=0

two rules

p=16px;m=0

the same — whitespace around ; is ignored

p=16px;

a trailing ; is fine

cnt='a\; b'

\; is a literal semicolon inside a value

Line breaks count as whitespace, so long attributes can be wrapped:

HTML
<div nib="d=grid; g=16px;
          md:gtc=1fr 1fr;
          lg:gtc=repeat(3, 1fr)">

Values#

The value is everything after the first =, so it may contain :, = and spaces:

HTML
<div nib="bgi=url(https://cdn.example.com/bg.png?w=1200&q=80)">
<div nib="ts=opacity .2s ease, transform .2s ease">
<div nib="gtc=repeat(auto-fit, minmax(200px, 1fr))">

Values are passed to CSS unchanged — except $tokens, which are resolved first: bd=1px solid $color.border → border: 1px solid #e2e8f0.

Names#

A name is resolved in this order:

  1. Your shortcuts from the config.
  2. Built-in shorthands (~290): bgc → background-color.
  3. Real CSS properties, passed through: caret-color, scroll-snap-type, --my-var.
  4. Otherwise: an unknown utility warning with suggestions, and no CSS.

A name without = is a recipe reference instead (step 4 then reports an unknown utility or component).

Modifiers#

Everything before the last : of the name part is a modifier:

  • a breakpoint — md:, lg:, or your own
  • dark:
  • a pseudo-class — hover:, focus-visible:, disabled:, first-child:, …
  • a pseudo-element — before:, after:, placeholder:, selection:, …

They chain: md:dark:hover:bgc=#111. Order does not matter. See Modifiers.

!important#

HTML
<p nib="cl=#dc2626!important">
CSS
.nib-1l671gr { color: #dc2626 !important }

Where attributes are read#

Syntax

Where

nib="…"

any element, any template language

data-nib="…"

when a tool strips unknown attributes (some CMSs, HTML sanitisers)

useNib("…") / v-nib / use:nib / [nib]

dynamic values in frameworks

Next steps#