Jak se stát mistrem v CSS v 5 jednoduchých krocích

Jak víte, v poslední době jsem opustil svou komfortní zónu, zavřel Android Studio a ponořil se přímo do děsivého, drsného moře zvaného Webový vývoj. Nedílnou součástí vytváření webových aplikací je práce s CSS. Pro ty, kteří nejsou obeznámeni s kaskádovým stylem - takto vývojáři webových stránek navrhují své webové stránky, dávají jim nějaký život a strukturu, přidávají animace a přitom ztratí rozum.

V tomto příspěvku se pokusím popsat, co je zapotřebí pro toho, kdo se chce z důvodu, kterému nerozumím, stát mistrem v CSS v 5 jednoduchých krocích:

1. Ztratit svou intuici

Takže na konec formuláře stačí přidat ještě jedno tlačítko, jak těžké to může být, že? PROSÍM NEVYDÁVEJTE „PRAVÉ“!

Například CSS nemá rád pravou stranu, bude vždy dávat přednost vlevo. Protože když přidáte float: right; něco špatného se musí stát. Některé prvky změní své postavení; některé divy půjdou přes sebe; některé staré verze IE zobrazí vaši stránku vzhůru nohama. Proč? Nevím.

Jak to vyřešit? Pravděpodobně budete muset přidat přetečení: skryté k nadřazenému prvku (nebo přidání fiktivní div k jasné plovoucí samozřejmě). Proč? Opět to nevím.

Takto funguje CSS, myslíte si, že by to mělo fungovat jedním způsobem, ale obvykle se mýlíte.

Můj životní cyklus kódování relace CSS (zdroj: technický život jako graf)

2. Pravidelně cvičte meditaci

Chcete-li pokračovat v předchozí části - při jednání s CSS nebude spousta věcí fungovat podle očekávání. Můžete se pokusit pochopit logiku, která je za tím, ale obvykle by to byla jen ztráta času.

Takže to, co doporučuji - před každým dnem víte, že se chystáte pracovat na stylingu své stránky, trvat několik minut a nechat tělo i mysl odpočinout. Přemýšlejte o tom s tímto: „Bude to těžké, bude to drsné, ale je to jen software a nedovolím, aby se tento neurčitý systém dostal na nervy.“

Díky kombinaci s odstraněním jakýchkoli ostrých předmětů z vašeho stolu může být váš život (a život vašeho týmu) mnohem klidnější.

zdroj: giphy

3. Aktualizujte svou stránku. Vůbec.

Při práci s CSS si zvyknete pracovat přímo v prohlížeči, takže si můžete snadno hrát s vlastnostmi prvků a získat okamžitou zpětnou vazbu.

Ale zatímco nezkušený vývojář ztratí všechny své změny při náhodném obnovení stránky, hlavní CSS bude vědět, že tlačítko obnovení je zakázáno. Zejména ne dříve, než se produktovému manažerovi zobrazí výsledek.

Mám teorii, která takto vynalezla jednostránkovou aplikaci.

4. Přihlaste se k odběru některých zpravodajů.

Vývoj webu je prostředí, které se rychle mění. Rámce se rychle mění, každý týden je zde nová lesklá knihovna a každý týden jsou představovány nové koncepty.

Nejlepší způsob, jak být na vrcholu nových nástrojů a nápadů, je přihlásit se k odběru jednoho nebo více zpravodajů.

Takto budete moci říci například: „Ach, stále používáte Flexbox? Právě používám mřížku CSS; je to sračka “, když váš PR úplně rozložil rozvržení stránky, a nevíte proč.

zdroj: huangxuan

5. Pracujte na svých přesvědčovacích schopnostech.

Jednoho dne k vám váš návrhář přijde s bláznivým konceptem UX, který absolutně netušíte, jak implementovat. Ale jste mistrem CSS a mistři nemohou připustit, že nevědí, jak něco udělat.

Co tedy můžete udělat? Jednoduše ho z toho vytlačte:

"Ach, nemůžeme to oživit, protože to naruší přístupnost našich stránek."
"Plovoucí výhledy na mobilu vypadají špatně, věřte mi."
"Materiálové karty?" Jsme stále v roce 2015 ?! “
"Pffff, jako Facebook ?!" Do CSS vkládají své CSS! Ti kluci jsou blázni !! “

Pokračujte s tím, dokud nebude v pořádku se standardní webovou stránkou spouštěcí šablony Bootstrap.

zdroj: giphy

Afterword: tento příspěvek je sarkastický a obdivuji každého z vás a jednoho z vás, kteří dokážou správně zarovnat text hned vedle miniatury, stejně jako to chtěl designér.

Pokud se vám tento příspěvek líbil, klikněte prosím na tlačítko „doporučit“ níže a sdílejte tento příběh. Také ráda slyším vaše komentáře. Děkuji!

Původně zveřejněno na adrese shem8.github.io 25. srpna 2017.