Panda-Intro.md

/* Non-atomic */

.css-Box {
  background: red;
  font-size: 10px;
}

.css-Tab {
  background: red;
  font-size: 16px;
}

/* Atomic */

.css-bg {
  background: red;
}

.css-fs-sm {
  font-size: 10px;
}

.css-fs-lg {
  font-size: 16px;
}

const Box = styled.div`
  background: red;
  font-size: 10px;
  color: ${(props) => props.color};
`;

<Box color="#fff" />;

const Box2 = styled.div`
  background: red;
  font-size: 10.2px;
`;

<div className="css-Box" />
<div className="css-bg css-fs-sm css-fs-lg" />

What does 'runtime' mean?

• design tokens
• convert interpolations
• classname <---- 10%
• generate stylesheet <---- 90%
• (runtime) insert into the document
• (zero runtime) generate css file

Css-in-JS Frameworks

• Zero runtime (bundler integration) aka Build time
  • babel, webpack, vite, rollup, esbuild, bun, turbopack, swc, gatsby, typescript
  • Abstract syntax tree (AST)
  • No interpolations
• Full Runtime
  • emotion, styled-components (styles only)
  • chakra, material, mantine

Utility Frameworks

• Tailwind (build, runtime solutions)

• SaSS, Less

• random vs readable classnames

• build time vs runtime

• bundler plugins vs cli

• atomic vs non-atomic vs both

• ahead-of-time AOT 30MB vs just-in-time JIT 10KB

• design tokens vs none

• documentation

• css spec vs none

  • token format
  • layers

• functions vs style props vs direct classname

<div className={css({ bg: "red.200" })} />
<Box mt={20} mt={400} />
<div className="bg-red-200 bg-teal-400 {@media sm}:hover-bg-red-200"/>