Botons vs Divs
Utilitzeu <button>, no <div onClick>. El <button> és accessible i funciona abans que Qwik es desperti.
frontend-development14 min read
HTML i CSS Moderns per a Frameworks Resumibles
Els frameworks resumibles (com Qwik) canvien la manera de carregar el JavaScript, però l'HTML i el CSS continuen sent la base. Apreneu a optimitzar l'estructura del DOM, utilitzar CSS-in-JS vs CSS Modules i evitar el layout shift en aplicacions d'hidratació parcial.
By Frontend Engineering Team
Què és la Resumibilitat?
A diferència de la hidratació, que re-executa tot el JS al navegador, la resumibilitat permet continuar l'execució on el servidor ho va deixar. Això significa que l'HTML inicial és crític.
HTML Semàntic: Més Important que Mai
Com que el JS es carrega tard (o mai), els botons, enllaços i formularis han de funcionar sense ell tant com sigui possible.
Enllaços Reals
Utilitzeu <a href>, no enrutament per JS per defecte.
Estratègies CSS per a Resumibilitat
L'objectiu és evitar el 'Flash of Unstyled Content' (FOUC) i el 'Cumulative Layout Shift' (CLS) mentre es carrega el contingut dinàmic.
| Mètode | Compatibilitat Resumible | Notes |
|---|---|---|
| CSS Global | Alta | Fàcil, però risc de conflictes. Bo per a resets. |
| CSS Modules | Molt Alta | L'estàndard per a Qwik/Astro. Scoped i eficient. |
| CSS-in-JS (Runtime) | Baixa | Eviteu llibreries que injecten estils amb JS en temps d'execució (ex: styled-components clàssic). |
| Tailwind CSS | Excel·lent | Zero runtime. Classes estàtiques a l'HTML. |
Prevenir el Layout Shift
En frameworks que carreguen components sota demanda, és fàcil causar salts. Reserveu espai per a tot.
- **aspect-ratio:** Utilitzeu-ho per a imatges i vídeos.
- **min-height:** Reserveu espai per a components que es carreguen mandrosament (lazy).
- **content-visibility:** Propietat CSS moderna per millorar el rendiment de renderitzat.
Conclusió
La resumibilitat retorna el protagonisme a l'HTML i CSS. Escriviu codi estàndard i robust, i el vostre framework modern volarà.
Prerequisites
- Coneixement avançat d'HTML5 i CSS3
- Familiaritat amb el concepte d'hidratació
- Experiència amb un framework de components
Related Articles
Frameworks UI Moderns: Comparativa Completa
React, Vue, Angular, Svelte, Qwik, Solid... quina triar el 2025?
Read more →Guia de Selecció de Pila de Desenvolupament Moderna
Deixeu de triar tecnologia per moda. Un marc per seleccionar el vostre stack (Frontend, Backend, BBDD) basat en el vostre cas d'ús.
Read more →Arquitectura d'Illes Inline: Rendiment Sense Construcció a Escala
Com els components d'illa pre-compilats eliminen els passos de construcció, redueixen els costos en un 70% i ofereixen temps de càrrega 2-3 vegades més ràpids en comparació amb Next.js i Fresh
Read more →Modernitzeu el Vostre Frontend
Auditem el vostre codi frontend per assegurar que està preparat per a la pròxima generació de frameworks.