Delo s kaskadnimi slogovnimi preglednicami (CSS) je za začetnike lahko težko. Z uporabo CSS lahko strukturirate, posodabljate in vzdržujete videz svoje aplikacije. Toda jezik zahteva veščine za manipulacijo strani HTML, da dobite želeno postavitev.
Tukaj je nekaj napak, ki se jim morate izogniti pri delu s CSS. Prihranili vam bodo čas in olajšali razvojni proces.
1. Uporaba px za velikost pisave
Enota "px" predstavlja slikovne pike. Uporabite ga lahko za izražanje različnih dolžin na spletni strani, od širine in višine elementa do velikosti njegove pisave.
Vendar px vaš dizajn zaklene na fiksno velikost za vse zaslone. Slika v px lahko zavzame celotno širino enega zaslona in le majhen delež drugega. Če želite bolj sorazmeren element, uporabite relativne meritve kot je rem ali odstotki (%).
Najboljša relativna meritev za uporabo je rem. Ta enota se nanaša na velikost pisave korenskega elementa, ki jo lahko bralec pogosto nastavi v nastavitvah brskalnika. Vpliv px in rem na element si lahko ogledate v naslednjem primeru:
html>
<HTML>
<glavo>glavo>
<telo>
<h1>To je naslov 1h1>
<h2>To je naslov 2h2>
<str>To je odstavek.str>
<str>To je še en odstavek.str>
telo>
html>Velikosti pisave v tem dokumentu lahko oblikujete z uporabo enot px z naslednjim CSS:
h1 {
velikost pisave: 50px;
}h2 {
velikost pisave: 30px;
}
str {
velikost pisave: 15px;
}
Končna stran je videti sprejemljiva, ko jo gledate na velikem zaslonu:
Toda na manjšem zaslonu, kot na telefonu, ni videti predstavljivo:
Nato uporabite re na isti vsebini. Določite osnovno velikost pisave za element html in velikost drugih elementov z uporabo rems, kot je prikazano spodaj:
html {
velikost pisave: 16px;
}h1 {
velikost pisave: 3rem;
}h2 {
velikost pisave: 2rem;
}
str {
velikost pisave: 1rem;
}
Opazite razliko med velikimi in majhnimi zasloni. Z rem se vsebina bolje prilagaja ne glede na velikost zaslona. Elementi ne bodo nikoli presegli nastavljene velikosti zaslona. Zato je bolje uporabiti relativne dolžine namesto slikovnih pik.
Na namiznem zaslonu:
Na majhnem zaslonu je besedilo v enotah rem še vedno berljivo:
2. Združite vse svoje sloge v eno datoteko
Uporaba ene datoteke CSS za velik projekt lahko povzroči zmešnjavo. Imeli boste datoteko z dolgimi vrsticami kode, ki bo pri posodabljanju povzročila zmedo. Poskusite uporabiti različne datoteke za slogovne liste CSS za različne komponente.
Na primer, lahko imate različne datoteke za navigacijo, glavo in nogo. In drugo za dele na telesu. Ločevanje datotek CSS pomaga strukturirati vašo aplikacijo in spodbuja uporabnost kode.
3. Neustrezna uporaba vgrajenega CSS
V vanilla CSS lahko pišete sloge na straneh HTML tako kot na Ogrodja CSS, kot sta Bootstrap in TailwindCSS. Vgrajeni CSS vam omogoča uporabo edinstvenega sloga za element HTML. Uporablja atribut style elementa HTML.
Naslednja koda je primer vgrajenega CSS.
<h2stil="barva: zelena;">To je zeleni naslovh2>
<strstil="barva: rdeča;">To je rdeč odstavek.str>
Besedilo bo prikazano takole:
Vendar je HTML samo z vgrajenim CSS lahko neurejen. Ker ni druge lokacije za CSS, vsi CSS obstajajo v isti datoteki kot HTML. Videti bo gneča. Urejanje takšne datoteke je težko, še posebej, če to ni vaša koda.
Poleg tega morate pri vgrajenem CSS napisati kodo za vsak element. To poveča ponavljanje in zmanjša ponovno uporabo kode. Za oblikovanje spletnih strani vedno uporabite kombinacijo zunanjih slogovnih listov in vgrajenega CSS-ja.
4. Prekomerna uporaba !pomembno
V CSS je !pomembno pravilo doda večji pomen lastnosti/vrednosti. Preglasi druga pravila oblikovanja za to lastnost tega elementa.
Moral bi jih imeti le nekaj !pomembno pravila v vaši kodi. Uporabite ga samo, kadar je to potrebno. Nima smisla pisati kode in jo nato preglasiti. Vaša koda bo videti neurejena in bo povzročala težave, ko se bo izvajala v nekaterih napravah.
html>
<html>
<glavo>glavo>
<telo>
<str> jaz sem oranžna str>
<strrazred="moj razred"> jaz sem zelen str>
<strid="moj-id"> Jaz sem modra. str>
telo>
html>CSS:
#moj-id {
Barva ozadja: modra;
}.moj razred {
Barva ozadja: zelena;
}
str {
Barva ozadja: oranžna !pomembno;
}
Rezultat je tak:
5. Neupoštevanje konvencij o poimenovanju
CSS ima pravila poimenovanja, ki vodijo razvijalce pri pisanju standardne kode. To je bistveno, če končate odpravljanje napak v datoteki CSS na datum v prihodnosti.
Eden od teh standardov vključuje uporabo vezajev za ločevanje združenih besed. Drugo je poimenovanje izbirnika glede na to, kaj počne. Torej nikomur, ki ga gleda, ne bo treba ugibati. Omogoča tudi lažje branje, vzdrževanje in skupno rabo kode. Na primer:
Namesto tega:
.slika1 { rob-levo: 3%; }Napišite takole:
.podoba fanta { rob-levo: 3%; }Ko pogledate slogovno tabelo, boste natančno vedeli, za katero sliko je koda. Googlov vodnik po slogu HTML/CSS navaja še veliko drugih konvencij, ki bi jih moral poznati vsak razvijalec.
Pisanje komentarjev je najbolj podcenjena veščina programiranja. Mnogi ljudje pozabijo napisati komentarje za razlago svoje kode. Vendar prihrani čas. Komentarji so bistveni za branje in vzdrževanje kode.
Ker je CSS ohlapno strukturiran in lahko vsak razvije lastne konvencije, so komentarji ključnega pomena. Uporaba dobro strukturiranih komentarjev za razlago vašega stilskega lista je dobra praksa. Napišete lahko komentarje, ki razlagajo dele kode in kaj počnejo.
/* video elementi potrebujejo prostor, da dihajo */
.video {
margin-top: 2em;
}
/* oblikovanje odseka junaka */
.pozdrav {
margin-top: 1em;
}
7. Neuspešno načrtovanje vnaprej
Mnogi ljudje to počnejo, vendar je velika napaka začeti kodirati brez načrta. CSS določa, kakšna je struktura vašega sprednjega dela. Zasnova pove veliko o vaših sposobnostih programiranja.
Zasnova vašega spletnega mesta razjasni vašo vizijo in vire, potrebne za dosego cilja. Imejte mentalno sliko svojega projekta. Nato ga oblikujte na papir ali uporabite komplet orodij za oblikovanje, kot je Canva da vizualizirate, kar želite.
Ko imate popolno sliko projekta, zberite vse svoje vire in začnite kodirati. To vam bo prihranilo čas in odvečnost.
Zakaj bi morali upoštevati ta priporočila
Če razvijate aplikacije na spletu, boste uporabljali CSS. Dobro delo s CSS zahteva prakso in upoštevanje standardnih konvencij. Zaradi konvencij vaša koda ni samo berljiva, ampak jo je tudi mogoče vzdrževati.
Pisanje standardizirane kode vam bo prihranilo čas in trud. Čas, ki bi ga porabili za formatiranje sprednjega dela, lahko porabite za bolj zapletene funkcije. Zagotavlja tudi, da lahko znova uporabite kodo in jo delite z drugimi. Napišite boljšo kodo z upoštevanjem nastavljenih konvencij in postanite boljši razvijalec.
