+++
title = "[TRIAGE] CSS/styling approach for Wasm — plain CSS, CDN Tailwind, or Wasm-compatible crate?"
priority = 8
status = "done"
ticket_type = "task"
dependencies = []
+++

<context>
This is a triage decision ticket. It must be resolved before dependent implementation tickets can proceed.
</context>

<question>
CSS/styling approach for the Yew Wasm UI: plain CSS (separate .css file), CDN Tailwind (loaded in index.html), or a Wasm-compatible Rust styling crate?
</question>

<options>
1. **Plain CSS** — write a `style.css` file, include it in `index.html`. No build complexity. Simple and portable.
2. **CDN Tailwind** — add Tailwind CDN `<script>` to `index.html`. No build step needed. Larger page load; fine for small apps.
3. **Stylist or yew-style** — Rust crates for CSS-in-Wasm. More idiomatic but less documentation.
</options>

<decision>
**Plain CSS** — Option 1.

Rationale:
- CDN Tailwind's JIT scanner reads DOM/HTML for class names to generate utility CSS on-the-fly. In a Yew Wasm app, class names are Rust strings compiled into the Wasm binary — they are never present in the HTML that Tailwind's scanner reads. The result is a non-functional Tailwind build with no utility classes.
- Stylist/yew-style add a Wasm dependency, sparse documentation, and binary bloat for a 5-page app where co-location of styles provides no real benefit.
- Plain CSS + Trunk: Trunk natively bundles CSS via `<link data-trunk rel="css" href="src/bin/ui/style.css"/>` in `index.html`. Zero additional dependencies, no build complexity, easy maintainability.

Implementation:
- CSS file: `src/bin/ui/style.css` (Trunk discovers files relative to `index.html`)
- index.html link: `<link data-trunk rel="css" href="src/bin/ui/style.css"/>`
- Naming convention: BEM-style semantic names — `quote-card`, `quote-card__text`, `quote-card__author`, `page-browse`, etc.
- Yew usage: `class={"quote-card"}` or `classes!["quote-card", conditional]`
- Dedicated implementation ticket: 0fbdd5
</decision>

<resolution>
1. Research the options above and choose the best approach for this project.
2. Update ticket dc3d2b (Trunk.toml + index.html) and all UI component tickets with the chosen CSS class strategy.
3. Mark this ticket done with a note on the chosen approach in the body or a comment.
</resolution>

<commit>
`chore(quotesdb): resolve triage — css-styling-approach-plain-css`
</commit>