At arbejde med Cascading Style Sheets (CSS) kan være svært for begyndere. Ved hjælp af CSS kan du strukturere, opdatere og vedligeholde udseendet af din applikation. Men sproget kræver færdigheder til at manipulere HTML-sider for at få det ønskede layout.
Her er nogle fejl, du skal undgå, når du arbejder med CSS. De vil spare dig tid og lette din udviklingsproces.
1. Brug af px til skriftstørrelser
"px"-enheden repræsenterer pixels. Du kan bruge det til at udtrykke forskellige længder på en webside, fra bredden og højden af et element til dets skriftstørrelse.
Dog låser px dit design til en fast størrelse for alle skærme. Et billede i px kan fylde hele bredden af en skærm og kun en lille del af en anden. Hvis du ønsker et mere proportionalt element, bruge relative mål såsom rem eller procenter (%).
Den bedste relative måling at bruge er rem. Denne enhed refererer til skriftstørrelsen af rodelementet, som en læser ofte kan indstille i deres browserindstillinger. Du kan se effekten af px og rem på et element i følgende eksempel:
html>
<HTML>
<hoved>hoved>
<legeme>
<h1>Dette er overskrift 1h1>
<h2>Dette er overskrift 2h2>
<s>Dette er et afsnit.s>
<s>Dette er endnu et afsnit.s>
legeme>
html>Du kan style skriftstørrelserne i dette dokument ved hjælp af px-enheder med følgende CSS:
h1 {
skriftstørrelse: 50px;
}h2 {
skriftstørrelse: 30px;
}
s {
skriftstørrelse: 15px;
}
Den resulterende side ser acceptabel ud, når du ser den på en stor skærm:
Men det ser ikke præsentabelt ud på en mindre skærm, som på en telefon:
Anvend derefter rem på det samme indhold. Angiv en basisskriftstørrelse på html-elementet, og størrelse andre elementer ved hjælp af rems, som illustreret nedenfor:
html {
skriftstørrelse: 16px;
}h1 {
skriftstørrelse: 3rem;
}h2 {
skriftstørrelse: 2rem;
}
s {
skriftstørrelse: 1rem;
}
Læg mærke til forskellen mellem de store og små skærme. Med rem skalerer indholdet bedre uanset skærmstørrelse. Elementerne vil aldrig overstige den indstillede skærmstørrelse. Derfor er det bedre at bruge relative længder frem for pixels.
På en skrivebordsskærm:
På en lille skærm kan tekst i rem-enheder stadig læses:
2. Sæt alle dine stilarter i én fil
Brug af en CSS-fil til et stort projekt kan skabe rod. Du vil have en fil med lange linjer kode, som vil være forvirrende ved opdatering. Prøv at bruge forskellige filer til CSS-typografiark til forskellige komponenter.
For eksempel kan du have forskellige filer til navigation, sidehoved og sidefod. Og en anden til sektioner på kroppen. Adskillelse af dine CSS-filer hjælper med at strukturere din app og fremme kodeanvendelighed.
3. Brug af inline CSS uhensigtsmæssigt
I vanilla CSS kan du skrive stile på HTML-siderne ligesom på CSS-rammer som Bootstrap og TailwindCSS. Inline CSS giver dig mulighed for at anvende en unik stil til et HTML-element. Den bruger HTML-elementets stilattribut.
Følgende kode er et eksempel på inline CSS.
<h2stil="farve: grøn;">Dette er en grøn overskrifth2>
<sstil="farve: rød;">Dette er et rødt afsnit.s>
Teksten vil se sådan ud:
HTML med inline CSS kan dog kun være rodet. Da der ikke er nogen anden placering til CSS, findes al CSS i den samme fil som HTML. Det vil se overfyldt ud. Det er svært at redigere sådan en fil, især hvis det ikke er din kode.
Med inline CSS skal du også skrive kode for hvert element. Dette øger gentagelsen og reducerer genbrugen af kode. Brug altid en kombination af eksterne stylesheets og inline CSS til at style dine websider.
4. Overforbrug !vigtigt
I CSS er !vigtig regel tilføjer mere betydning til en ejendom/værdi. Det tilsidesætter andre stylingregler for den pågældende egenskab på det element.
Du skal kun have nogle få !vigtig regler i din kode. Brug det kun, når det er nødvendigt. Det nytter ikke at skrive kode og derefter tilsidesætte den. Din kode vil se rodet ud og forårsage problemer, når den køres på nogle enheder.
html>
<html>
<hoved>hoved>
<legeme>
<s> Jeg er orange s>
<sklasse="min klasse"> Jeg er grøn s>
<sid="mit-id"> Jeg er blå. s>
legeme>
html>CSS:
#mit-id {
baggrundsfarve: blå;
}.min klasse {
baggrundsfarve: grøn;
}
s {
baggrundsfarve: orange !vigtig;
}
Resultatet er sådan:
5. Følger ikke navnekonventioner
CSS har navngivningskonventioner, der guider udviklere til, hvordan man skriver standardkode. Dette er vigtigt, hvis du ender fejlretning af CSS-filen på en fremtidig dato.
En af disse standarder inkluderer brug af bindestreger til at adskille grupperede ord. En anden navngiver en vælger efter, hvad den gør. Så enhver, der ser på det, behøver ikke at gætte. Det gør det også nemmere at læse, vedligeholde og dele kode. For eksempel:
I stedet for dette:
.billede1 { margin-venstre: 3%; }Skriv det sådan:
.dreng-billede { margin-venstre: 3%; }Når du kigger på stilarket, vil du vide præcis, hvilket billede koden er til. Googles HTML/CSS-stilguide lister mange flere konventioner, som enhver udvikler bør kende.
At skrive kommentarer er den mest undervurderede færdighed inden for programmering. Mange mennesker glemmer at skrive kommentarer for at forklare deres kode. Men det sparer tid. Kommentarer er afgørende for at læse og vedligeholde kode.
Da CSS er løst struktureret, og enhver kan udvikle deres egne konventioner, er kommentarer afgørende. Det er god praksis at bruge velstrukturerede kommentarer til at forklare dit stilark. Du kan skrive kommentarer, der forklarer sektioner af koden, og hvad de gør.
/* videoelementer har brug for plads til at trække vejret */
.video {
margin-top: 2em;
}
/* styling af heltesektionen */
.hilsen {
margin-top: 1em;
}
7. Manglende design på forhånd
Mange mennesker gør det, men det er en alvorlig fejl at begynde at kode uden en plan. CSS bestemmer, hvordan strukturen af din frontend ser ud. Designet siger meget om dine programmeringsevner.
Et design til dit websted tydeliggør din vision og de nødvendige ressourcer for at få dig derhen. Få et mentalt billede af dit projekt. Design det derefter på papir eller brug et designværktøj som Canva at visualisere, hvad du ønsker.
Når du har et komplet billede af projektet, skal du samle alle dine ressourcer og begynde at kode. Det vil spare dig tid og redundans.
Hvorfor du bør overveje disse anbefalinger
Hvis du udvikler applikationer på nettet, vil du bruge CSS. At arbejde godt med CSS kræver øvelse og at følge standardkonventionerne. Konventioner gør ikke kun din kode læsbar, men også vedligeholdelsesvenlig.
At skrive standardiseret kode vil spare dig tid og kræfter. Den tid, du ville have brugt på at formatere front-end, kan du bruge på mere komplekse funktioner. Det sikrer også, at du kan genbruge kode og dele den med andre. Skriv bedre kode ved at følge de fastsatte konventioner og bliv en bedre udvikler.