NibCSS

Migrating from plain CSS or SCSS

Move a stylesheet into attributes step by step, keeping what should stay in CSS.

1 min readv1

What to move#

Keep in CSS

Move to nib

resets, @font-face, @keyframes

component styles

complex selectors (.a + .b, :has())

per-element spacing and layout

third-party overrides

states: hover, focus, disabled

global typography for Markdown content

responsive variants

Before and after#

CSS
.alert { display: flex; gap: 12px; padding: 16px; border-radius: 10px;
  background: #fef2f2; color: #991b1b; border: 1px solid #fecaca; }
.alert:hover { border-color: #f87171; }
@media (min-width: 768px) { .alert { padding: 20px 24px; } }

SCSS variables and mixins#

Variables become tokens; mixins become recipes that other recipes include.

Next steps#