Når du skal i gang med webdesign, er CSS et vigtigt element for at få det hele til at fungere korrekt og se ud, som du ønsker, at det skal se ud. Det er en forkortelse for Cascading Style Sheets, og de fungerer ved at give dig mulighed for at style HTML-elementer på den måde, du ønsker.

Og selv om du kan eksperimentere med CSS på mange forskellige måder – oftest inline – er der en bedre måde at gå til værks på. Og det falder i tråd med en række bedste praksis, som du bør følge for at sikre, at din kode er funktionel og velorganiseret uden unødvendig masse .

I dag vil vi fremhæve 14 CSS-best practices for begyndere, men selv erfarne professionelle bør af og til genopfriske de grundlæggende principper.

Se vores videoguide med CSS-best Practices for begyndere

1. Organisering af sit stylesheet

Den første ting du skal gøre, når du anvender CSS-bedste praksis, er at organisere dine stylesheets. Hvordan du griber dette an, afhænger af dit projekt, men som en generel regel bør du overholde følgende organisationsprincipper:

Vær konsistent

Uanset hvordan du vælger at organisere din CSS, skal du sørge for at holde dine valg konsekvente på tværs af hele stylesheetet og på tværs af hele dit websted.

Fra navngivning af klasser til linjeindrykninger og kommentarstrukturer – hvis du holder det hele konsekvent, kan du lettere holde styr på dit arbejde. Desuden sikrer det, at det er hovedpinefrit at foretage ændringer senere hen.

Brug linjeskift frit

Selv om CSS fungerer, selv om det er visuelt grimt, er det bedre for dig og for andre udviklere, der arbejder med din kode, hvis du bruger masser af linjeskift for at holde hvert enkelt kodestykke adskilt og læseligt.

Typisk er det bedst at placere hvert egenskabs- og værdipar på en ny linje.

Skærmbillede af CSS-kode fra Mozilla.org, der viser læseligheden af CSS, når den er struktureret, så egenskaber og værdipar findes på deres egne linjer.
CSS-kode

Opret nye sektioner, hvor det giver mening

Igen vil det i høj grad afhænge af den type websted, du arbejder på, hvordan du opsætter dine stylesheets. Men som en generel regel er det en god idé at oprette sektioner for stilarter, som de vil blive brugt. Altså en sektion for tekststile, en sektion for lister og kolonner, en sektion for navigation og links osv. Du kan også selv oprette sektioner for specifikke sider, der måske har en anden styling end resten, f.eks. butikken eller FAQ’er.

Kommentér din kode

Selv om det kun er dig selv, der nogensinde vil se din CSS, er det stadig en god idé at være grundig med dine kommentarer. Kommentarer vil se ud som følgende:

/* This is what a standard CSS comment looks like */

Dette gør det lettere for dig at finde ud af, hvad hvert afsnit er i relation til ved et blik uden at skulle gennemgå hver linje senere.

Kommentarer kan hjælpe dig med at definere afsnit, men du kan også bruge dem til at give dig indsigt i de beslutninger, du har truffet – især hvis du føler, at du måske glemmer det senere.

Brug separate stylesheets til større projekter

Dette gælder ikke for alle websteder, men hvis du har et stort websted med behov for en masse specifik CSS, er det en god idé at bruge flere stylesheets. Ingen – heller ikke du selv – bør skulle skulle scrolle i super lang tid for at finde den enkelte kodelinje, du har brug for.

Undgå besværet og opret separate stylesheets til forskellige sektioner på webstedet – især hvis de skal have helt forskellige stilarter.

Du kan f.eks. oprette et stylesheet til globale stilarter og et andet til din onlinebutik med dedikeret styling til produktbeskrivelser, overskrifter eller prisangivelser.

2. Inline CSS vs. ekstern CSS vs. intern CSS

