Med al den snak det sidste om endelig at kunne bruge CSS Grid, fik det mig til at tænke: Hvilke andre fantastiske CSS-funktioner kan jeg bruge nu? CSS Variables var den, der straks kom til at tænke på.
Det har været et stykke tid siden jeg har hørt noget om CSS Variables, og det tilføjer et helt nyt værktøjssæt og måde at tænke på frontend udvikling, der spænder mig.
CSS Variabler har banket rundt i et par år nu, men synes ikke at være i vid udstrækning. Med populariteten af forprocessorer som Sass, ridsede frontend-udviklere den variable kløe for længe siden.
Jeg blev først spændt af CSS Variables i omkring 2014 og siden da har de dyppet ind og ud af min interesse sfære. Jeg overvejer nu kun at få dem til produktionssteder, og jeg vil vise dig, hvor nemt og nemt de skal bruge.
At deklarere egenskaben er enkel: Vi behøver kun at oprette den egenskab, vi ønsker, og tilføje to bindestreger til begyndelsen af den. Disse kan deklareres hvor som helst, men tilføjer dem til: rod synes at være en god tilgang i øjeblikket.
--my-reusable-value: 20px;Brug af ejendommen er også ganske simpelt. Vi får adgang til det via var () -funktionen og bruger den ejendom, vi har erklæret ovenfor.
padding: var(--my-reusable-value);Er det ikke så simpelt og herlig?
CSS Variabler er ligetil at bruge og ret nemt at huske. Den største udfordring med CSS Variables (som med de fleste CSS) er at vide det rigtige tidspunkt og sted at bruge dem. Kaste dem i tilfældighed er en sikker brand måde at skabe et rod i et stylesheet og med disse variabler kastet i debugging vil sandsynligvis blive vanskeligere.
Korrekt brugssager og strategier for brug af dem bør overvejes, og det er her, hvor størstedelen af din indsats skal fokuseres.
I det følgende eksempel vil jeg vise dig et grundlæggende eksempel på, hvordan jeg i øjeblikket bygger en responsiv komponent ved hjælp af Sass-variabler. Så vil jeg vise dig, hvordan det kan forbedres med CSS Variables på en måde, der ikke er muligt med en forprocessor. Dette er et specifikt anvendelsessag, der ikke gælder for alle måder, som variabler anvendes, men viser, hvordan CSS-variabler kan anvendes forskelligt.
Se pennen CSS Variables - responsiv brug tilfælde uden CSS Variables af adam hughes @lostmybrain ) på CodePen .
Når du bruger Sass, er der et par forskellige metoder, jeg har prøvet. Min nuværende gå til version er at placere medieforespørgsler inden for CSS-blokkene, jeg vil ændre. Her kan jeg bruge en variabel, standard CSS, mixin eller en udvidelse til at ændre dette element uden at sprede stilerne til komponenten overalt.
Et problem med dette er at have flere medieforespørgsler og masser af variabler, som er slags relaterede men ikke. Jeg kunne bruge kort til variablerne, som ville give mere organisation, men jeg tror, at hovedproblemet er, at vi bruger en multiple variabler til at definere en egenskab. Dette føles bare forkert.
Sass-variabler bruges før tiden, hvilket betyder, at vi skal planlægge enhver måde, vi skal bruge dem. De gør det nemmere at udvikle, men teknisk giver os ingen nye supermagter.
Se pennen CSS Variabler - Respektive brug tilfælde af adam hughes @lostmybrain ) på CodePen .
CSS Variabler behøver ikke at blive erklæret foran, de er dynamiske. Dette er nyttigt på en meget anderledes måde. Vi kan nu betingelsesmæssigt ændre variabler fra hvor som helst og i bestemte sammenhænge som medieforespørgsler.
Ved at betjene vores medieforespørgselsformater lige fra, kan vi reducere mængden af medieforespørgsler spredt rundt for responsiv styling. Det giver også en rigtig flot og ren måde at se generel afstand og typografi styling på tværs af forskellige formater.
Jeg synes, at responsive designs og temaer er to gode brugssager til CSS Variables, men der er så mange muligheder.
Sass Variabler og CSS Variabler er to forskellige dyr, hver med deres egne pro og con.
På grund af Sass 'popularitet og den mere programmatiske karakter af Sass har der udviklet sig mere dybtgående organisationsmønstre over tid. Jeg kan især lide sass kort og kombinere lignende type variabler i kortene. Farver, størrelser og genveje til stier synes at være populære valg for at inkludere i kort.
På grund af den relativt mindre brug af CSS-variabler har de bedste metoder endnu ikke udviklet sig. Kort og arrayer er ikke mulige på samme måde i CSS, så disse nye organisationsmønstre skal innovative og løse problemerne på en anden måde end Sass.
CSS Variables håndteres dynamisk af browseren ved runtime, mens Sass Variables bruges, når CSS kompileres.
Dette er kerneforløbspunktet for CSS Variables for mig. Det vil være interessant at se, hvordan folk bruger denne funktion over tid, og om det vil leve op til sit potentiale.
Jeg er personligt af den opfattelse, at jo flere ting vi kan fjerne fra Webpack , Gulp og uanset-nye-rammer-er-ude-nu , jo bedre. At have interessante nye browserfunktioner betyder, at vi ikke behøver at stole på kompilering og JavaScript-rammer for at gøre ting udviklere føler er afgørende. Jeg ville risikere at gætte, at en høj procentdel af frontend-udviklere bruger variabler i deres CSS på en eller anden måde, så alle som bruger dette er en kernefunktion, som en fornuftig ting at gøre. Det betyder en mindre ting i byggetrin (som jeg tror vi alle kan være enige om, bliver temmelig enorm i disse dage) og mere konsistens på tværs af internettet.
Støtten ser bemærkelsesværdig godt ud med en strålende undtagelse: IE 11. De fleste moderne browsere understøtter CSS Variables with Edge med nogle få fejl.
Ved 78,11% er dette højere end CSS-net (på tidspunktet for skrivning), men at IE11-understøttelse kunne være et problem.
Jeg synes tiden er nu. At IE11-understøttelsen ikke bliver bedre, og vi ved fra tidligere versioner af Windows, at det tager lang tid for nogle mennesker at opgradere. Men støtten på tværs af moderne browsere er stor, hvilket betyder at vi skal kigge på CSS Variables og eksperimentere med mulighederne.
Det betyder ikke, at vi ikke bør glemme vores ansvar for ældre browser support dog. Et grundlæggende nedlukningssystem, der bruger et understøttelsesmærke, eller endda en polyfil, til ældre browsere, bør overvejes, endnu mere, hvis din faktiske brug af webstedet er meget mere skævt til ældre browsere.
Det er en spændende tid til udvikling af frontenden, og jeg kan ikke vente på at bruge flere af disse teknologier på mine produktionssteder.