Tailwind e CSS tradizionale
Confronti lo stile utility-first con la scrittura di CSS semplice e BEM e impari quando ciascun approccio dà il meglio di sé.
Tailwind e CSS tradizionale è una lezione Tailwind CSS Academy gratuita su CoddyKit. Questa è la lezione 4 di 4. Puoi leggere la lezione completa qui gratuitamente — poi esercitati direttamente nel browser con un editor di codice integrato e un tutor IA disponibile 24/7. Fa parte del percorso di apprendimento Tailwind CSS Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso Tailwind CSS Academy include 4 lezioni in totale.
Il metodo tradizionale: CSS semantico
Il metodo tradizionale è il CSS semantico: nomi di classi descrittivi come .navbar o .card in un file separato, pensati per indicare lo scopo. Da questo approccio sono nati metodi come BEM.
/* Traditional CSS */
.hero-title {
font-size: 3rem;
font-weight: 800;
color: #111827;
letter-spacing: -0.025em;
margin-bottom: 1.5rem;
}
<h1 class="hero-title">Build Something Great</h1>Che cos'è BEM?
BEM significa Block, Element, Modifier: un Block come .card, un Element come .card__title e un Modifier come .card--featured. È chiaro, ma richiede disciplina.
<!-- BEM naming convention -->
<div class="card card--featured">
<img class="card__image" src="thumb.jpg" alt="" />
<h2 class="card__title">Featured Post</h2>
<p class="card__description">A short summary...</p>
<a class="card__link card__link--primary" href="#">Read More</a>
</div>La stessa card in Tailwind
Ecco la stessa card in Tailwind. Nessun file CSS: ogni scelta è visibile nell'HTML. rounded-xl shadow-md definisce la forma, mentre text-xl font-bold definisce il titolo.
<!-- Tailwind equivalent -->
<div class="rounded-xl shadow-md overflow-hidden bg-white border border-indigo-200">
<img class="w-full h-48 object-cover" src="thumb.jpg" alt="" />
<div class="p-6">
<h2 class="text-xl font-bold text-gray-900 mb-2">Featured Post</h2>
<p class="text-gray-500 text-sm mb-4">A short summary...</p>
<a class="text-indigo-600 font-semibold hover:underline" href="#">Read More</a>
</div>
</div>Il problema della specificity nel CSS tradizionale
Il CSS tradizionale presenta il problema della specificity: le regole competono per stabilire quale prevalga, portando a usare !important ovunque e a creare codice fragile. Le utility Tailwind restano prevedibili.
/* Specificity conflict example */
.sidebar .card .card__title { color: red; } /* specificity: 0,3,0 */
.featured-section .card__title { color: blue; } /* specificity: 0,2,0 */
/* Which color wins? Depends on file order AND specificity */
/* This becomes unmanageable at scale */La crescita del file CSS nel tempo
I file CSS semplici crescono senza fine, perché nessuno osa eliminare le vecchie regole. Tailwind rimuove le utility inutilizzate durante la build, così il CSS non accumula codice superfluo.
Passare da un file all'altro
Con il CSS classico deve continuare a passare dall'HTML al CSS per ogni modifica. Tailwind consente di restare nell'HTML, velocizzando notevolmente il flusso di lavoro.
<!-- With Tailwind: no CSS file to open -->
<button class="py-2 px-4 bg-green-500 text-white rounded hover:bg-green-600">
Submit
</button>
<!-- With traditional CSS: go find/create .submit-button in your CSS file -->
<button class="submit-button">Submit</button>Quando il CSS tradizionale resta la scelta migliore
A volte il CSS tradizionale resta la scelta migliore: per applicare stili a HTML di terze parti che non può modificare, per animazioni keyframe complesse o per un foglio di stile pubblico destinato ad altri sviluppatori.
/* Complex animation: better in CSS than utility classes */
@keyframes wave {
0%, 100% { transform: rotate(-10deg); }
50% { transform: rotate(10deg); }
}
.wave-animation {
animation: wave 1s ease-in-out infinite;
}Coerenza: scale contro valori liberi
Tailwind impone discretamente la coerenza. Invece di digitare manualmente padding da 13px o 17px, sceglie da una scala di 4px, così i design restano armoniosi per impostazione predefinita.
<!-- Tailwind spacing: always consistent multiples -->
<div class="p-4"> <!-- 16px -->
<div class="p-6"> <!-- 24px -->
<div class="p-8"> <!-- 32px -->
<!-- vs Traditional CSS: any value is valid -->
div { padding: 13px; } /* Why 13? Nobody knows. */Confronto delle prestazioni
Tutte quelle classi danneggiano le prestazioni? No: le classi ripetute si comprimono molto bene e il CSS di Tailwind è solitamente molto più piccolo di un foglio di stile non ottimizzato.
Inserimento nel team: Tailwind e CSS
Anche l'inserimento nel team è più semplice. Chiunque conosca la documentazione di Tailwind può leggere e modificare qualsiasi componente, perché i nomi delle classi hanno lo stesso significato in ogni progetto.
Scegliere l'approccio giusto
Quale approccio scegliere? Tailwind per le interfacce delle app e i design system sotto il suo controllo; CSS tradizionale per i temi o per l'HTML dei CMS. Molti progetti usano entrambi senza problemi.
Verifica rapida
Verifica rapida! Confronti mentalmente Tailwind e CSS. ⚖️
Riepilogo della lezione
Ottimo lavoro! Il CSS tradizionale definisce i nomi nei file, mentre Tailwind compone gli stili nell'HTML; BEM non risolve la crescita dei file e la scala impone coerenza. Prossimo argomento: tipografia.
Impara HTML con un tutor IA — gratis
Scrivi ed esegui vero codice nel tuo browser, ricevi aiuto istantaneo da un tutor IA disponibile 24/7, e riprendi da dove hai lasciato sul web o nell'app.
- Corsi
- 30
- Lezioni
- 120
Domande Frequenti
La lezione «Tailwind e CSS tradizionale» è gratuita?
Sì — il testo completo di «Tailwind e CSS tradizionale» è gratuito qui sul web. Per esercitarvi in modo interattivo (un editor di codice integrato e un tutor IA 24/7) e sbloccare il resto del corso Tailwind CSS Academy, passa a CoddyKit PRO. Il corso Tailwind CSS Academy include 4 lezioni in totale.
Cosa imparerò in «Tailwind e CSS tradizionale»?
Confronti lo stile utility-first con la scrittura di CSS semplice e BEM e impari quando ciascun approccio dà il meglio di sé. Eserciti Tailwind CSS Academy con codice pratico che esegui direttamente nel browser, e un tutor IA 24/7 risponde alle tue domande mentre lavori sulla lezione.
Ho bisogno di esperienza per iniziare Tailwind CSS Academy?
Non è richiesta alcuna esperienza precedente. Tailwind CSS Academy su CoddyKit è strutturato per principianti e studenti avanzati, quindi puoi iniziare da qui o dall'inizio e procedere al tuo ritmo. Questa è la lezione 4 di 4.
Quanto tempo richiede la lezione «Tailwind e CSS tradizionale»?
La maggior parte delle lezioni CoddyKit richiede circa 5–10 minuti. Ogni lezione è breve e interattiva, quindi fai progressi costanti e riprendi esattamente da dove hai lasciato su web e app.
Posso scrivere ed eseguire codice in questa lezione Tailwind CSS Academy?
Sì. Ogni lezione Tailwind CSS Academy include un editor di codice integrato, quindi scrivi ed esegui codice reale direttamente nel tuo browser e ricevi feedback istantaneo dall'IA — nessuna configurazione locale necessaria.
Tutte le lezioni di questo corso
- CSS utility-first spiegato
- Installazione e configurazione di Tailwind
- La prima pagina con Tailwind
- Tailwind e CSS tradizionale