Práca s kaskádovými štýlmi (CSS) môže byť pre začiatočníkov náročná. Pomocou CSS môžete štruktúrovať, aktualizovať a udržiavať vzhľad vašej aplikácie. Jazyk však vyžaduje zručnosti na manipuláciu so stránkami HTML, aby ste získali požadované rozloženie.
Tu je niekoľko chýb, ktorým sa treba vyhnúť pri práci s CSS. Šetria vám čas a uľahčia váš vývojový proces.
1. Použitie px pre veľkosti písma
Jednotka „px“ predstavuje pixely. Môžete ho použiť na vyjadrenie rôznych dĺžok na webovej stránke, od šírky a výšky prvku až po veľkosť jeho písma.
px však uzamkne váš dizajn na pevnú veľkosť pre všetky obrazovky. Obrázok v px môže zaberať celú šírku jednej obrazovky a len malú časť druhej obrazovky. Ak chcete proporcionálnejší prvok, použiť relatívne merania ako rem alebo percentá (%).
Najlepšie relatívne meranie je rem. Táto jednotka sa vzťahuje na veľkosť písma koreňového prvku, ktorú môže čitateľ často nastaviť v nastaveniach prehliadača. Vplyv px a rem na prvok môžete vidieť v nasledujúcom príklade:
html>
<HTML>
<hlavu>hlavu>
<telo>
<h1>Toto je nadpis 1h1>
<h2>Toto je nadpis 2h2>
<p>Toto je odsek.p>
<p>Toto je ďalší odsek.p>
telo>
html>Veľkosti písma v tomto dokumente môžete upraviť pomocou jednotiek px s nasledujúcim CSS:
h1 {
veľkosť písma: 50px;
}h2 {
veľkosť písma: 30px;
}
p {
veľkosť písma: 15px;
}
Výsledná stránka vyzerá prijateľne, keď si ju prezeráte na veľkej obrazovke:
Na menšej obrazovke to však nevyzerá reprezentatívne, ako napríklad na telefóne:
Ďalej aplikujte rem na rovnaký obsah. Zadajte základnú veľkosť písma na prvku html a veľkosť ostatných prvkov pomocou rem, ako je znázornené nižšie:
html {
veľkosť písma: 16px;
}h1 {
veľkosť písma: 3rem;
}h2 {
veľkosť písma: 2rem;
}
p {
veľkosť písma: 1rem;
}
Všimnite si rozdiel medzi veľkou a malou obrazovkou. S rem sa obsah lepšie škáluje bez ohľadu na veľkosť obrazovky. Prvky nikdy nepresiahnu nastavenú veľkosť obrazovky. Preto je lepšie používať relatívne dĺžky namiesto pixelov.
Na pracovnej ploche:
Na malej obrazovke je text v jednotkách rem stále čitateľný:
2. Umiestnite všetky svoje štýly do jedného súboru
Použitie jedného súboru CSS pre veľký projekt môže spôsobiť neporiadok. Budete mať súbor s dlhými riadkami kódu, ktorý bude pri aktualizácii mätúci. Skúste použiť rôzne súbory pre šablóny so štýlmi CSS pre rôzne komponenty.
Môžete mať napríklad rôzne súbory pre navigáciu, hlavičku a pätu. A ďalší na úseky na tele. Oddelenie súborov CSS pomáha štruktúrovať vašu aplikáciu a podporuje použiteľnosť kódu.
3. Nevhodné používanie inline CSS
Vo vanilkovom CSS môžete písať štýly na HTML stránky rovnako ako na Rámce CSS ako Bootstrap a TailwindCSS. Inline CSS vám umožňuje použiť jedinečný štýl na prvok HTML. Používa atribút style elementu HTML.
Nasledujúci kód je príkladom inline CSS.
<h2štýl="farba: zelená;">Toto je zelený nadpish2>
<pštýl="farba: červená;">Toto je červený odsek.p>
Text bude vyzerať takto:
HTML s vloženým CSS však môže byť chaotické. Keďže neexistuje žiadne iné umiestnenie pre CSS, všetky CSS existujú v rovnakom súbore ako HTML. Bude to vyzerať preplnené. Úprava takéhoto súboru je náročná, najmä ak to nie je váš kód.
Pri inline CSS tiež musíte napísať kód pre každý prvok. To zvyšuje opakovanie a znižuje opätovné použitie kódu. Na úpravu štýlu webových stránok vždy používajte kombináciu externých šablón so štýlmi a vloženého CSS.
4. Nadmerné používanie !dôležité
V CSS je !dôležité pravidlo pridáva väčšiu dôležitosť vlastnosti/hodnote. Prepíše ostatné pravidlá štýlu pre danú vlastnosť na danom prvku.
Mali by ste ich mať len niekoľko !dôležité pravidlá vo vašom kóde. Používajte ho len v prípade potreby. Nemá zmysel písať kód a potom ho prepisovať. Váš kód bude vyzerať chaoticky a pri spustení na niektorých zariadeniach spôsobí problémy.
html>
<html>
<hlavu>hlavu>
<telo>
<p> som oranžová p>
<ptrieda="moja trieda"> som zelený p>
<pid="moje ID"> som modrý. p>
telo>
html>CSS:
#moje-id {
farba pozadia: Modrá;
}.moja trieda {
farba pozadia: zelená;
}
p {
farba pozadia: oranžová !dôležité;
}
Výsledok je taký:
5. Nedodržiavanie konvencií o pomenovaní
CSS má konvencie pomenovania, ktoré vedú vývojárov k tomu, ako písať štandardný kód. To je nevyhnutné, ak skončíte ladenie súboru CSS k budúcemu dátumu.
Jeden z týchto štandardov zahŕňa použitie pomlčiek na oddelenie zoskupených slov. Ďalším je pomenovanie selektora podľa toho, čo robí. Takže každý, kto sa na to pozrie, nebude musieť hádať. Tiež uľahčuje čítanie, údržbu a zdieľanie kódu. Napríklad:
Namiesto tohto:
.obrazok1 { ľavý okraj: 3%; }Napíšte to takto:
.chlapec-obraz { ľavý okraj: 3%; }Pri pohľade na šablónu so štýlmi budete presne vedieť, pre ktorý obrázok je kód určený. Sprievodca štýlom HTML/CSS od Google uvádza oveľa viac konvencií, ktoré by mal poznať každý vývojár.
Písanie komentárov je najviac podceňovaná zručnosť v programovaní. Mnoho ľudí zabúda napísať komentáre, aby vysvetlili svoj kód. Ale šetrí to čas. Komentáre sú nevyhnutné na čítanie a udržiavanie kódu.
Keďže CSS je voľne štruktúrované a každý si môže vytvoriť svoje vlastné konvencie, komentáre sú dôležité. Používanie dobre štruktúrovaných komentárov na vysvetlenie vašej šablóny štýlov je dobrou praxou. Môžete písať komentáre vysvetľujúce časti kódu a ich činnosť.
/* prvky videa potrebujú priestor na dýchanie */
.video {
margin-top: 2em;
}
/* úprava štýlu sekcie hrdinov */
.pozdrav {
margin-top: 1em;
}
7. Neschopnosť navrhnúť vopred
Mnoho ľudí to robí, ale je vážnou chybou začať programovať bez plánu. CSS určuje, ako vyzerá štruktúra vášho front-endu. Dizajn hovorí veľa o vašich programovacích schopnostiach.
Dizajn vašej stránky objasňuje vašu víziu a zdroje potrebné na to, aby ste sa tam dostali. Urobte si mentálny obraz o svojom projekte. Potom ho navrhnite na papier alebo použite súpravu dizajnových nástrojov ako Canva aby ste si predstavili, čo chcete.
Keď máte úplný obraz o projekte, zhromaždite všetky svoje zdroje a začnite kódovať. Ušetrí vám to čas a nadbytočnosť.
Prečo by ste mali zvážiť tieto odporúčania
Ak vyvíjate aplikácie na webe, budete používať CSS. Dobrá práca s CSS si vyžaduje prax a dodržiavanie štandardných konvencií. Vďaka konvenciám je váš kód nielen čitateľný, ale aj udržiavateľný.
Písanie štandardizovaného kódu vám ušetrí čas a námahu. Čas, ktorý by ste strávili formátovaním front-endu, môžete stráviť na zložitejších funkciách. Zabezpečuje tiež, že môžete znova použiť kód a zdieľať ho s ostatnými. Napíšte lepší kód dodržiavaním stanovených konvencií a staňte sa lepším vývojárom.