Å jobbe med Cascading Style Sheets (CSS) kan være vanskelig for nybegynnere. Ved å bruke CSS kan du strukturere, oppdatere og vedlikeholde utseendet til applikasjonen din. Men språket krever ferdigheter til å manipulere HTML-sider for å få ønsket layout.
Her er noen feil du bør unngå når du arbeider med CSS. De vil spare deg for tid og lette utviklingsprosessen.
1. Bruke px for skriftstørrelser
"px"-enheten representerer piksler. Du kan bruke den til å uttrykke ulike lengder på en nettside, fra bredden og høyden til et element til skriftstørrelsen.
Imidlertid låser px designet ditt til en fast størrelse for alle skjermer. Et bilde i px kan ta opp hele bredden av en skjerm, og bare en liten andel av en annen. Hvis du vil ha et mer proporsjonalt element, bruke relative mål slik som rem, eller prosenter (%).
Den beste relative målingen å bruke er rem. Denne enheten refererer til skriftstørrelsen til rotelementet som en leser ofte kan angi i nettleserinnstillingene. Du kan se virkningen av px og rem på et element i følgende eksempel:
html>
<HTML>
<hode>hode>
<kropp>
<h1>Dette er overskrift 1h1>
<h2>Dette er overskrift 2h2>
<s>Dette er et avsnitt.s>
<s>Dette er et annet avsnitt.s>
kropp>
html>Du kan style skriftstørrelsene i dette dokumentet ved å bruke px-enheter med følgende CSS:
h1 {
skriftstørrelse: 50px;
}h2 {
skriftstørrelse: 30px;
}
s {
skriftstørrelse: 15px;
}
Den resulterende siden ser akseptabel ut når du ser den på en stor skjerm:
Men det ser ikke presentabelt ut på en mindre skjerm, som på en telefon:
Deretter bruker du rem på det samme innholdet. Spesifiser en grunnskriftstørrelse på html-elementet, og dimensjoner andre elementer ved å bruke rems, som illustrert nedenfor:
html {
skriftstørrelse: 16px;
}h1 {
skriftstørrelse: 3rem;
}h2 {
skriftstørrelse: 2rem;
}
s {
skriftstørrelse: 1rem;
}
Legg merke til forskjellen mellom de store og små skjermene. Med rem skalerer innholdet bedre uavhengig av skjermstørrelse. Elementene vil aldri overskride den angitte skjermstørrelsen. Derfor er det bedre å bruke relative lengder i stedet for piksler.
På en skrivebordsskjerm:
På en liten skjerm er tekst i rem-enheter fortsatt lesbar:
2. Sett alle stilene dine i én fil
Å bruke én CSS-fil for et stort prosjekt kan skape et rot. Du vil ha en fil med lange kodelinjer som vil være forvirrende når du oppdaterer. Prøv å bruke forskjellige filer for CSS-stilark for forskjellige komponenter.
Du kan for eksempel ha forskjellige filer for navigasjon, topptekst og bunntekst. Og en annen for deler på kroppen. Å separere CSS-filene dine bidrar til å strukturere appen din og oppmuntre til bruk av kode.
3. Upassende bruk av inline CSS
I vanilla CSS kan du skrive stiler på HTML-sidene akkurat som på CSS-rammeverk som Bootstrap og TailwindCSS. Inline CSS lar deg bruke en unik stil på et HTML-element. Den bruker stilattributtet til HTML-elementet.
Følgende kode er et eksempel på innebygd CSS.
<h2stil="farge: grønn;">Dette er en grønn overskrifth2>
<sstil="fargen rød;">Dette er et rødt avsnitt.s>
Teksten vil se slik ut:
HTML med innebygd CSS kan imidlertid være rotete. Siden det ikke er noen annen plassering for CSS, finnes all CSS i samme fil som HTML. Det vil se overfylt ut. Det er vanskelig å redigere en slik fil, spesielt hvis det ikke er koden din.
Med inline CSS må du også skrive kode for hvert element. Dette øker repetisjonen og reduserer gjenbruk av kode. Bruk alltid en kombinasjon av eksterne stilark og innebygd CSS for å style nettsidene dine.
4. Overbruk !viktig
I CSS er !viktig regel legger mer vekt på en eiendom/verdi. Den overstyrer andre stylingregler for den egenskapen på det elementet.
Du bør bare ha noen få !viktig regler i koden din. Bruk den bare når det er nødvendig. Det er ingen vits i å skrive kode og deretter overstyre den. Koden din vil se rotete ut og forårsake problemer når den kjøres på enkelte enheter.
html>
<html>
<hode>hode>
<kropp>
<s> Jeg er oransje s>
<sklasse="klassen min"> Jeg er grønn s>
<sid="min-id"> Jeg er blå. s>
kropp>
html>CSS:
#min-id {
bakgrunnsfarge: blå;
}.klassen min {
bakgrunnsfarge: grønn;
}
s {
bakgrunnsfarge: oransje !viktig;
}
Resultatet er slik:
5. Følger ikke navnekonvensjoner
CSS har navnekonvensjoner som veileder utviklere om hvordan man skriver standardkode. Dette er viktig hvis du ender opp feilsøking av CSS-filen på en fremtidig dato.
En av disse standardene inkluderer bruk av bindestreker for å skille grupperte ord. En annen er å navngi en velger i henhold til hva den gjør. Så alle som ser på det trenger ikke å gjette. Det gjør det også enklere å lese, vedlikeholde og dele kode. For eksempel:
Istedenfor dette:
.bilde1 { marg-venstre: 3%; }Skriv det slik:
.boy-image { marg-venstre: 3%; }Når du ser på stilarket, vil du vite nøyaktig hvilket bilde koden er for. Googles HTML/CSS-stilguide lister opp mange flere konvensjoner som enhver utvikler bør kjenne til.
Å skrive kommentarer er den mest undervurderte ferdigheten innen programmering. Mange glemmer å skrive kommentarer for å forklare koden sin. Men det sparer tid. Kommentarer er avgjørende for å lese og vedlikeholde kode.
Siden CSS er løst strukturert og hvem som helst kan utvikle sine egne konvensjoner, er kommentarer avgjørende. Å bruke godt strukturerte kommentarer for å forklare stilarket ditt er god praksis. Du kan skrive kommentarer som forklarer deler av koden og hva de gjør.
/* videoelementer trenger plass til å puste */
.video {
margin-topp: 2em;
}
/* styling av helteseksjonen */
.hilsen {
margin-topp: 1em;
}
7. Unnlatelse av å designe på forhånd
Mange gjør det, men det er en alvorlig feil å begynne å kode uten en plan. CSS bestemmer hvordan strukturen til front-end-en din ser ut. Designet sier mye om dine programmeringsferdigheter.
Et design for nettstedet ditt tydeliggjør din visjon og ressursene som trengs for å komme deg dit. Ha et mentalt bilde av prosjektet ditt. Design den deretter på papir eller bruk et designverktøysett som Canva å visualisere hva du ønsker.
Når du har et fullstendig bilde av prosjektet, sett sammen alle ressursene dine og begynn kodingen. Det vil spare deg for tid og redundans.
Hvorfor du bør vurdere disse anbefalingene
Hvis du utvikler applikasjoner på nettet, vil du bruke CSS. Å jobbe godt med CSS krever øvelse og å følge standardkonvensjonene. Konvensjoner gjør ikke bare koden lesbar, men også vedlikeholdbar.
Å skrive standardisert kode vil spare deg for tid og krefter. Tiden du ville ha brukt på å formatere front-end kan du bruke på mer komplekse funksjoner. Det sikrer også at du kan gjenbruke kode og dele den med andre. Skriv bedre kode ved å følge de angitte konvensjonene og bli en bedre utvikler.
