Rad s Cascading Style Sheets (CSS) može biti težak za početnike. Pomoću CSS-a možete strukturirati, ažurirati i održavati izgled svoje aplikacije. Ali jezik zahtijeva vještine rukovanja HTML stranicama kako bi se dobio željeni izgled.
Evo nekoliko pogrešaka koje treba izbjegavati pri radu s CSS-om. Oni će vam uštedjeti vrijeme i olakšati proces razvoja.
1. Korištenje px za veličinu fonta
Jedinica "px" predstavlja piksele. Možete ga koristiti za izražavanje različitih duljina na web stranici, od širine i visine elementa do veličine fonta.
Međutim, px zaključava vaš dizajn na fiksnu veličinu za sve zaslone. Slika u px može zauzeti punu širinu jednog zaslona, a samo mali dio drugog. Ako želite proporcionalniji element, koristiti relativna mjerenja kao što je rem, ili postoci (%).
Najbolja relativna mjera za korištenje je rem. Ova jedinica odnosi se na veličinu fonta korijenskog elementa koju čitatelj često može postaviti u postavkama svog preglednika. Možete vidjeti utjecaj px i rem na element u sljedećem primjeru:
html>
<HTML>
<glava>glava>
<tijelo>
<h1>Ovo je naslov 1h1>
<h2>Ovo je naslov 2h2>
<str>Ovo je paragraf.str>
<str>Ovo je još jedan paragraf.str>
tijelo>
html>Veličine fonta u ovom dokumentu možete stilizirati pomoću px jedinica sa sljedećim CSS-om:
h1 {
veličina fonta: 50px;
}h2 {
veličina fonta: 30px;
}
str {
veličina fonta: 15px;
}
Rezultirajuća stranica izgleda prihvatljivo kada je gledate na velikom ekranu:
Ali ne izgleda prezentativno na manjem ekranu, kao na telefonu:
Zatim primijenite re na isti sadržaj. Odredite osnovnu veličinu fonta na html elementu i veličinu ostalih elemenata koristeći rems, kao što je prikazano u nastavku:
html {
veličina fonta: 16px;
}h1 {
veličina fonta: 3rem;
}h2 {
veličina fonta: 2rem;
}
str {
veličina fonta: 1rem;
}
Primijetite razliku između velikog i malog zaslona. Uz rem, sadržaj se bolje skalira bez obzira na veličinu zaslona. Elementi nikada neće premašiti postavljenu veličinu zaslona. Zato je bolje koristiti relativne duljine nego piksele.
Na zaslonu radne površine:
Na malom ekranu, tekst u rem jedinicama i dalje je čitljiv:
2. Stavljanje svih vaših stilova u jednu datoteku
Korištenje jedne CSS datoteke za veliki projekt može stvoriti nered. Imat ćete datoteku s dugim redovima koda koji će biti zbunjujući prilikom ažuriranja. Pokušajte koristiti različite datoteke za CSS stilske listove za različite komponente.
Na primjer, možete imati različite datoteke za navigaciju, zaglavlje i podnožje. I još jedan za dijelove na tijelu. Odvajanje vaših CSS datoteka pomaže u strukturiranju vaše aplikacije i potiče upotrebljivost koda.
3. Neprikladno korištenje ugrađenog CSS-a
U vanilla CSS-u možete pisati stilove na HTML stranicama baš kao i na CSS okviri kao što su Bootstrap i TailwindCSS. Inline CSS vam omogućuje primjenu jedinstvenog stila na HTML element. Koristi atribut stila HTML elementa.
Sljedeći kod je primjer ugrađenog CSS-a.
<h2stil="boja: zelena;">Ovo je Zeleni smjerh2>
<strstil="boja: crvena;">Ovo je crveni paragraf.str>
Tekst će izgledati ovako:
Međutim, HTML samo s ugrađenim CSS-om može biti neuredan. Budući da ne postoji drugo mjesto za CSS, sav CSS postoji u istoj datoteci kao i HTML. Izgledat će gužva. Uređivanje takve datoteke je teško, pogotovo ako to nije vaš kod.
Također, s ugrađenim CSS-om, morate napisati kod za svaki element. Ovo povećava ponavljanje i smanjuje ponovnu upotrebu koda. Uvijek koristite kombinaciju vanjskih listova stilova i ugrađenog CSS-a za stiliziranje web stranica.
4. Pretjerano korištenje !važno
U CSS-u, !važno pravilo dodaje veću važnost svojstvu/vrijednosti. Ono nadjačava druga pravila stila za to svojstvo na tom elementu.
Trebali biste imati samo nekoliko !važno pravila u vašem kodu. Koristite ga samo kada je potrebno. Nema smisla pisati kod i zatim ga nadjačavati. Vaš će kôd izgledati neuredno i uzrokovati probleme kada se izvodi na nekim uređajima.
html>
<html>
<glava>glava>
<tijelo>
<str> Ja sam narančasta str>
<strrazreda="moj razred"> Ja sam zelena str>
<striskaznica="Moj ID"> Ja sam plava. str>
tijelo>
html>CSS:
#Moj ID {
boja pozadine: plava;
}.moj razred {
boja pozadine: zelena;
}
str {
boja pozadine: naranča !važno;
}
Rezultat je ovakav:
5. Ne pridržavanje konvencija o imenovanju
CSS ima konvencije imenovanja koje programere vode u tome kako napisati standardni kod. Ovo je bitno ako završite otklanjanje pogrešaka u CSS datoteci na budući datum.
Jedan od tih standarda uključuje korištenje crtica za odvajanje grupiranih riječi. Drugi je imenovanje selektora prema onome što radi. Tako da nitko tko ga gleda neće morati pogađati. Također olakšava čitanje, održavanje i dijeljenje koda. Na primjer:
Umjesto ovoga:
.slika1 { margin-lijevo: 3%; }Napiši ovako:
.dječak-slika { margin-lijevo: 3%; }Kada pogledate tablicu stilova, znat ćete točno za koju sliku je kôd. Googleov HTML/CSS stilski vodič navodi mnoge druge konvencije koje bi svaki programer trebao znati.
Pisanje komentara je najpodcijenjenija vještina u programiranju. Mnogi ljudi zaborave napisati komentare kako bi objasnili svoj kod. Ali štedi vrijeme. Komentari su bitni za čitanje i održavanje koda.
Budući da je CSS labavo strukturiran i svatko može razviti vlastite konvencije, komentari su vitalni. Korištenje dobro strukturiranih komentara za objašnjenje vašeg lista stilova dobra je praksa. Možete napisati komentare koji objašnjavaju dijelove koda i što oni rade.
/* video elementima treba prostora da dišu */
.video {
margin-top: 2em;
}
/* stiliziranje odjeljka heroja */
.pozdrav {
margin-top: 1em;
}
7. Neuspješno dizajniranje unaprijed
Mnogi ljudi to rade, ali velika je pogreška započeti kodiranje bez plana. CSS određuje kako izgleda struktura vašeg front-enda. Dizajn govori puno o vašim vještinama programiranja.
Dizajn vaše web stranice pojašnjava vašu viziju i resurse potrebne da tamo stignete. Imajte mentalnu sliku svog projekta. Zatim ga dizajnirajte na papiru ili upotrijebite dizajnerski alat poput Canve da vizualizirate ono što želite.
Kada imate potpunu sliku projekta, skupite sve svoje resurse i počnite s kodiranjem. Uštedjet će vam vrijeme i suvišnost.
Zašto biste trebali razmotriti ove preporuke
Ako razvijate aplikacije na webu, koristit ćete CSS. Za dobar rad s CSS-om potrebna je praksa i poštivanje standardnih konvencija. Konvencije ne samo da čine vaš kod čitljivim, već i održavavim.
Pisanje standardiziranog koda uštedjet će vam vrijeme i trud. Vrijeme koje biste potrošili na formatiranje front-enda možete potrošiti na složenije značajke. Također osigurava mogućnost ponovnog korištenja koda i dijeljenja s drugima. Napišite bolji kod slijedeći postavljene konvencije i postanite bolji programer.