Pradedantiesiems gali būti sunku dirbti su pakopiniais stiliaus lapais (CSS). Naudodami CSS galite struktūrizuoti, atnaujinti ir išlaikyti savo programos išvaizdą. Tačiau kalbai reikia įgūdžių manipuliuoti HTML puslapiais, kad gautumėte norimą išdėstymą.
Štai keletas klaidų, kurių reikia vengti dirbant su CSS. Jie sutaupys jūsų laiką ir palengvins kūrimo procesą.
1. Šrifto dydžių naudojimas px
Vienetas "px" reiškia pikselius. Galite naudoti jį norėdami išreikšti įvairius tinklalapio ilgius – nuo elemento pločio ir aukščio iki šrifto dydžio.
Tačiau px užrakina dizainą iki fiksuoto dydžio visuose ekranuose. Vaizdas pikseliais gali užimti visą vieno ekrano plotį ir tik nedidelę kito ekrano dalį. Jei norite proporcingesnio elemento, naudokite santykinius matavimus pvz., rem, arba procentais (%).
Geriausias santykinis matavimas yra rem. Šis vienetas nurodo pagrindinio elemento šrifto dydį, kurį skaitytojas dažnai gali nustatyti savo naršyklės nustatymuose. Toliau pateiktame pavyzdyje galite pamatyti px ir rem poveikį elementui:
html>
<HTML>
<galva>galva>
<kūnas>
<h1>Tai yra 1 antraštėh1>
<h2>Tai yra 2 antraštėh2>
<p>Tai pastraipa.p>
<p>Tai dar viena pastraipa.p>
kūnas>
html>Šiame dokumente galite formuoti šrifto dydžius naudodami pikselių vienetus su šiuo CSS:
h1 {
šrifto dydis: 50px;
}h2 {
šrifto dydis: 30px;
}
p {
šrifto dydis: 15px;
}
Gautas puslapis atrodo priimtinas, kai žiūrite jį dideliame ekrane:
Tačiau jis neatrodo reprezentatyvus mažesniame ekrane, kaip telefone:
Tada pritaikykite rem tam pačiam turiniui. Nurodykite pagrindinį html elemento šrifto dydį, o kitų elementų dydį nustatykite naudodami rems, kaip parodyta toliau:
html {
šrifto dydis: 16px;
}h1 {
šrifto dydis: 3rem;
}h2 {
šrifto dydis: 2rem;
}
p {
šrifto dydis: 1rem;
}
Atkreipkite dėmesį į skirtumą tarp didelio ir mažo ekrano. Naudojant rem, turinys geriau keičiasi nepriklausomai nuo ekrano dydžio. Elementai niekada neviršys nustatyto ekrano dydžio. Štai kodėl geriau naudoti santykinį ilgį, o ne pikselius.
Darbalaukio ekrane:
Mažame ekrane tekstas rem vienetais vis dar skaitomas:
2. Sudėkite visus savo stilius į vieną failą
Naudojant vieną CSS failą dideliam projektui gali kilti netvarka. Turėsite failą su ilgomis kodo eilutėmis, kurios bus painios atnaujinant. Pabandykite naudoti skirtingus failus skirtingų komponentų CSS stiliaus lapams.
Pavyzdžiui, galite turėti skirtingus naršymo, antraštės ir poraštės failus. Ir dar vienas skirtas kūno dalims. CSS failų atskyrimas padeda susisteminti programą ir paskatinti kodo naudojimą.
3. Inline CSS naudojimas netinkamai
„Vanilla CSS“ galite rašyti stilius HTML puslapiuose, kaip ir toliau CSS sistemos, tokios kaip Bootstrap ir TailwindCSS. Inline CSS leidžia HTML elementui pritaikyti unikalų stilių. Jis naudoja HTML elemento stiliaus atributą.
Šis kodas yra tiesioginio CSS pavyzdys.
<h2stilius="spalva: žalia;">Tai žalioji antraštėh2>
<pstilius="spalva: raudona";>Tai raudona pastraipa.p>
Tekstas atrodys taip:
Tačiau HTML su tiesioginiu CSS gali būti nepatogus. Kadangi nėra kitos CSS vietos, visi CSS yra tame pačiame faile kaip ir HTML. Jis atrodys perkrautas. Redaguoti tokį failą sunku, ypač jei tai ne jūsų kodas.
Be to, naudodami tiesioginį CSS, turite parašyti kiekvieno elemento kodą. Tai padidina pasikartojimą ir sumažina pakartotinį kodo naudojimą. Visada naudokite išorinių stilių lentelių ir vidinio CSS derinį, kad sukurtumėte savo tinklalapių stilių.
4. Per didelis naudojimas !svarbu
CSS, !svarbu taisyklė suteikia daugiau reikšmės nuosavybei/vertei. Tai nepaiso kitų to elemento tos nuosavybės stiliaus taisyklių.
Turėtumėte turėti tik keletą !svarbu taisyklės jūsų kode. Naudokite jį tik esant būtinybei. Nėra prasmės rašyti kodą ir tada jo nepaisyti. Kai kuriuose įrenginiuose paleistas kodas atrodys netvarkingas ir sukels problemų.
html>
<html>
<galva>galva>
<kūnas>
<p> Aš esu oranžinė p>
<pklasė="Mano klasė"> Aš esu žalias p>
<pid="mano ID"> Aš esu mėlynas. p>
kūnas>
html>CSS:
#mano ID {
fono spalva: mėlyna;
}.Mano klasė {
fono spalva: žalias;
}
p {
fono spalva: oranžinė !svarbu;
}
Rezultatas toks:
5. Vardų suteikimo konvencijų nesilaikymas
CSS turi pavadinimų suteikimo taisykles, kurios padeda kūrėjams rašyti standartinį kodą. Tai būtina, jei baigsite CSS failo derinimas ateityje.
Vienas iš šių standartų apima brūkšnelių naudojimą atskiriant sugrupuotus žodžius. Kitas yra parinkiklio įvardijimas pagal tai, ką jis daro. Taigi kiekvienam, žiūrinčiam į jį, nereikės spėlioti. Taip pat lengviau skaityti, prižiūrėti ir bendrinti kodą. Pavyzdžiui:
Vietoj to:
.vaizdas1 { paraštė-kairė: 3%; }Parašyk taip:
.berniukas-vaizdas { paraštė-kairė: 3%; }Žvelgdami į stiliaus lentelę, tiksliai žinosite, kuriam vaizdui skirtas kodas. Google HTML/CSS stiliaus vadovas išvardija daug daugiau konvencijų, kurias turėtų žinoti kiekvienas kūrėjas.
Komentarų rašymas yra labiausiai neįvertintas programavimo įgūdis. Daugelis žmonių pamiršta parašyti komentarus, kad paaiškintų savo kodą. Bet tai taupo laiką. Komentarai yra būtini norint skaityti ir prižiūrėti kodą.
Kadangi CSS yra laisvos struktūros ir kiekvienas gali kurti savo susitarimus, komentarai yra gyvybiškai svarbūs. Gera praktika yra naudoti geros struktūros komentarus savo stiliaus lapui paaiškinti. Galite rašyti komentarus, paaiškinančius kodo skyrius ir jų paskirtį.
/* vaizdo elementams reikia erdvės kvėpuoti */
.vaizdo įrašas {
paraštė-viršus: 2em;
}
/* herojaus skyriaus formavimas */
.pasveikinimas {
paraštė-viršus: 1em;
}
7. Nesugebėjimas suprojektuoti iš anksto
Daugelis žmonių tai daro, bet tai yra rimta klaida pradėti koduoti be plano. CSS nustato, kaip atrodo jūsų sąsajos struktūra. Dizainas daug pasako apie jūsų programavimo įgūdžius.
Svetainės dizainas paaiškina jūsų viziją ir išteklius, reikalingus jums pasiekti. Turėkite mintyse savo projekto vaizdą. Tada suprojektuokite jį ant popieriaus arba naudokite dizaino įrankių rinkinys, pvz., „Canva“. vizualizuoti tai, ko norite.
Kai turėsite išsamų projekto vaizdą, surinkite visus išteklius ir pradėkite koduoti. Tai sutaupys jūsų laiko ir pertekliaus.
Kodėl turėtumėte atsižvelgti į šias rekomendacijas
Jei kuriate programas žiniatinklyje, naudosite CSS. Norint gerai dirbti su CSS, reikia praktikos ir laikytis standartinių susitarimų. Sutartys ne tik leidžia jūsų kodą skaityti, bet ir prižiūrėti.
Rašydami standartizuotą kodą sutaupysite laiko ir pastangų. Laiką, kurį būtumėte praleidę formatuodami sąsają, galite skirti sudėtingesnėms funkcijoms. Tai taip pat užtikrina, kad galite pakartotinai naudoti kodą ir bendrinti jį su kitais. Parašykite geresnį kodą vadovaudamiesi nustatytomis taisyklėmis ir tapkite geresniu kūrėju.