Med allt prat om att äntligen kunna använda CSS Grid, fick det mig att tänka: Vilka andra fantastiska CSS-funktioner kan jag använda nu? CSS-variabler var den som omedelbart sprang i åtanke.
Det har varit ett tag sedan jag har hört någonting om CSS Variables och det lägger till en helt ny verktygssats och sätt att tänka på frontändringsutveckling som exciterar mig.
CSS-variabler har slagit på i några år nu, men verkar inte vara i stor utsträckning. Med populariteten hos förprocessorer som Sass, skrapade frontendutvecklare den variabla klåden för länge sedan.
Jag var först upphetsad av CSS Variables i kring 2014 och sedan dess har de doppat in och ut ur min intresse sfär. Jag överväger bara att få dem till produktionsplatser och jag ska visa dig hur enkelt och enkelt de ska använda.
Att deklarera den anpassade egendomen är enkel: Vi behöver bara skapa den egendom vi vill ha och lägga till två streck i början av den. Dessa kan deklareras var som helst men lägger till dem: root verkar vara ett bra tillvägagångssätt just nu.
--my-reusable-value: 20px;Att använda fastigheten är också ganska enkel. Vi får tillgång till den via var () -funktionen och använda den egendom som vi deklarerade ovan.
padding: var(--my-reusable-value);Är det inte så enkelt och härligt?
CSS-variabler är enkla att använda och ganska lätt att komma ihåg. Den största utmaningen med CSS-variabler (som med de flesta CSS) är att veta rätt tid och plats att använda dem. Att kasta dem i slumpmässigt är ett säkert brandväg för att skapa en röra av ett stilark och med dessa variabler som kastas i felsökning kommer det troligtvis att bli svårare.
Korrekta användningsfall och strategier för att använda dem bör övervägas och det är här de flesta ansträngningar bör fokuseras.
I det följande exemplet kommer jag att visa dig ett grundläggande exempel på hur jag för närvarande bygger en responsiv komponent med Sass-variabler. Då ska jag visa dig hur det kan förbättras med CSS-variabler på ett sätt som inte är möjligt med en förbehandlare. Detta är ett specifikt användningsfall som inte är tillämpligt på alla sätt variabler används men visar hur CSS-variabler kan användas annorlunda.
Se pennan CSS-variabler - responsivt användningsfall utan CSS-variabler av Adam Hughes ( @lostmybrain ) på CodePen .
När du använder Sass finns det några olika metoder som jag har provat. Min nuvarande gå till versionen ställer mediafrågor i CSS-blocken som jag vill ändra. Här kan jag använda en variabel, standard CSS, mixin eller en utvidgning för att ändra detta element utan att sprida stilerna för komponenten överallt.
Ett problem med detta har flera mediafrågor och många variabler som är typ av relaterade men inte. Jag kunde använda kartor för variablerna som skulle ge mer organisation men jag tror att huvudproblemet är att vi använder flera variabler för att definiera en egenskap. Det här känns bara fel.
Sass-variabler används före tid vilket betyder att vi måste planera alla sätt vi ska använda dem. De gör det lättare att utveckla men tekniskt ger oss inga nya supermakter.
Se pennan CSS-variabler - responsivt användningsfall av Adam Hughes ( @lostmybrain ) på CodePen .
CSS-variabler behöver inte deklareras framåt, de är dynamiska. Detta är användbart på ett helt annat sätt. Vi kan nu villkorligt ändra variabler från var som helst och i specifika sammanhang som mediafrågor.
Genom att betjäna våra mediesökstilar direkt uppifrån kan vi minska mängden mediefrågor utspridda för responsiv styling. Det ger också ett riktigt fint och rent sätt att se generell avstånd och typografi styling över olika format.
Jag tycker att lyhörda mönster och teman är två utmärkta användningsfall för CSS-variabler men det finns så många möjligheter.
Sass-variabler och CSS-variabler är två olika djur, var och en med egna proffs och con s.
På grund av Sasss popularitet och Sasss mer programmatiska karaktär har de djupare organisationsmönstren utvecklats över tiden. Jag gillar särskilt sass kartor och kombinerar liknande typvariabler i kartorna. Färger, storlekar och genvägar för vägar verkar vara populära val för att inkludera i kartor.
På grund av den relativt mindre användningen av CSS-variabler har de bästa metoderna ännu inte utvecklats. Kartor och arrays är inte möjliga på samma sätt i CSS, så dessa nya organisationsmönster måste innovativa och lösa problemen på ett annat sätt än Sass.
CSS-variabler hanteras dynamiskt av webbläsaren vid körning medan Sass-variabler används när CSS sammanställs.
Detta är kärnförsäljningspunkten för CSS-variabler för mig. Det blir intressant att se hur människor använder den här funktionen över tid och om det kommer att leva upp till sin potential.
Jag är personligen av den uppfattningen att ju fler saker vi kan ta bort från Webpack , Gulp och what-new-framework-is-out-nu , desto bättre. Att ha intressanta nya webbläsarfunktioner innebär att vi inte behöver förlita oss på kompilering och JavaScript-ramar för att göra saker som utvecklare anser är nödvändiga. Jag skulle riskera en gissning att en stor andel av frontendutvecklare använder variabler i deras CSS på ett eller annat sätt, så alla som använder detta är en kärnfunktion som en förnuftig sak att göra. Det betyder att en mindre sak i byggnadssteget (som jag tror att vi alla kan hålla med är att bli ganska enorm idag) och mer konsistens över hela webben.
Stödet ser fantastiskt bra ut med ett skarpt undantag: IE 11. De flesta moderna webbläsare stöder CSS-variabler med Edge med några buggar.
Vid 78,11% är detta högre än CSS-nätet (vid skrivandet) men att IE11-stöd skulle kunna vara ett problem.
Jag tycker att tiden är nu. Att IE11-supporten inte kommer att bli bättre, och vi vet från tidigare versioner av Windows att det tar lång tid för vissa människor att uppgradera. Men stödet över moderna webbläsare är bra vilket innebär att vi ska titta på CSS-variabler och experimentera med möjligheterna.
Det betyder inte att vi inte bör glömma bort vårt ansvar för äldre webbläsarstöd. Ett grundläggande fallback-system med hjälp av en support-tagg, eller till och med en polyfil, för äldre webbläsare bör övervägas, ännu mer om din faktiska webbplatsanvändning är mycket mer skevad mot äldre webbläsare.
Det är en spännande tid för utveckling av fronten, och jag kan inte vänta med att använda mer av dessa teknologier på mina produktionsplatser.