NibCSS

Custom shortcuts

Add your own shorthand names, including shorthands that set several properties at once.

1 min readv1

Recipes name a group of rules. Shortcuts name a property — they take a value.

TypeScript
export default defineConfig({
  shortcuts: {
    size: "width height",           // size=40px → width: 40px; height: 40px
    "inset-x": "left right",          // inset-x=0
    tap: "-webkit-tap-highlight-color",
    lc: "-webkit-line-clamp",
  },
});
HTML
<img nib="size=48px; bdrd=999px; objf=cover">
CSS
.nib-1oznkvj { width: 48px; height: 48px }

Your shortcuts are merged over the built-ins, so you can also rename or redefine a built-in. They are included in "did you mean?" suggestions.

Use a shortcut when

Use a recipe when

the value changes per use (size=32px, size=48px)

the whole set of rules is fixed

you want a shorter name for a property

you want a named UI concept

Next steps#