You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
50 lines
2.4 KiB
Markdown
50 lines
2.4 KiB
Markdown
---
|
|
# quotesdb-9lxc
|
|
title: '[TRIAGE] CSS/styling approach for Wasm — plain CSS, CDN Tailwind, or Wasm-compatible crate?'
|
|
status: completed
|
|
type: task
|
|
priority: critical
|
|
created_at: 2026-03-10T23:32:07Z
|
|
updated_at: 2026-03-10T23:32:07Z
|
|
---
|
|
|
|
<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>
|