Der er tre forskellige typer CSS, som du kan være nødt til at håndtere, når du opbygger et websted og justerer dets styling. Lad os tale lidt om, hvad de hver især er og gør, og derefter diskutere, hvilken du faktisk bør bruge til dine projekter.

  • Inline CSS. Dette giver dig mulighed for at style specifikke HTML-elementer,
  • Ekstern CSS. Dette indebærer, at du bruger en fil som f.eks. et stylesheet til at style webstedet som helhed.
  • Intern CSS. Dette giver dig mulighed for at style en hel side i stedet for specifikke elementer.

Mange udviklere anbefaler, at man helt undgår inline CSS, da det normalt ikke kan cachelagres, og det anbefales at undgå at opdele CSS på flere filer. I det mindste bør det bruges sparsomt.

Vi kan egentlig kun se et behov for det, hvis du vil bruge en smule styling på en enkelt sektion, tekststykke eller et område på en enkelt side på dit websted. Det er sandsynligvis den eneste situation, hvor inline CSS er en brugbar løsning.

Ellers er det bedre at bruge ekstern CSS eller intern CSS afhængigt af dine behov, da det sparer dig tid og kræfter. Du bestemmer stilene én gang og anvender dem på hele dit websted. Boom – færdig.

3. Minimer dit stilark

En anden af de bedste CSS-praksis er at minificere dine stylesheets. Der findes adskillige minificeringsværktøjer til at fremskynde indlæsningstiderne for dine stylesheets, herunder direkte i Kinsta CDN.

Justering af indstillingerne for minificering af kode i Kinsta CDN.
Justering af indstillingerne for minificering af kode i Kinsta CDN.

Dette giver dig mulighed for at justere indstillingerne for minificering af kode på hele dit websted.

4. Brug en præprocessor

Med en preprocessor som Sass/SCSS kan du bruge variabler og funktioner, organisere din CSS bedre og spare tid. De fungerer ved at give dig mulighed for at oprette CSS ud fra præprocessorsyntaksen.

Det betyder, at præprocessoren er som en “CSS +”hvor den indeholder et par funktioner, der normalt ikke findes i CSS i sig selv. Tilføjelsen af disse funktioner gør oftest output-CSS’en mere læselig og lettere at navigere i.

Du skal bruge en CSS-compiler på din hjemmesides server for at kunne gøre brug af præprocessorer. Nogle af de mest populære præprocessorer omfatter Sass, LESS og Stylus.

Skærmbillede af Sass hjemmeside.
Sass

5. Overvej en CSS-framework

CSS frameworks kan være nyttige i nogle tilfælde, men kan være unødvendige for mange, især hvis dit websted er til den mindre side.

Frameworks kan gøre det nemt at udrulle store projekter hurtigt og også undgå fejl. Og de giver fordelen af standardisering, hvilket er vigtigt, når flere personer arbejder på et projekt på samme tid.

Alle skal bruge de samme navngivningsprocedurer, de samme layoutmuligheder, de samme kommenteringsprocedurer osv.

På den anden side resulterer de også i generisk udseende websteder, og en stor del af koden kan ende med at være ubrugt.

Skærmbillede af Bootstrap-hjemmesiden.
Bootstrap

Du har sikkert stødt på CSS-rammer før. Bootstrap og Foundation er to af de mest populære eksempler. Andre frameworks omfatter Tailwind CSS og Bulma.

6. Start med en nulstilling

En anden ting, som du hurtigt kan omsætte til praksis, er at starte dit udviklingsarbejde med en CSS-nulstilling. Ved at bruge noget som normalize.css kan du gøre det sådan, at alle browsere gengiver sideelementer på en ensartet måde, samtidig med at du følger de mest opdaterede standarder for at minimere browserinkonsistenser.

Denne nulstilling er faktisk en lille CSS-fil, som du uploader til dit websted for at tilføje en større grad af konsistens på tværs af browsere til stylingen af HTML-elementer og tjener som en opdateret måde at foretage en CSS-nulstilling på.

