NibCSS

Raw properties & CSS variables

Use any CSS property directly, set custom properties, and understand when a name is rejected.

1 min readv1

NibCSS does not limit you to its shorthand list. If a name is a real CSS property, it is passed through.

Any real property#

HTML
<input value="Caret and accent" nib="caret-color=#e11d48; accent-color=#e11d48; p=8px 12px; bdrd=8px; bd=1px solid #cbd5e1">

Custom properties (CSS variables)#

Names starting with -- are always accepted. Set a variable on a parent and read it anywhere below:

HTML
One Two 
<div nib="--accent=#0891b2; d=flex; g=10px">
  <span nib="p=6px 12px; bdrd=999px; bgc=var(--accent); cl=#fff">One</span>
  <span nib="p=6px 12px; bdrd=999px; bd=2px solid var(--accent); cl=var(--accent)">Two</span>
</div>

This is the idiomatic way to theme a subtree, or to feed a continuously changing value from JavaScript without generating a new rule each time:

TSX
<div nib="tf=translateX(var(--x))" style={{ "--x": `${x}px` }} />

Vendor-prefixed properties#

HTML
<p nib="-webkit-line-clamp=3; d=-webkit-box; -webkit-box-orient=vertical; ovf=hidden">

When a name is rejected#

A name that is neither a shorthand nor a known CSS property produces no CSS and a warning:

Text
Unknown utility "trf" — did you mean "t", "tf", "trn"?

This is deliberate — a typo never ships as a broken declaration.

Invalid values#

Values are checked where the set of valid values is finite (position, display, overflow, text-align, flex/grid alignment, border-style, numeric properties like opacity and z-index):

Text
"red" is not a valid value for "opacity" — opc is short for opacity — accepts 0.7, 0, .5, 10%, 75%

By default the declaration is still emitted (the browser ignores it), so a false alarm never breaks a page. With strict: true it is dropped instead. Lengths, colours and functions are never second-guessed.

Next steps#