Home

SafiCSS

Tiny runtime CSS-in-JS for plain HTML. You write your styles as a JavaScript object, call one function, and it styles the element. No build step, no framework. Drop it in any HTML file over a CDN, or install it from npm. It reaches all of CSS: hover, media queries, and keyframes, not only inline styles.

import { css } from "saficss";

document.getElementById("box").className = css({
  background: "#444",
  color: "#fff",
  padding: 16,
  "&:hover": { background: "#666" },
  "@media (max-width: 600px)": { padding: 8 },
});

css() turns the object into real CSS, generates a class name, injects the rules into one <style> tag, and hands back the class. The same object always gets the same class, so nothing is duplicated. Because it injects a class instead of an inline style string, pseudo-classes, media queries, and animations all work.

Pages

• Getting Started: install from npm or a CDN.
• API Reference: css, keyframes, injectGlobal, setVars.
• TypeScript and Linting: autocomplete and typo errors, the way React types styles.
• Examples: recipes you can copy.
• Limitations: what it does not do yet.

Why it exists

Inline styles alone can't do :hover, media queries, or animations. To cover all of CSS, SafiCSS generates a class and injects a stylesheet behind the scenes, the same trick goober and Emotion use. It stays one small script, works over a CDN, and runs in a plain HTML file.

• Zero runtime dependencies
• Ships TypeScript types, so your editor autocompletes property names and flags bad values
• About 1.3 KB gzipped
• Works from npm and a CDN, as an ES module or a plain <script> global