7. Classes vs. ID’er

Den næste ting, du skal være opmærksom på, når du følger CSS-bestpraksis, er, hvordan du behandler klasser og ID’er. Hvis du ikke er bekendt med det, skal vi kort definere begge dele:

  • Klasse. Class vælgeren fungerer ved at vælge et element med en class-attribut. Det, der står i class-attributten, er det, der bestemmer, hvordan HTML-elementet vælges. Det ser således ud i kode: .classname
  • ID. ID fungerer på den anden side ved at vælge et element med en ID-attribut. ID-attributten skal være den samme som selectorens værdi, for at det kan fungere. Du kan genkende et ID i CSS ved dette symbol: #.

Et ID bruges til at vælge et enkelt element, mens en klasse bruges til at vælge mere end et element. Du vil bruge et ID til at anvende en stil på et enkelt HTML-element. Du bruger en klasse til at anvende en stil på mere end ét HTML-element. Ved at følge denne generelle regel kan du holde din kode ren og overskuelig og reducere antallet af unødvendig eller dobbeltkode.

I lighed med vores diskussion af inline vs. ekstern CSS ovenfor bruger du et ID til at anvende en stil på et enkelt element. Grundlæggende er det meningen, at ID’er skal bruges til styling af undtagelserne på siden og ikke til overordnede stilarter, der gælder for hele siden eller webstedet.

8. Undgå redundans

En anden af de bedste CSS-praksis, der skal følges, er at undgå redundans, når og hvor du kan. Her er et par generelle tips til at følge for at anvende denne praksis i din arbejdsgang:

Brug DRY-metoden

DRY-metoden står for “Don’t Repeat Yourself” (gentag ikke dig selv) og er grundlæggende den idé, at du aldrig bør gentage kode i CSS. Fordi det i bedste fald er spild af tid og gentagende for dig at indtaste disse stilarter manuelt igen og igen, men i værste fald kan det aktivt gøre dit website langsommere.

Det er god praksis at gennemgå din kode for at fjerne overflødigheder. Der er f.eks. ikke behov for tags til at identificere skriftstørrelse to gange i samme afsnit. Fjern gentagelserne, så vil din kode læses bedre og også yde bedre.

Brug CSS-shorthand

CSS-shorthand er en god måde at reducere den plads, din kode fylder, samtidig med at den stadig fungerer som den skal. Du kan kombinere flere stilarter i en enkelt linje, hvis det giver mening at gøre det. Hvis du f.eks. indstiller stilarter for en bestemt div, kan du angive margin, padding, skrifttype, skriftstørrelse og farve på en enkelt linje.

Tilføj flere klasser til dine elementer

Hvor det er relevant, kan du også undgå redundans ved at tilføje mere end én klasse til et element. Hvis indholdet på din side f.eks. allerede flyder til venstre takket være klassen .left, men du ønsker at placere en kolonne på siden til højre, kan du føje den til elementet for at undgå forvirring og for at fortælle CSS specifikt, hvilket element du ønsker skal flyde til højre ud over den standard venstrejustering.

Og det bedste er, at du kan tilføje lige så mange klasser, du vil, til et element, så længe de er adskilt af et mellemrum.

Kombiner elementer, hvor det er muligt

I stedet for at liste elementer op et for et, kan du kombinere dem for at spare plads og tid. Ofte vil elementer i et enkelt stylesheet have samme (eller lignende) stilarter. Der er ingen grund til at opregne skrifttype, farve og justering for hvert enkelt tekstelement på siden, hvis de alle har samme styling. I stedet kan du kombinere dem i en enkelt linje som her:

h1, h2, h3, p {
font-family: arial,
color: #00000
}

Undgå unødvendige ekstra selektorer

