Att arbeta med Cascading Style Sheets (CSS) kan vara svårt för nybörjare. Med hjälp av CSS kan du strukturera, uppdatera och underhålla utseendet på din applikation. Men språket kräver färdigheter för att manipulera HTML-sidor för att få önskad layout.
Här är några misstag att undvika när du arbetar med CSS. De kommer att spara tid och underlätta din utvecklingsprocess.
1. Använda px för teckensnittsstorlekar
Enheten "px" representerar pixlar. Du kan använda den för att uttrycka olika längder på en webbsida, från bredden och höjden på ett element till dess teckenstorlek.
Men px låser din design till en fast storlek för alla skärmar. En bild i px kan ta upp hela bredden av en skärm, och bara en liten del av en annan. Om du vill ha ett mer proportionellt element, använd relativa mått såsom rem, eller procentsatser (%).
Det bästa relativa måttet att använda är rem. Denna enhet hänvisar till teckenstorleken på rotelementet som en läsare ofta kan ställa in i sina webbläsarinställningar. Du kan se effekten av px och rem på ett element i följande exempel:
html>
<HTML>
<huvud>huvud>
<kropp>
<h1>Det här är rubrik 1h1>
<h2>Det här är rubrik 2h2>
<sid>Detta är ett stycke.sid>
<sid>Detta är ett annat stycke.sid>
kropp>
html>Du kan formatera teckenstorlekarna i det här dokumentet med hjälp av px-enheter med följande CSS:
h1 {
textstorlek: 50px;
}h2 {
textstorlek: 30px;
}
sid {
textstorlek: 15px;
}
Den resulterande sidan ser acceptabel ut när du visar den på en stor skärm:
Men det ser inte presentabelt ut på en mindre skärm, som på en telefon:
Applicera sedan rem på samma innehåll. Ange en bastypsnittsstorlek på html-elementet och storleksanpassa andra element med hjälp av rems, som illustreras nedan:
html {
textstorlek: 16px;
}h1 {
textstorlek: 3rem;
}h2 {
textstorlek: 2rem;
}
sid {
textstorlek: 1rem;
}
Lägg märke till skillnaden mellan stora och små skärmar. Med rem skalar innehållet bättre oavsett skärmstorlek. Elementen kommer aldrig att överstiga den inställda skärmstorleken. Det är därför det är bättre att använda relativa längder snarare än pixlar.
På en skrivbordsskärm:
På en liten skärm är text i rem-enheter fortfarande läsbar:
2. Lägg alla dina stilar i en fil
Att använda en CSS-fil för ett stort projekt kan skapa en enda röra. Du kommer att ha en fil med långa rader kod som kommer att vara förvirrande när du uppdaterar. Försök att använda olika filer för CSS-formatmallar för olika komponenter.
Du kan till exempel ha olika filer för navigering, sidhuvud och sidfot. Och en annan för sektioner på kroppen. Att separera dina CSS-filer hjälper till att strukturera din app och uppmuntra kodanvändbarhet.
3. Använder Inline CSS på ett olämpligt sätt
I vanilla CSS kan du skriva stilar på HTML-sidorna precis som på CSS-ramverk som Bootstrap och TailwindCSS. Inline CSS låter dig tillämpa en unik stil på ett HTML-element. Den använder stilattributet för HTML-elementet.
Följande kod är ett exempel på inline CSS.
<h2stil="färg: grön;">Detta är en grön rubrikh2>
<sidstil="färgen röd;">Detta är ett rött stycke.sid>
Texten kommer att se ut så här:
Men HTML med enbart inline CSS kan vara rörigt. Eftersom det inte finns någon annan plats för CSS, finns all CSS i samma fil som HTML. Det kommer att se trångt ut. Det är svårt att redigera en sådan fil, speciellt om det inte är din kod.
Med inline CSS måste du också skriva kod för varje element. Detta ökar upprepningen och minskar återanvändningen av kod. Använd alltid en kombination av externa stilmallar och inbyggd CSS för att utforma dina webbsidor.
4. Överanvändning !viktigt
I CSS är !Viktig regel lägger större vikt till en fastighet/värde. Den åsidosätter andra stilregler för den egenskapen på det elementet.
Du bör bara ha ett fåtal !Viktig regler i din kod. Använd den endast när det behövs. Det är ingen idé att skriva kod och sedan åsidosätta den. Din kod kommer att se rörig ut och orsaka problem när den körs på vissa enheter.
html>
<html>
<huvud>huvud>
<kropp>
<sid> Jag är orange sid>
<sidklass="min klass"> Jag är grön sid>
<sidid="mitt ID"> Jag är blå. sid>
kropp>
html>CSS:
#mitt ID {
bakgrundsfärg: blå;
}.min klass {
bakgrundsfärg: grön;
}
sid {
bakgrundsfärg: orange !Viktig;
}
Resultatet är såhär:
5. Följer inte namnkonventioner
CSS har namnkonventioner som vägleder utvecklare om hur man skriver standardkod. Detta är viktigt om du hamnar felsöka CSS-filen vid ett framtida datum.
En av dessa standarder inkluderar användning av bindestreck för att separera grupperade ord. En annan är att namnge en väljare efter vad den gör. Så den som tittar på det behöver inte gissa. Det gör det också lättare att läsa, underhålla och dela kod. Till exempel:
Istället för det här:
.bild1 { marginal-vänster: 3%; }Skriv så här:
.pojke-bild { marginal-vänster: 3%; }När du tittar på stilarket vet du exakt vilken bild koden är till för. Googles HTML/CSS-stilguide listar många fler konventioner som varje utvecklare borde känna till.
Att skriva kommentarer är den mest undervärderade färdigheten i programmering. Många glömmer att skriva kommentarer för att förklara sin kod. Men det sparar tid. Kommentarer är viktiga för att läsa och underhålla kod.
Eftersom CSS är löst strukturerad och vem som helst kan utveckla sina egna konventioner, är kommentarer viktiga. Att använda välstrukturerade kommentarer för att förklara din stilmall är god praxis. Du kan skriva kommentarer som förklarar delar av koden och vad de gör.
/* videoelement behöver utrymme för att andas */
.video {
marginal-top: 2em;
}
/* stylar hjältesektionen */
.hälsning {
marginal-top: 1em;
}
7. Misslyckas med att designa i förväg
Många människor gör det, men det är ett allvarligt misstag att börja koda utan en plan. CSS avgör hur strukturen på din front-end ser ut. Designen säger mycket om dina programmeringskunskaper.
En design för din webbplats förtydligar din vision och de resurser som behövs för att ta dig dit. Ha en mental bild av ditt projekt. Designa den sedan på papper eller använd en designverktygslåda som Canva att visualisera vad du vill.
När du har en komplett bild av projektet, samla alla dina resurser och börja koda. Det kommer att spara tid och redundans.
Varför du bör överväga dessa rekommendationer
Om du utvecklar applikationer på webben kommer du att använda CSS. Att arbeta bra med CSS kräver övning och att följa standardkonventionerna. Konventioner gör inte bara din kod läsbar utan också underhållbar.
Att skriva standardiserad kod kommer att spara tid och ansträngning. Den tid du skulle ha lagt ner på att formatera front-end kan du lägga på mer komplexa funktioner. Det säkerställer också att du kan återanvända koden och dela den med andra. Skriv bättre kod genom att följa de uppsatta konventionerna och bli en bättre utvecklare.
