Se všemi posledními hovory o tom, že jsem nakonec využil CSS Grid, mě přemýšlel: Jaké další úžasné funkce CSS mohu nyní využít? CSS proměnné byly ty, které se okamžitě objevily na mysli.
Je to chvíle, co jsem slyšel něco o CSS proměnných a přidává zcela novou sadu nástrojů a způsob myšlení na vývoj fronty, který mě vzrušuje.
CSS proměnné již několik let klepají, ale nezdá se, že jsou v široké škále využití. S popularitou předprocesorů, jako je Sass, vývojáři frontend poškrábali tuto proměnlivou svědění už dávno.
Nejprve jsem byl nadšen CSS proměnnými v roce 2014 a od té doby jsem se ponořil do mé zájmové sféry. Jenom teď zvažuji, jak je dostanou do výrobních závodů, a ukážu vám, jak jednoduché a snadné je použít.
Vlastní vlastnost je deklarována jednoduchým způsobem: Potřebujete vlastnost, kterou chceme vytvořit, a na začátku přiložit dvě pomlčky. Ty mohou být deklarovány kdekoli, ale přidávat je k: root se zdá být v tomto okamžiku dobrým přístupem.
--my-reusable-value: 20px;Použití vlastnictví je také velmi jednoduché. Procházíme to prostřednictvím funkce var () a použijeme vlastnost, kterou jsme deklarovali výše.
padding: var(--my-reusable-value);Není to tak jednoduché a slavné?
Proměnné CSS jsou jednoduché a poměrně snadno si je zapamatovatelné. Největší výzva s proměnnými CSS (jako u většiny CSS) je znát správný čas a místo, kde je lze použít. Házení náhodně je jistým způsobem požáru, jak vytvořit nepořádek stylové háčky a s těmito proměnnými, které jsou hodnoceny laděním, se zřejmě stane obtížnějším.
Měly by se zvážit správné případy použití a strategie jejich používání, a proto by se měla zaměřit většina vašeho úsilí.
V následujícím příkladu vám ukážeme základní příklad toho, jak v současné době buduji reagující komponentu pomocí proměnných Sass. Poté vám ukážeme, jak lze s CSS proměnnými vylepšit způsobem, který není možný s předprocesorem. Jedná se o specifický případ použití, který se nevztahuje na všechny způsoby použití proměnných, ale ukazuje, jak lze proměnné CSS používat jinak.
Viz pero Proměnné CSS - odpověď na případ reakce bez proměnných CSS Adam Hughes ( @lostmybrain ) na CodePen .
Při používání nástroje Sass existuje několik různých metodik, které jsem zkoušel. Můj proud přejděte do verze je umísťování dotazů médií do bloků CSS, které chci změnit. Zde můžu použít proměnnou, standardní CSS, mixin nebo rozšíření pro úpravu tohoto prvku bez rozptýlení stylů komponenty všude.
Jeden problém s tímto je mít více mediálních dotazů a spoustu proměnných, které jsou příbuzné, ale ne. Mohl bych použít mapy pro proměnné, které by daly více organizace, ale myslím, že hlavní problém je, že používáme více proměnných pro definování jedné vlastnosti. To se cítí špatně.
Proměnné Sass jsou používány předem, což znamená, že musíme naplánovat všechny způsoby, jakým budeme je používat. Vyvíjejí se snadněji, ale technicky nám neposkytují žádné nové superpohony.
Viz pero CSS proměnné - citlivé použití Adam Hughes ( @lostmybrain ) na CodePen .
Proměnné CSS nemusí být deklarovány dopředu, jsou dynamické. To je velmi užitečné. Můžeme nyní podmíněně měnit proměnné odkudkoli a v určitých kontextech, jako jsou dotazy médií.
Poskytováním našich stylů dotazů médií hned od toho můžeme snížit množství mediálních dotazů rozptýlených pro citlivý styling. To také dává opravdu pěkný a čistý způsob, jak vidět obecné rozestupy a typografie styling v různých formátech.
Myslím, že citlivé návrhy a theming jsou dva vynikající případy použití pro proměnné CSS, ale existuje tolik možností.
Proměnné typu Sass a proměnné CSS jsou dvě různá zvířata, z nichž každá má vlastní pro a con.
Vzhledem k popularitě společnosti Sass a více programové povaze společnosti Sass se časem rozvíjely podrobnější organizační vzorce. Zvláště se mi líbí mapy Sass a kombinace podobných typových proměnných do map. Barvy, velikosti a zkratky pro cesty se zdají být populární volbou pro zahrnutí do map.
Vzhledem k poměrně menšímu využití proměnných CSS se osvědčené postupy ještě nevyvíjejí. Mapy a matice nejsou v CSS možné stejným způsobem, takže tyto nové organizační vzorce budou muset inovovat a problémy vyřešit jinak než Sass.
Proměnné CSS jsou dynamicky zpracovány prohlížečem v době běhu, zatímco proměnné Sass se používají při kompilaci CSS.
Toto je pro mě hlavní prodejní místo proměnných CSS. Bude zajímavé sledovat, jak lidé tuto funkci využívají v průběhu času a zda bude schopen plnit svůj potenciál.
Jsem osobně toho názoru, že čím víc věcí, které můžeme odstranit z Webpacka , Gulpa a cokoli nového - je-out-nyní , tím lépe. S zajímavými novými funkcemi prohlížeče se nemusíte spoléhat na kompilační a JavaScriptové rámce, aby se věci, které se vývojáři cítí, jsou zásadní. Rád bych odhadoval, že velké procento vývojářů frontend používají proměnné v CSS tak či onak, takže každý, kdo tuto funkci používá, vypadá jako rozumná věc. To znamená, že v kroku sestavení (což si myslím, že můžeme všichni souhlasit, je v dnešní době poměrně obrovské) a v konzistenci na webu je to ještě jedna věc.
Podpora vypadá pozoruhodně dobře s jednou výraznou výjimkou: IE 11. Většina moderních prohlížečů podporuje CSS Variables with Edge s několika chybami.
Při 78,11% je to vyšší než CSS Grid (v době psaní), ale podpora IE11 by mohla být problémem.
Myslím, že teď je čas. Že podpora IE11 se nebude zlepšovat a my víme, že z předchozích verzí systému Windows trvá dlouhá doba, než se někteří lidé mohou upgradovat. Podpora v moderních prohlížečích je skvělá, což znamená, že bychom měli hledat proměnné CSS a experimentovat s těmito možnostmi.
To neznamená, že bychom neměli zapomenout na naši odpovědnost za starší podporu prohlížeče. Pro starší prohlížeče byste měli zvážit základní záložní systém používající značku podpory nebo dokonce polyfill, a to ještě více, pokud je vaše skutečné využití stránek mnohem šikmojší než starší prohlížeče.
Je to vzrušující doba pro vývoj fronty a já nemohu čekat, až budu používat více těchto technologií na svých výrobních místech.