Práce s kaskádovými styly (CSS) může být pro začátečníky obtížná. Pomocí CSS můžete strukturovat, aktualizovat a udržovat vzhled vaší aplikace. Jazyk však vyžaduje dovednosti manipulovat se stránkami HTML, aby získal požadované rozložení.
Zde je několik chyb, kterých se při práci s CSS vyvarovat. Ušetří vám čas a usnadní váš vývojový proces.
1. Použití px pro velikosti písma
Jednotka "px" představuje pixely. Můžete jej použít k vyjádření různých délek na webové stránce, od šířky a výšky prvku až po velikost jeho písma.
px však uzamkne váš návrh na pevnou velikost pro všechny obrazovky. Obrázek v px může zabírat celou šířku jedné obrazovky a pouze malou část jiné. Pokud chcete proporcionálnější prvek, použijte relativní měření jako rem nebo procenta (%).
Nejlepší relativní měření je rem. Tato jednotka označuje velikost písma kořenového prvku, kterou může čtenář často nastavit v nastavení svého prohlížeče. V následujícím příkladu můžete vidět vliv px a rem na prvek:
html>
<HTML>
<hlava>hlava>
<tělo>
<h1>Toto je nadpis 1h1>
<h2>Toto je nadpis 2h2>
<p>Toto je odstavec.p>
<p>Toto je další odstavec.p>
tělo>
html>Velikosti písem v tomto dokumentu můžete upravit pomocí jednotek px s následujícím CSS:
h1 {
velikost písma: 50px;
}h2 {
velikost písma: 30px;
}
p {
velikost písma: 15px;
}
Výsledná stránka vypadá přijatelně, když ji zobrazíte na velké obrazovce:
Ale na menší obrazovce to nevypadá reprezentativně, jako na telefonu:
Dále použijte rem na stejný obsah. Určete základní velikost písma na prvku html a velikost ostatních prvků pomocí rems, jak je znázorněno níže:
html {
velikost písma: 16px;
}h1 {
velikost písma: 3rem;
}h2 {
velikost písma: 2rem;
}
p {
velikost písma: 1rem;
}
Všimněte si rozdílu mezi velkou a malou obrazovkou. S rem se obsah lépe měří bez ohledu na velikost obrazovky. Prvky nikdy nepřekročí nastavenou velikost obrazovky. Proto je lepší používat spíše relativní délky než pixely.
Na ploše:
Na malé obrazovce je text v jednotkách rem stále čitelný:
2. Všechny vaše styly v jednom souboru
Použití jednoho CSS souboru pro velký projekt může způsobit nepořádek. Budete mít soubor s dlouhými řádky kódu, který bude při aktualizaci matoucí. Zkuste použít různé soubory pro šablony stylů CSS pro různé komponenty.
Můžete mít například různé soubory pro navigaci, záhlaví a zápatí. A další pro úseky na těle. Oddělení souborů CSS pomáhá strukturovat vaši aplikaci a podporuje použitelnost kódu.
3. Nevhodné používání inline CSS
Ve vanilla CSS můžete psát styly na HTML stránky stejně jako na CSS frameworky jako Bootstrap a TailwindCSS. Inline CSS umožňuje použít jedinečný styl na prvek HTML. Používá atribut style elementu HTML.
Následující kód je příkladem inline CSS.
<h2styl="barva: zelená;">Toto je zelený nadpish2>
<pstyl="červená barva;">Toto je červený odstavec.p>
Text bude vypadat takto:
HTML s pouze vloženým CSS však může být chaotické. Protože neexistuje žádné jiné umístění pro CSS, všechny CSS existují ve stejném souboru jako HTML. Bude to vypadat přeplněné. Úprava takového souboru je obtížná, zvláště pokud to není váš kód.
Také s inline CSS musíte napsat kód pro každý prvek. To zvyšuje opakování a snižuje opětovné použití kódu. Ke stylování webových stránek vždy používejte kombinaci externích šablon stylů a vložených CSS.
4. Nadužívání !důležité
V CSS je !Důležité pravidlo přidává větší důležitost vlastnosti/hodnotě. Přepíše ostatní pravidla stylu pro danou vlastnost na daném prvku.
Měli byste jich mít jen pár !Důležité pravidla ve vašem kódu. Používejte jej pouze v případě potřeby. Nemá smysl psát kód a pak ho přepsat. Váš kód bude vypadat chaoticky a při spuštění na některých zařízeních způsobovat problémy.
html>
<html>
<hlava>hlava>
<tělo>
<p> jsem oranžová p>
<ptřída="moje třída"> jsem zelený p>
<pid="můj průkaz"> Jsem modrý. p>
tělo>
html>CSS:
#můj průkaz {
barva pozadí: modrý;
}.moje třída {
barva pozadí: zelená;
}
p {
barva pozadí: oranžový !Důležité;
}
Výsledek je takový:
5. Nedodržování konvencí pojmenování
CSS má konvence pojmenování, které vedou vývojáře, jak psát standardní kód. To je nezbytné, pokud skončíte ladění CSS souboru k budoucímu datu.
Jeden z těchto standardů zahrnuje použití pomlček k oddělení seskupených slov. Dalším je pojmenování selektoru podle toho, co dělá. Takže kdo se na to podívá, nebude muset hádat. Usnadňuje také čtení, údržbu a sdílení kódu. Například:
Místo toho:
.obrázek1 { okraj-levý: 3%; }Napište to takto:
.chlapec-obraz { okraj-levý: 3%; }Při pohledu do šablony stylů budete přesně vědět, pro který obrázek je kód určen. Průvodce stylem HTML/CSS společnosti Google uvádí mnoho dalších konvencí, které by měl znát každý vývojář.
Psaní komentářů je nejvíce podceňovanou dovedností v programování. Mnoho lidí zapomíná psát komentáře, aby vysvětlili svůj kód. Ale šetří to čas. Komentáře jsou nezbytné pro čtení a údržbu kódu.
Vzhledem k tomu, že CSS je volně strukturované a každý si může vytvořit své vlastní konvence, komentáře jsou životně důležité. Použití dobře strukturovaných komentářů k vysvětlení vaší šablony stylů je dobrou praxí. Můžete psát komentáře vysvětlující části kódu a to, co dělají.
/* prvky videa potřebují prostor k dýchání */
.video {
margin-top: 2em;
}
/* styling sekce hrdiny */
.oslovení {
margin-top: 1em;
}
7. Selhání návrhu předem
Mnoho lidí to dělá, ale je vážnou chybou začít kódovat bez plánu. CSS určuje, jak vypadá struktura vašeho front-endu. Design vypovídá hodně o vašich programátorských dovednostech.
Návrh vašeho webu objasňuje vaši vizi a zdroje potřebné k tomu, abyste se tam dostali. Udělejte si mentální obrázek o svém projektu. Poté jej navrhněte na papír nebo použijte sadu nástrojů pro návrh, jako je Canva abyste si představili, co chcete.
Až budete mít úplný obrázek o projektu, shromážděte všechny své zdroje a začněte kódovat. Ušetří vám to čas a nadbytečnost.
Proč byste měli zvážit tato doporučení
Pokud vyvíjíte aplikace na webu, využijete CSS. Dobrá práce s CSS vyžaduje praxi a dodržování standardních konvencí. Díky konvencím je váš kód nejen čitelný, ale také udržovatelný.
Psaní standardizovaného kódu vám ušetří čas a námahu. Čas, který byste strávili formátováním front-endu, můžete věnovat složitějším funkcím. Zajišťuje také, že můžete kód znovu použít a sdílet jej s ostatními. Napište lepší kód dodržováním stanovených konvencí a staňte se lepším vývojářem.