Nogle gange vil din kode blive lidt rodet, når du arbejder på at færdiggøre designet af dit websted. Derfor er det vigtigt at gå tilbage og fjerne unødvendige selektorer bagefter. Du bør også holde øje med alt for komplekse selektorer. Hvis du f.eks. skulle style lister på dit websted, behøver du ikke bruge selektorer som “body” eller “container” eller noget i den stil. Bare.classname li { vil være tilstrækkeligt.

9. Sådan importerer du skrifttyper korrekt

Korrekt import og brug af skrifttyper er en anden måde at sikre, at din CSS er klar, præcis og optimeret.

Brug af @font-face til at importere skrifttyper

Du kan tilføje stort set alle skrifttyper til dit websted, men du skal følge en bestemt procedure for at sikre, at det fungerer korrekt.

Skærmbillede af Webfont Generator
Webfont-generator
  1. Download den skrifttype, du ønsker at bruge. Der er mange steder, hvor du kan finde skrifttyper, herunder Google og Adobe. Sørg for, at du downloader TrueType Font-filen (.ttf) for den valgte skrifttype.
  2. Upload den brugerdefinerede skrifttype, du vil bruge, til Webfont Generator, der er stillet til rådighed af Font Squirrel. Download webfontkit’et, når det er genereret. Det bør indeholde flere filer, herunder flere forskellige skrifttypefiler med udvidelser som .ttf, .woff, .woff2 og .eot. Der bør også være en CSS-fil inkluderet.
  3. Upload webfontkit’et til dit websted ved hjælp af FTP. De specifikke instruktioner for dette vil variere afhængigt af din webhostingudbyder, men generelt kan du få adgang til dit websteds filer ved hjælp af en FTP-klient eller filhåndteringen på din webhosts administrationsgrænseflade som cPanel.
  4. Opdater CSS-filen ved hjælp af en teksteditor. Enhver HTML-teksteditor du foretrækker kan bruges, f.eks. NotePad eller Sublime. I denne fil vil der være en “kilde-URL” anført. Du skal opdatere denne for at afspejle, hvor Web Font Kit nu er placeret på din webserver. Kopier filstien for hvor hver skrifttypefil er gemt på din webhost i denne fil som følger:
@font-face {
font-family: "FontName";
src: url("https://sitename.com/css/fonts/FontName.eot");
src: url("https://sitename.com/css/fonts/FontName.woff") format("woff"),
url("https://sitename.com/css/fonts/FontName.otf") format("opentype"),
url("https://sitename.com/css/fonts/FontName.svg#filename") format("svg");
}

Du kan derefter tage dine nye skrifttyper i brug ved at tilføje dem til CSS-filerne på dit websted med font-family-tagget.

Du kan forhåndsindlæse skrifttyper for at forbedre webstedets ydeevne og forhindre mærkelige justeringer af webstedets layout, når det indlæses. Forudindlæsning af skrifttyper og indlæsning af WOFF2-skrifttyper (eller ellers den mindste skriftstørrelse) først kan forbedre ydeevnen betydeligt. Det gør du ved at tilføje en kodelinje til <head>-tagget. Better Web Type giver et kortfattet eksempel:

<link rel="preload" as="font" href="/assets/fonts/3A1C32_0_0.woff2" type="font/woff2" crossorigin="crossorigin">

En anden ting, du kan gøre, er at begrænse tegnsættet for dine brugerdefinerede skrifttyper. Hvis du kun bruger nogle få tegn fra en skrifttype (f.eks. til en overskrift eller et logo), behøver du ikke at kalde hele tegnsættet frem, men kun de få tegn, du rent faktisk har brug for. Ifølge den nye kode skal du gøre følgende for at anmode om kun tegnene “Hello”

<link href="http://fonts.googleapis.com/css?family=Open+Sans&text=Hello" rel="stylesheet">

Selv-Host Fonte når det er muligt

Den ovenfor beskrevne proces gælder for selvhostende skrifttyper, men det er vigtigt at gentage, at dette er den bedste fremgangsmåde. Det fremskynder indlæsningstiden betydeligt, og det betyder, at du ikke er afhængig af hastigheden på et andet websted for at afslutte indlæsningsprocessen på dit websted.

Vær forsigtig med skrifttypevariationer

Skrifttypevariationer kan være super nyttige til at tilføje sjove stilarter til dit websted. Men hvis de misbruges, kan de også ødelægge dit websted, hvis de misbruges.

Hvis du tildeler mere end én stil under font-variation-settings, er det sandsynligt, at de vil overlappe hinanden, og at den ene vil tilsidesætte den anden. Du er meget bedre tjent med at holde tingene enkle og bruge skrifttypeegenskaber i stedet, som illustreret her:

.bold {
font-weight: bold;
}
.italic {
font-style: italic;
}

Brug en nødskrifttype

Selvom du måske gør dig umage med at tilføje en brugerdefineret skrifttype til dit websted og bruge den via CSS, vil det stadig ikke fungere 100% af tiden – især ikke, når den tilgås af en person med en forældet webbrowser. Men du ønsker stadig, at disse besøgende på webstedet skal have en behagelig oplevelse ved at surfe.

For at imødekomme dette er det vigtigt at indstille en fallback-skrifttype, som kan bruges, hvis ingen af dine andre skrifttyper kan bruges. For at gøre dette skal du blot angive fallback-skrifttypen efter din foretrukne skrifttype, når du tildeler en skrifttype-familie. På denne måde vil CSS’en først kalde din foretrukne skrifttype, derefter dit andet valg, derefter dit tredje valg osv.

Ifølge W3Schools er der fem primære kategorier for skrifttypefamilier. Følgende er en liste over disse familier med populære fallback-skrifttyper, der passer ind i hver familie.

  • Serif: Times New Roman, Georgia, Garamond
  • Sans-serif: Arial, Tahoma, Helvetica
  • Monospace: Courier New
  • Kursiv: Brush Script MT
  • Fantasy: Kobberplade, Papyrus

10. Gør CSS tilgængeligt

Alle bør gøre deres websteder tilgængelige – helt klart. Og det gælder også for din tilgang til CSS. Dit mål bør være at gøre dit websted brugbart for så mange mennesker som muligt, og at gennemføre tilgængelighedsforanstaltninger er en fantastisk måde at opnå dette på.

Du kan gøre din CSS tilgængelig på en række måder:

  • Tilføj farvevariation til links for at få dem til at skille sig ud.
  • Gør pop-ups afviselige ved at trykke på ESC-tasten. Personer, der bruger skærmlæsere eller forstørrelse, vil ofte ikke kunne se “X” på skærmen for at afvise en pop-up, så det er vigtigt at gøre dem afviselige ved hjælp af et tastetryk.
  • Nogle enheder vil slet ikke vise pop-ups, så sørg for, at alle vigtige oplysninger formidles andetsteds.
  • Hover-elementer (som f.eks. tooltips) bør udløses af Tab-tasten og af et museskift.
  • Du må ikke fjerne konturer. Browsere viser automatisk en omrids omkring de elementer, som tastaturet i øjeblikket er fokuseret på. Du kan deaktivere dette ved hjælp af outline:none, men det bør du virkelig ikke gøre, da det er uvurderligt for dem, der bruger skærmlæsere eller har nedsat syn og har brug for ekstra fremhævning/fokuspunkter til navigation.
  • Forbedre fokusindikatoren. Som nævnt ovenfor er konturer omkring fremhævede elementer afgørende for navigationen for mange, men standardkonturen er ofte knap nok synlig. Du kan ændre dette, så det bliver mere synligt, ved at bruge :focus til at indstille en stil, der henleder mere opmærksomhed på det, der aktuelt er i fokus. Du kan gøre noget lignende med :hover for at forbedre omslagseffekter. Et godt eksempel på ændring af :focus i praksis stammer fra et sæt retningslinjer for tilgængelighed fra University of Washington:
a {
color: black;
background-color: white;
text-decoration: underline
}
a:focus, a:hover {
color: white;
background-color: black;
text-decoration: none
}

Dette kodestykke gør det sådan, at links vises som sort tekst på en hvid baggrund, men skifter til hvid tekst på en baggrund, når de er placeret under tastaturfokus (når brugeren tabulerer til elementet). Den samme effekt opstår også ved hover.

11. Gennemfør navnekonventioner

Det virker måske småt i øjeblikket, men hvad du beslutter at navngive ting i CSS kan have varige konsekvenser – og kan aktivt koste dig tid og penge i fremtiden, hvis det gøres forkert. Før du overhovedet begynder at skrive CSS, bør du beslutte dig for en række navnekonventioner og holde dig til dem.

Dette vil spare dig for en masse tid på fejlfinding senere, da du er mindre tilbøjelig til at henvise til det forkerte element, når du skriver din kode. Ifølge FreeCodeCamp er det en god fremgangsmåde at holde sig til standardformateringen for CSS-navne, dvs. font-weight vs. fontWeight.

Brug BEM-navnekonventionen

En god måde at holde navnene konsistente på er at bruge BEM-navnekonventionen. Hele pointen med BEM er at opdele brugergrænsefladen i komponenter, som du kan genbruge igen og igen.

BEM står for Block, Element og Modifier. Men lad os lige se på, hvad det egentlig betyder.

  • Blok: En blok kan være en hvilken som helst del af designet på dit websted, f.eks. en menu, en overskrift, en foter eller en kolonne. Dine blokke bør have navne som .main-nav eller .footer.
  • Element. Elementer beskriver de dele, der udgør hver enkelt blok. Tænk på ting som skrifttyper, farver, knapper, lister eller links. Når du bruger BEM-navnekonventionerne, identificeres elementer ved at sætte to understregninger foran elementets navn. Så hvis vi ville tale om den skrifttype, der bruges i overskriften på dit websted, ville det se således ud i CSS med BEM-navnekonvention: .header__font
  • Modifikator. Den sidste brik i BEM-puslespillet er modificatoren. Modifikatorer er den måde, hvorpå du fastlægger stilen for elementet i blokken. De omfatter ting som skrifttypebetegnelser, skrifttyper og -størrelser, farveværdier og justeringsværdier. Hvis du fortsætter med at arbejde med eksemplet ovenfor, og du vil indstille skriftfarven i overskriften, skal du skrive det således med elementet og modificatoren adskilt af to bindestreger: .header__font-red

Hvis du følger denne navngivningskonvention – eller noget andet, som dit team beslutter sig for – kan du få en meget mere behagelig redigerings- og fejlfindingsoplevelse senere hen.

12. Undgå !Important-tag

En anden bedste praksis, som du bør implementere i din CSS-arbejdsrutine, er at undgå overforbrug af !important-tagget så meget som muligt.

Selv om det kan løse problemer, fører brugen af det ofte til, at man stoler på det som en krykke. Og det kan resultere i et rod af !important-tags i hele din kode, som i sidste ende kan ødelægge dit websted.

Hvad det faktisk handler om, er specificitet. Hvis en selector er meget specifik, vil din webbrowser bestemme, at den er vigtigere, end den ville gøre med mindre specifikke selectors. !important-tagget kan bruges til at identificere egenskaber, der er vigtigere end andre.

Dette kan blive vanskeligt, da du ofte vil ende med at skulle bruge flere !important-tags – hver især for at tilsidesætte en tidligere i specifikke scenarier. Og hvis du gør det for meget, kan det medføre, at dit websted går i stykker, eller at dine stilarter indlæses forkert. Oftest bruges dette tag som en kortsigtet løsning, men det bliver ofte permanent og kan så give problemer senere, især når det er tid til at fejlfinde.

Et af de eneste tilfælde, hvor det generelt anses for acceptabelt at bruge !important-tagget, er at give slutbrugeren mulighed for at tilsidesætte stilarter til brug med skærmlæsere og andre hjælpemidler til tilgængelighed. Det er også nyttigt, når der er tale om utility-klasser.

13. Brug Flexbox

Du kan også få mere ud af Flexbox, når du forsøger at implementere bedste praksis for håndtering af CSS i din arbejdsgang. Flexbox er en fleksibel måde at oprette et weblayout og justere elementer på siden på i stedet for at bruge den traditionelle float-mulighed.

Ifølge CSS-Tricks er Flexbox et fleksibelt boksmodul, der er en alternativ måde at strukturere din CSS på ved at være opmærksom på, hvordan dine layouts er justeret og fordelt i en container. Det bedste er, at størrelsen af selve containeren ikke engang behøver at være kendt, men at de indeholdte egenskaber “flexer” med den skiftende containerstørrelse. Dette er en fantastisk måde at tilpasse sig mobile enheder på.

En anden vigtig forskel er, at Flexbox er “retningsagnostisk”, hvilket betyder, at dens layouts ikke er struktureret vertikalt eller horisontalt. Det gør det til et bedre valg til at designe komplicerede websteder og applikationer, der skal rumme mange ændringer i skærmorientering. Standard CSS-layouts er blokbaserede, mens flexbox-layouts er afhængige af “flex-flow”. Igen tilbyder CSS-Tricks en kortfattet tegning, der illustrerer dette koncept godt:

Skærmbillede af en illustration af, hvordan flexbox-layouts fungerer fra CSS-Tricks.
Sådan fungerer flexbox-layouts fra CSS-Tricks

Elementer inden for flexboxen er lagt ud over hovedaksen og tværaksen, hvor hvert element og hver egenskab inden for er designet til at bøje og flyde baseret på flexcontainerens størrelse.

14. WordPress Tip: Ændre ikke direkte tema-filer

Den sidste af de bedste CSS-praksisser, som vi vil diskutere her i dag, er specifikt for WordPress-brugere. Det er aldrig en god idé at ændre dit temas filer direkte. Enhver opdatering af webstedet kan slette disse ændringer eller ødelægge dit websted. Det er ikke risikoen værd.

I stedet kan du bruge indstillingen Yderligere CSS i tematilpasseren til at foretage de ændringer, du ønsker. Du skal dog huske på, at dette injicerer CSS’en inline og placerer den direkte i head.

Hvis du kun ønsker at foretage en ændring eller to, kan dette være en brugbar mulighed, men alt, hvad du placerer i feltet Additional CSS, vil blive hængende, selv hvis du udfører en temaopdatering, en opdatering af webstedet eller endda hvis du skifter tema.

Hvis det nu er nødvendigt med mere robuste CSS-ændringer, er det bedre at tilføje disse fra et brugerdefineret CSS-stilsark eller ved at bruge et undertema, hvor du ændrer filen style.css for undertemaet direkte. Denne metode er også opdateringssikret.

Opsummering

At kaste sig hovedkulds ud i at skabe nyttig og præcis CSS kan føles som en stor opgave for en nybegynder, men hvis du tager dig tid til at lære dig selv om bedste praksis, kan du spare dig selv for en masse tid, kræfter og hovedpine senere hen.

Vi håber, at denne samling af bedste praksis vil hjælpe dig med at styre dig på rette vej mod at bygge funktionelle, nyttige og tilgængelige websteder i mange år fremover. Held og lykke!

Salman Ravoof

Salman Ravoof is a self-taught web developer, writer, creator, and a huge admirer of Free and Open Source Software (FOSS). Besides tech, he's excited by science, philosophy, photography, arts, cats, and food. Learn more about him on his website, and connect with Salman on Twitter.