Z ostatnimi rozmowami na temat możliwości używania CSS Grid, zastanawiałem się: jakie inne niesamowite funkcje CSS mogę teraz użyć? Zmienne CSS to te, które natychmiast pojawiły się w umyśle.
Minęło trochę czasu, odkąd usłyszałem cokolwiek o Zmiennych CSS i dodaje on cały nowy zestaw narzędzi i sposób myślenia do przodu, który mnie podnieca.
Zmienne CSS od kilku lat zapadają w pamięć, ale nie wydają się być w szerokim użyciu. Dzięki popularności preprocesorów takich jak Sass, twórcy frontendów podrapali tę zmienną swędzenie dawno temu.
Byłem podekscytowany zmiennymi CSS w okolicach 2014 roku i od tego czasu zaczęły mnie one opuszczać. Zastanawiam się tylko nad przeniesieniem ich do zakładów produkcyjnych i pokażę ci, jakie są proste i łatwe w użyciu.
Deklarowanie właściwości niestandardowej jest proste: potrzebujemy tylko utworzyć właściwość, którą chcemy i dołączyć dwa kreski na jej początek. Można je zadeklarować w dowolnym miejscu, ale dodając je: root wydaje się być w tej chwili dobrym podejściem.
--my-reusable-value: 20px;Korzystanie z nieruchomości jest również bardzo proste. Uzyskujemy do niego dostęp za pomocą funkcji var () i używamy właściwości, którą zadeklarowaliśmy powyżej.
padding: var(--my-reusable-value);Czy to nie jest takie proste i wspaniałe?
Zmienne CSS są proste w użyciu i dość łatwe do zapamiętania. Największym wyzwaniem ze zmiennymi CSS (podobnie jak w przypadku większości CSS) jest znajomość odpowiedniego czasu i miejsca ich użycia. Rzucanie ich w przypadkowo jest pewnym sposobem na stworzenie bałaganu w arkuszu stylów, a zmienne te, które są rzucane podczas debugowania, prawdopodobnie staną się trudniejsze.
Należy wziąć pod uwagę odpowiednie przypadki użycia i strategie ich stosowania, i to w tym miejscu należy skoncentrować większość wysiłków.
W poniższym przykładzie pokażę wam podstawowy przykład tego, jak obecnie buduję responsywny komponent przy użyciu zmiennych Sass. Następnie pokażę, jak można to ulepszyć za pomocą zmiennych CSS w sposób, który nie jest możliwy w przypadku preprocesora. Jest to specyficzny przypadek użycia, który nie ma zastosowania do wszystkich zmiennych używanych, ale pokazuje, w jaki sposób zmienne CSS mogą być używane w różny sposób.
Zobacz pióro Zmienne CSS - responsywny przypadek użycia bez zmiennych CSS Adam Hughes ( @lostmybrain ) na CodePen .
Podczas korzystania z Sassa jest kilka metod, które wypróbowałem. Moje obecne przejście do wersji polega na umieszczaniu zapytań o media w blokach CSS, które chcę zmienić. Tutaj mogę użyć zmiennej, standardowego CSS, mixin lub rozszerzenia, aby zmodyfikować ten element bez rozpraszania stylów dla komponentu wszędzie.
Jednym z problemów jest posiadanie wielu zapytań o media i wiele zmiennych, które są ze sobą powiązane, ale nie. Mogłabym użyć map dla zmiennych, które dałyby więcej organizacji, ale myślę, że głównym problemem jest to, że używamy wielu zmiennych do zdefiniowania jednej właściwości. To po prostu źle się dzieje.
Zmienne Sass są używane z wyprzedzeniem, co oznacza, że musimy zaplanować każdy sposób, w jaki zamierzamy z nich korzystać. Ułatwiają rozwój, ale technicznie nie dostarczają nam nowych supermocy.
Zobacz pióro Zmienne CSS - responsywny przypadek użycia Adam Hughes ( @lostmybrain ) na CodePen .
Zmienne CSS nie muszą być deklarowane z góry, są dynamiczne. Jest to przydatne w bardzo różny sposób. Możemy teraz warunkowo zmieniać zmienne z dowolnego miejsca i w określonych kontekstach, takich jak zapytania o media.
Obsługując nasze style zapytań o media, od razu możemy zredukować liczbę zapytań o media rozsianych po stylach responsywnych. Daje to również naprawdę przyjemny i czysty sposób na przeglądanie ogólnych stylów i stylów typografii w różnych formatach.
Myślę, że responsywne projekty i motywy to dwa doskonałe przykłady użycia zmiennych CSS, ale jest tak wiele możliwości.
Zmienne Sass i zmienne CSS to dwie różne bestie, każda z własną wersją pro i con.
Ze względu na popularność Sass i bardziej programistyczną naturę Sassu, bardziej szczegółowe wzorce organizacji ewoluowały z czasem. Szczególnie podoba mi się mapowanie i łączenie zmiennych podobnych typów w mapy. Kolory, rozmiary i skróty do ścieżek wydają się być popularnym wyborem do uwzględnienia w mapach.
Ze względu na stosunkowo mniejsze użycie Zmiennych CSS, najlepsze praktyki muszą jeszcze ewoluować. Mapy i tablice nie są możliwe w taki sam sposób w CSS, więc te nowe wzorce organizacyjne będą musiały być innowacyjne i rozwiązać problemy w inny sposób niż Sass.
Zmienne CSS są obsługiwane dynamicznie przez przeglądarkę w czasie wykonywania, podczas gdy zmienne Sass są używane podczas kompilowania CSS.
To jest główny punkt sprzedaży dla zmiennych CSS. Ciekawie będzie zobaczyć, jak ludzie używają tej funkcji w czasie i czy spełni ona jej potencjał.
Osobiście uważam, że im więcej rzeczy możemy usunąć z Webpacka , Gulpa i cokolwiek-nowej-struktury-jest-obecnie-teraz , tym lepiej. Posiadanie ciekawych nowych funkcji przeglądarki oznacza, że nie musimy polegać na kompilacjach i frameworkach JavaScript, aby robić rzeczy, które zdaniem deweloperów są niezbędne. Zaryzykowałbym przypuszczenie, że wysoki odsetek programistów frontendowych używa zmiennych w ich CSS w taki czy inny sposób, więc każdy, kto używa tej podstawowej funkcji, wydaje się rozsądny. Oznacza to, że jedna rzecz w kroku kompilacji (która, jak sądzę, wszyscy możemy się zgodzić, jest obecnie bardzo duża) i większa spójność w sieci.
Wsparcie wygląda wyjątkowo dobrze z jednym rażącym wyjątkiem: IE 11. Większość współczesnych przeglądarek obsługuje zmienne CSS, a Edge ma kilka błędów.
Przy 78,11% jest to wyższe niż CSS Grid (w chwili pisania tego tekstu), ale wsparcie dla IE11 może być problemem.
Myślę, że teraz jest czas. To, że obsługa IE11 nie będzie lepsza, i wiemy z poprzednich wersji Windows, że aktualizowanie niektórych osób zajmuje dużo czasu. Obsługa w nowoczesnych przeglądarkach jest świetna, co oznacza, że powinniśmy szukać zmiennych CSS i eksperymentować z możliwościami.
Nie oznacza to, że nie powinniśmy zapominać o naszej odpowiedzialności za starsze wsparcie dla przeglądarki. Podstawowy system awaryjny z użyciem tagu support, a nawet polyfill, powinien być brany pod uwagę w starszych przeglądarkach, tym bardziej jeśli rzeczywiste użycie witryny jest o wiele bardziej przekrzywione dla starszych przeglądarek.
To ekscytujący czas na rozwój frontonu, a ja nie mogę się doczekać, aby wykorzystać więcej tych technologii w moich zakładach produkcyjnych.