HTML CSS — Cheat Sheet

Tag: html, css, frontend, webdev, layout

Livello: intermedio

TL;DR: Struttura semantica, posizionamento e styling base. Focus su Flexbox, Grid, specificità CSS e accessibilità.

Concetti chiave

L'HTML semantico migliora l'accessibilità e la SEO (usare <nav>, <article>, <section>, non solo <div>).

Il Box Model definisce le dimensioni tramite content, padding, border e margin.

La proprietà box-sizing: border-box include padding e border nella larghezza e altezza totali dell'elemento.

Flexbox è ideale per layout monodimensionali, distribuendo spazio lungo righe o colonne.

CSS Grid è progettato specificamente per gestire layout bidimensionali complessi.

La specificità CSS si calcola a cascata: stili inline > ID > classi/attributi/pseudo-classi > tag/pseudo-elementi.

Le pseudo-classi (es. :hover, :nth-child, :focus) selezionano stati o posizioni specifiche nel DOM.

Le media query (@media) sono la base del responsive design per adattare il layout al viewport.

Domande tipiche e risposte pronte

Q: Qual è la differenza tra display: none e visibility: hidden?R: display: none rimuove l'elemento dal flow della pagina liberandone lo spazio, mentre visibility: hidden lo rende invisibile ma ne preserva l'ingombro.

Q: Come centri verticalmente e orizzontalmente un div?R: Di solito uso Flexbox sul container padre impostando display: flex, justify-content: center e align-items: center.

Q: Come funziona il posizionamento absolute?R: Rimuove l'elemento dal document flow standard. Lo posiziona rispetto al primo genitore con posizionamento diverso da static.

Q: A cosa serve l'attributo alt nelle immagini?R: Fornisce un testo alternativo letto dagli screen reader per l'accessibilità o mostrato se l'immagine non si carica.

Insidie e errori comuni

Dimenticare il doctype <!DOCTYPE html> all'inizio del documento, causando il quirk mode nei browser vecchi.

Abusare di !important nei CSS, distruggendo la cascata naturale e rendendo la manutenzione impossibile.

Ignorare il "margin collapse" (collasso dei margini) verticale tra elementi di blocco adiacenti nel normal flow.

Usare tag generici come <div> con eventi click invece del tag nativo <button>, rovinando l'accessibilità da tastiera.

Snippet e comandi

/* Reset essenziale */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* Centratura perfetta con Flexbox */
.center-container {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
}

/* CSS Grid responsivo senza media query (RAM) */
.grid-layout {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1rem;
}