How Pico works under the hood

Pico layers a normalize-style baseline, element rules for semantic tags, and a small optional class API—delivered as one compiled stylesheet with no runtime JavaScript from the framework itself.

What loads in the browser

1. CSS bundle — typography scale, form controls, tables, nav, and theme variables (light/dark)
2. Your markup — meaningful HTML structure; Pico matches selectors like article, input[type="submit"], and table
3. Optional classes — container, grid, button modifiers—only where element defaults are not enough

The playground links Pico 2 from jsDelivr for convenience. Production apps can also compile from Sass to tune CSS variables—similar in spirit to theming Bootstrap from source, but with a far smaller surface area.

Classless variant

Pico also publishes pico.classless.min.css, where main, header, and footer act as centered containers without a container class. This track uses the default build so you learn both patterns.

Important interview questions and answers

1. Q: Why is Pico’s bundle small compared to Bootstrap or Tailwind?
   A: It does not ship a full grid system with breakpoints, dozens of components, or thousands of utilities—mostly element selectors and a few layout helpers.
2. Q: CDN vs npm?
   A: CDN suits lessons and prototypes; npm + Sass lets you override design tokens and pick classless vs classful builds in CI.
3. Q: How does dark mode work in Pico 2?
   A: Set data-theme="dark" on html (or rely on prefers-color-scheme when configured); CSS variables swap palette values globally.

Self-check

1. What does Pico style without any class attribute on the element?
2. When might you compile Pico from Sass instead of linking CDN CSS?