Kaskaadstiililehtedega (CSS) töötamine võib algajatele olla keeruline. CSS-i abil saate oma rakenduse struktureerida, värskendada ja säilitada selle välimust. Kuid see keel nõuab soovitud paigutuse saamiseks oskusi HTML-lehtedega manipuleerimiseks.
Siin on mõned vead, mida CSS-iga töötamisel vältida. Need säästavad teie aega ja hõlbustavad teie arendusprotsessi.
1. Kasutades fondi suurust px
Üksus "px" tähistab piksleid. Saate seda kasutada erinevate pikkuste väljendamiseks veebilehel, alates elemendi laiusest ja kõrgusest kuni fondi suuruseni.
Kuid px lukustab teie kujunduse kõigi ekraanide jaoks fikseeritud suurusele. Pikslites olev pilt võib hõivata ühe ekraani kogu laiuse ja ainult väikese osa teisest ekraanist. Kui soovite proportsionaalsemat elementi, kasutage suhtelisi mõõtmisi nagu rem või protsendid (%).
Parim suhteline mõõt on rem. See üksus viitab juurelemendi fondi suurusele, mille lugeja saab sageli oma brauseri seadetes määrata. Järgmises näites näete px ja rem mõju elemendile:
html>
<HTML>
<pea>pea>
<keha>
<h1>See on pealkiri 1h1>
<h2>See on rubriik 2h2>
<lk>See on lõik.lk>
<lk>See on teine lõik.lk>
keha>
html>Saate selle dokumendi fondi suurusi stiilida, kasutades piksliühikuid järgmise CSS-iga:
h1 {
fondi suurus: 50px;
}h2 {
fondi suurus: 30px;
}
lk {
fondi suurus: 15px;
}
Tulemuseks olev leht näeb vastuvõetav välja, kui vaatate seda suurel ekraanil:
Kuid see ei näe esinduslik välja väiksemal ekraanil, nagu telefonis:
Järgmisena rakendage rem samale sisule. Määrake HTML-elemendi põhifondi suurus ja muude elementide suurus remsi abil, nagu allpool näidatud:
html {
fondi suurus: 16px;
}h1 {
fondi suurus: 3rem;
}h2 {
fondi suurus: 2rem;
}
lk {
fondi suurus: 1rem;
}
Pange tähele erinevust suure ja väikese ekraani vahel. Remiga mastaabib sisu olenemata ekraani suurusest paremini. Elemendid ei ületa kunagi määratud ekraani suurust. Seetõttu on pikslite asemel parem kasutada suhtelisi pikkusi.
Töölaua ekraanil:
Väikesel ekraanil on rem-ühikutes tekst endiselt loetav:
2. Kõik oma stiilid ühte faili
Ühe CSS-faili kasutamine suure projekti jaoks võib tekitada segadust. Teil on pikkade koodiridadega fail, mis ajakohastamisel segadusse ajab. Proovige erinevate komponentide jaoks kasutada CSS-i stiililehtede jaoks erinevaid faile.
Näiteks võivad teil olla erinevad failid navigeerimiseks, päiseks ja jaluseks. Ja teine kehaosade jaoks. CSS-failide eraldamine aitab teie rakendust struktureerida ja soodustab koodi kasutatavust.
3. Tekstisisese CSS-i sobimatu kasutamine
Vanilje CSS-is saate HTML-lehtedele stiile kirjutada täpselt nagu see CSS-i raamistikud nagu Bootstrap ja TailwindCSS. Tekstisisene CSS võimaldab teil rakendada HTML-i elemendile ainulaadset stiili. See kasutab HTML-elemendi stiiliatribuuti.
Järgmine kood on tekstisisese CSS-i näide.
<h2stiilis="värv: roheline;">See on roheline rubriikh2>
<lkstiilis="värv: punane;">See on punane lõik.lk>
Tekst näeb välja selline:
Kuid ainult tekstisisese CSS-iga HTML võib olla segane. Kuna CSS-i jaoks pole muud asukohta, on kõik CSS-id HTML-iga samas failis. See näeb välja rahvarohke. Sellise faili redigeerimine on keeruline, eriti kui see pole teie kood.
Samuti peate tekstisisese CSS-i puhul kirjutama iga elemendi jaoks koodi. See suurendab korduste arvu ja vähendab koodi taaskasutamist. Kasutage oma veebilehtede stiili kujundamiseks alati väliste stiililehtede ja tekstisisese CSS-i kombinatsiooni.
4. Ülekasutamine !tähtis
CSS-is on !tähtis reegel lisab omadusele/väärtusele suuremat tähtsust. See alistab selle elemendi muud selle atribuudi stiilireeglid.
Teil peaks olema ainult paar !tähtis reeglid teie koodis. Kasutage seda ainult vajaduse korral. Pole mõtet koodi kirjutada ja siis sellest üle kirjutada. Teie kood näeb mõnes seadmes käitamisel räpane välja ja põhjustab probleeme.
html>
<html>
<pea>pea>
<keha>
<lk> Olen oranž lk>
<lkklass="minu klass"> Olen roheline lk>
<lkid="minu ID"> ma olen sinine. lk>
keha>
html>CSS:
#minu-id {
taustavärv: sinine;
}.minu klass {
taustavärv: roheline;
}
lk {
taustavärv: oranž !oluline;
}
Tulemus on selline:
5. Nimetamiskonventsioone mitte järgides
CSS-il on nimetamisreeglid, mis juhendavad arendajaid standardkoodi kirjutamisel. See on oluline, kui lõpetate CSS-faili silumine tulevasel kuupäeval.
Üks neist standarditest hõlmab sidekriipsude kasutamist rühmitatud sõnade eraldamiseks. Teine on valija nimetamine selle järgi, mida see teeb. Nii et keegi, kes seda vaatab, ei pea arvama. Samuti muudab see koodi lugemise, hooldamise ja jagamise lihtsamaks. Näiteks:
Selle asemel:
.pilt1 { margin-vasak: 3%; }Kirjutage see nii:
.poisi-imago { margin-vasak: 3%; }Stiilitabelit vaadates saate täpselt teada, millise pildi jaoks kood on mõeldud. Google'i HTML/CSS stiilijuhend loetleb veel palju tavasid, mida iga arendaja peaks teadma.
Kommentaaride kirjutamine on programmeerimises kõige alahinnatud oskus. Paljud inimesed unustavad oma koodi selgitamiseks kommentaare kirjutada. Aga see säästab aega. Kommentaarid on koodi lugemiseks ja hooldamiseks hädavajalikud.
Kuna CSS on lõdvalt üles ehitatud ja igaüks saab oma tavasid välja töötada, on kommentaarid üliolulised. Hästi struktureeritud kommentaaride kasutamine stiililehe selgitamiseks on hea tava. Saate kirjutada kommentaare, mis selgitavad koodi jaotisi ja nende tegevust.
/* videoelemendid vajavad hingamisruumi */
.video {
margin-top: 2em;
}
/* kangelase sektsiooni kujundamine */
.tervitus {
margin-top: 1em;
}
7. Eelneva disaini ebaõnnestumine
Paljud inimesed teevad seda, kuid on tõsine viga alustada kodeerimist ilma plaanita. CSS määrab, milline teie kasutajaliidese struktuur välja näeb. Disain ütleb palju teie programmeerimisoskuste kohta.
Teie saidi kujundus selgitab teie nägemust ja selle saavutamiseks vajalikke ressursse. Looge oma projektist vaimne pilt. Seejärel kujundage see paberile või kasutage disainitööriistade komplekt nagu Canva visualiseerida, mida sa tahad.
Kui teil on projektist täielik pilt, koondage kõik oma ressursid ja alustage kodeerimist. See säästab teie aega ja koondamist.
Miks peaksite neid soovitusi kaaluma
Kui arendate rakendusi veebis, kasutate CSS-i. CSS-iga hea töö nõuab harjutamist ja tavapäraste tavade järgimist. Konventsioonid ei muuda teie koodi mitte ainult loetavaks, vaid ka hooldatavaks.
Standardkoodi kirjutamine säästab teie aega ja vaeva. Aja, mille oleksite kulutanud esiosa vormindamiseks, võite kulutada keerukamatele funktsioonidele. Samuti tagab see, et saate koodi uuesti kasutada ja seda teistega jagada. Kirjutage parem kood, järgides seatud tavasid ja saage paremaks arendajaks.