Tailwind kontra traditionel CSS
Sammenlign utility-first-styling med almindelig CSS og BEM, og lær, hvornår hver tilgang er bedst.
Tailwind kontra traditionel CSS er en gratis Tailwind CSS Academy-lektion på CoddyKit. Dette er lektion 4 af 4. Du kan læse hele lektionen gratis nedenfor — og derefter øve dig praktisk i browseren med en indbygget kodeeditor og en AI-vejleder, der er tilgængelig døgnet rundt. Den er en del af læringsforløbet i Tailwind CSS Academy, og dine fremskridt synkroniseres på tværs af nettet og CoddyKit-appen. Tailwind CSS Academy-kurset indeholder 4 lektioner i alt.
Den gamle måde: Semantisk CSS
Den gamle måde er semantisk CSS: beskrivende klassenavne som .navbar eller .card i en separat fil, der skal beskrive formålet. Metoder som BEM udsprang af dette.
/* 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>Hvad er BEM?
BEM betyder Block, Element, Modifier: en Block som .card, et Element som .card__title og en Modifier som .card--featured. Det er tydeligt, men kræver disciplin.
<!-- 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>Det samme kort i Tailwind
Her er det samme kort i Tailwind. Slet ingen CSS-fil — alle valg fremgår af HTML: rounded-xl shadow-md til formen og text-xl font-bold til titlen.
<!-- 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>Specificitetsproblemet i traditionel CSS
Traditionel CSS giver hovedpine på grund af specificitet: regler kæmper om, hvilken der vinder, hvilket fører til !important overalt og skrøbelig kode. Tailwinds hjælpeklasser er forudsigelige.
/* 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 */CSS-filens vækst over tid
Almindelige CSS-filer vokser for evigt, fordi ingen tør slette gamle regler. Tailwind fjerner ubrugte hjælpeklasser ved build, så din CSS aldrig hober sig op med overflødig bagage.
Skift mellem filer
Med klassisk CSS bliver du ved med at skifte mellem HTML og CSS for hver lille ændring. Tailwind holder dig i HTML, hvilket gør din arbejdsgang meget hurtigere.
<!-- 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>Hvornår traditionel CSS stadig vinder
Nogle gange vinder traditionel CSS stadig: ved styling af tredjeparts-HTML, som du ikke kan redigere, komplekse keyframe-animationer eller et offentligt stylesheet til andre udviklere.
/* 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;
}Ensartethed: Skalaer sammenlignet med frie værdier
Tailwind håndhæver stille og roligt ensartethed. I stedet for selv at skrive 13 px eller 17 px indvendig afstand vælger du fra en skala på 4 px, så designet som standard forbliver harmonisk.
<!-- 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. */Sammenligning af ydeevne
Skader alle de klasser ydeevnen? Nej — gentagne klasser komprimeres fremragende, og Tailwind CSS er som regel langt mindre end et uoptimeret stylesheet.
Introduktion af teamet: Tailwind sammenlignet med CSS
Introduktion er også nemmere. Alle, der kender Tailwind-dokumentationen, kan læse og redigere enhver komponent, fordi klassenavne betyder det samme i alle projekter.
Valg af den rigtige tilgang
Så hvad skal du vælge? Tailwind til appbrugerflader og designsystemer, du selv kontrollerer, og traditionel CSS til tematisering eller CMS-HTML. Mange projekter bruger gerne begge dele.
Hurtigt tjek
Hurtigt tjek! Sammenlign Tailwind og CSS i tankerne. ⚖️
Opsummering af lektionen
Godt arbejde! Traditionel CSS navngiver ting i filer, mens Tailwind kombinerer dem i HTML. BEM løser ikke filernes vækst, og skalaen håndhæver ensartethed. Næste emne: typografi.
Lær HTML med en AI-underviser — gratis
Skriv og kør rigtig kode i din browser, få øjeblikkelig hjælp fra en AI-underviser døgnet rundt, og fortsæt, hvor du slap, på web eller i appen.
- Kurser
- 30
- Lektioner
- 120
Ofte stillede spørgsmål
Er lektionen “Tailwind kontra traditionel CSS” gratis?
Ja — hele teksten til “Tailwind kontra traditionel CSS” kan læses gratis her på nettet. Hvis du vil øve dig interaktivt med en indbygget kodeeditor og en AI-vejleder døgnet rundt og få adgang til resten af Tailwind CSS Academy-kurset, skal du opgradere til CoddyKit PRO. Tailwind CSS Academy-kurset indeholder 4 lektioner i alt.
Hvad lærer jeg i “Tailwind kontra traditionel CSS”?
Sammenlign utility-first-styling med almindelig CSS og BEM, og lær, hvornår hver tilgang er bedst. Du øver dig i Tailwind CSS Academy med praktisk kode, som du kører direkte i browseren, og en AI-vejleder døgnet rundt besvarer dine spørgsmål, mens du arbejder dig gennem lektionen.
Skal jeg have erfaring for at begynde på Tailwind CSS Academy?
Der kræves ingen tidligere erfaring. Tailwind CSS Academy på CoddyKit er tilrettelagt for både begyndere og øvede, så du kan starte her eller fra begyndelsen og lære i dit eget tempo. Dette er lektion 4 af 4.
Hvor lang tid tager lektionen “Tailwind kontra traditionel CSS”?
De fleste CoddyKit-lektioner tager cirka 5–10 minutter. Hver lektion er kort og interaktiv, så du gør løbende fremskridt og kan fortsætte, hvor du slap – på både web og app.
Kan jeg skrive og køre kode i denne Tailwind CSS Academy-lektion?
Ja. Alle Tailwind CSS Academy-lektioner har en indbygget kodeeditor, så du kan skrive og køre rigtig kode direkte i din browser og få øjeblikkelig feedback fra AI – uden lokal opsætning.
Alle lektioner i dette kursus
- Utility-first CSS forklaret
- Installation og konfiguration af Tailwind
- Din første Tailwind-side
- Tailwind kontra traditionel CSS