Pico rewards choosing the right element before reaching for a class. Your mental model should start with HTML landmarks and semantics, then add Pico’s optional classes only when layout or variants require them.
When to use elements vs classes
- Primary action →
<button>(not a clickablediv) - Grouped page content →
article,section,main - Centered max-width band →
class="container"onmain(or classless mode wheremainalone is the container) - Multi-column row →
class="grid"wrapping direct children - Secondary or destructive actions →
class="secondary",outline, orcontrastonbutton
If you default to div soup, Pico cannot help much—you are fighting the framework. Fix the HTML first; classes are seasoning, not the meal.
Important interview questions and answers
- Q: Does semantic-first mean no classes ever?
A: No. Pico ships purposeful classes for containers, grids, and button variants—use them when semantics alone cannot express layout. - Q: Why is a real
buttonbetter thandiv role="button"with Pico?
A: Pico styles native controls with keyboard focus, disabled states, and form integration built in; fake buttons need duplicated behavior and often miss accessibility defaults.
Self-check
- Give an example where the element choice matters more than any Pico class.
- When would you add
class="grid"instead of moresectionwrappers?
Interview prep
- Pico vs Tailwind?
Pico styles elements; Tailwind composes utilities. Pico reduces class noise; Tailwind offers fine-grained control.