Jak napsat skutečně hrozný CSS

Každý mluví o „tipech“ a „tipech“ pro psaní skvělých CSS.

To je v pořádku, ale možná když vidíte, jak špatný CSS vypadá, získáte jinou perspektivu. Sakra, může to dokonce udělat něco dobrého!

Dovolte mi, abych vás provedl cestou, jak napsat opravdu špatný CSS.

Jste připraveni?

Poznámka: I když přísaháte CSS-in-JS a nemilujete vanilkovou CSS, všichni se shodneme na tom, že všichni musíme znát nějaké CSS…

Ať už tedy píšete CSS nebo nějakou nadmnožinu, jako je SASS nebo jen CSS-in-JS, budete stále těžit z toho, že přesně víte, jak špatný CSS vypadá.

Kdo píše komentáře? Nikdo.

Bez komentáře? Skutečný kód, který jsem napsal před časem, ale odstranil všechny komentáře

Je tak snadné proklouznout sem, abyste si toho nevšimli velmi rychle.

Všichni to víme. Jsi tak chytrý, všichni ostatní se nepřibližují. Přestože CSS není nejvýraznějším výrazem „jazyků“, můžete si udělat domněnku o vtipech prohlížeče, opravit je a předpokládat, že pochopíte, co jste udělali pár týdnů po řádku.

Jak chytrý, co?

Odložte svou pýchu stranou a zachraňte sebe i ostatní spoluhráče stresu.

Pokud používáte techniku, která není tak zřejmá, nebo jste opravili nějaký chvění prohlížeče nebo cokoli, o čem si myslíte, že není dostatečně výrazné, napište tento komentář! Neublíží to.

Země komplexních selektorů

To jo! Právě jste se naučili CSS a cítíte se na vrcholu světa. Takže je čas předvést některé selektorové svaly.

Špatný pohyb.

Výběrem s příliš velkým počtem selektorů CSS jste možná úspěšně učinili váš CSS neudržitelným. Nyní je velmi závislá na struktuře HTML vaší aplikace.

Pokud se struktura značení mírně změní, musíte také provést CSS. Nejjednodušší z pracovních toků.

Jednoduše přidejte do prvku třídu a pokračujte v životě!

Dokonce i ve scénářích, kde je třeba kvalifikovat selektory s více třídami, vždy upřednostňujte jednoduchost.

Jednoduché je dobré, téměř vždy!

Výkon? Příkop to!

Tak to chápu. Jen se nestaráte o výkon. O podnikání se nestaráte, jasně. Pokud by jste to udělali, nebyli byste obtěžováni svými hroznými selekčními selektory.

Ale počkej…

Chápu, že počítače rostly rychleji a prohlížeče jsou i nadále optimalizovány. Bez ohledu na to by měly být vždy upřednostňovány jednoduché selektory a porozumění tomu, jak prohlížeč prochází DOM, aby našel váš selektor, je stále věcí!

Šance jsou, že si přečtete své selektory zleva doprava.

Prohlížeč však odpovídá selektorům zprava doleva, takže může eliminovat prvky, které se neshodují co nejrychleji.

Pokud jste to věděli, pravděpodobně byste v prohlížečích byli shovívavější. Zaslouží si vaši lásku.

Vzhledem k výše uvedenému příkladu bude prohlížeč odpovídat všem prvkům (*) a také zkontrolovat, zda jsou potomky těla.

tělo * {
  ...
}

Ale proč? Téměř každý viditelný prvek je ideálně potomkem prvku . To je jen zbytečná neefektivní kontrola.

Suck on Naming Things, takže se ani neobtěžuji.

V počítačové vědě jsou jen 2 těžké věci. Pojmenování věcí a…

Jo, myslím, že už jste to někde slyšeli. Pojmenování věcí může být těžké, ale to neznamená, že byste jim neměli dávat nějaké myšlenky, nebo jít úplně záhadně.

Pochybuji, že existuje situace, kdy má smysl používat jednotlivá písmena jako názvy tříd.

.u {
  velikost písma: 60rem;
}

A co super-specifické názvy tříd?

.former-black-now-red-odstavce {
  červená barva;
}

Ani ti nedělají nic dobrého.

I když se zdá, že název vyjadřuje nějaký význam, pravděpodobně jste zlomili velkou část opakovatelnosti této třídy. Což mimochodem je hlavním důvodem pro výuku.

Teď, pokud jste chtěli stylizovat pravidelný červený odstavec, předchozí jméno je tak specifické, že by to nedávalo smysl.

Používejte smysluplná jména, ale nepřekračujte to.

Slyšel jsem, že třídy byly skvělé. Nadužívejte je!

hmmm…. Pokud je to možné, vyhněte se nadměrně modulovaným třídám

Třídy jsou skvělé a každý je miluje. Ale stejně jako u všeho jiného, ​​příliš mnoho z nich je obecně špatný nápad.

Uvidíte, že pokud bude skupina tříd většinou používána společně, stačí je seskupit do jedné třídy.

Pokud se rozhodnete seskupit tyto třídy, je možná subjektivní. Pokud stavíte atomovou knihovnu nějakého druhu, můžete k tomu mít tendenci.

Pokud píšete velkou aplikaci, pravděpodobně budete lépe seskupovat třídy smysluplným způsobem, na rozdíl od toho, abyste měli tuny tříd na jediném prvku.

Pokud je to možné, vyhněte se nadměrně modulovaným třídám.

Jsem CSS Purist. Nedělám SASS, LESS atd.

Jste purista CSS, jsem purista CSS, jsme oba puristé. Vyjdeme to z cesty.

Teď ke kosti sváru.

Existují určitě případy použití, kdy je psaní vanilky CSS skvělé! Pokud například pro své projekty React nepoužívám řešení CSS-in-JS, mohl bych se rozhodnout jít čistě cestou CSS. Neublíží to.

Pokud však píšete velkou aplikaci s tunou vanilky CSS, která by létala kolem, vsadím se, že zavedení preprocesoru CSS zlepší váš vývoj a přispěje k udržovatelnější CSS kódové základně.

Opět neříkám použití preprocesorů pokaždé. Říkám, že tuto možnost neuzavírá. Mohlo by vás to zachránit!

Máte tam hodně důležitého stylu!

Nesnáším CSS. To prostě nikdy nefunguje. Co je tedy oprava?

Mějte tunu! Důležité všude, když potřebuji potlačit jakékoli prohlášení. Haha!

I když to zní jako slušný plán pro vaše líné já, nadměrné použití! Důležitého pravidla povede pouze k hrubě neudržitelnému CSS dokumentu.

Až budete příště muset použít! Důležité, ujistěte se, že tak neučiníte, protože jste příliš líní na to, abyste své problémy s kaskádou vyřešili.

CSS není tak špatné. Přijměte to.

Chcete napsat lepší CSS?

Vytvořil jsem bezplatného průvodce CSS, abych vám okamžitě rozžhavil své dovednosti CSS. Získejte zdarma ebook.

Sedm tajemství CSS, o kterých jste nevěděli