Inhoud
- Componenten
- Gooi je bouwsysteem weg
- Een wankele start
- Nabewerking om uit het probleem te komen
- Over mythe en herwerking
- Een laatste woord
Het valt me op dat er nog steeds CSS-puristen zijn die niet geloven dat ze een CSS-processor nodig hebben. Misschien ben jij een van hen? Misschien heb je al een proces uitgetekend waar je helemaal blij mee bent. Of misschien staat u aan de andere kant van die medaille: u gebruikt CSS-preprocessors (zoals Sass of Stylus) en ziet geen noodzaak voor native / browser-verwerkte CSS-variabelen. In dit artikel hoop ik de argumenten voor beide partijen te ontkrachten.
Componenten
Als je een applicatie thematiseert, je eigen aangepaste componenten maakt of zelfs componenten van anderen gebruikt, hoop je waarschijnlijk dat je deze modules een beetje kunt aanpassen zonder de originele code te hoeven wijzigen.
Laten we zeggen dat u een rastersysteem van Bootstrap gebruikt, maar de ontwerper heeft iets andere gootbreedtes in het raster verwerkt. Op dit moment heb je grofweg drie keuzes:
- Wijzig de Bootstrap CSS-code (waardoor toekomstige upgrades vrijwel onmogelijk worden zonder significante analyse)
- Overtuig de ontwerper om het raster aan te passen aan Bootstrap (of probeer het er langs te sluipen)
- Voeg alle onbewerkte Bootstrap Sass toe, neem het op in uw build-systeem en voeg uw eigen aangepaste variabelen toe
De derde keuze is voor velen de weg van de minste weerstand - maar gaandeweg wordt je build-systeem groter, langzamer en afhankelijker van het feit dat het hele team alles begrijpt wat er gaande is. (Hey, niets is perfect, toch?)
Gooi je bouwsysteem weg
Nu we het probleem een beetje beter begrijpen, kunnen we beginnen te praten over waar CSS-variabelen zullen schitteren. Laten we eerst eens kijken naar de syntaxis van de CSS-variabele:
: root {--gutter-width: 1rem; }
Hier heb ik een variabele met de naam gedefinieerd breedte van de goot en zet het op 1rem. U zult zien dat de selector die ik heb gekozen, is :wortel wat in feite gelijk staat aan ’HTML’ (of het hoofd-SVG-knooppunt). Ik gebruik het om een heel belangrijk aspect van CSS-variabelen te laten zien: de cascade. Ja, variabelen kunnen net als eigenschappen door de boom heen lopen!
Dus als ik een element elders in mijn stylesheet selecteer:
.my-module {margin-right: var (- goot-breedte); }
De breedte van de goot variabele cascades naar beneden vanaf het root-element. Stel dat ik de goot slechts in een bepaald gebied wil aanpassen? Gemakkelijk!
.my-module {--gutter-width: .5rem; margin-right: var (- goot-breedte); }
Ineens heb je geen complex bouwsysteem meer nodig. Strooi er gewoon een paar eenvoudige variabelen over en pas ze naar hartenlust aan. Het samenvoegen van een reeks wijzigingen is nog eenvoudiger als u zich realiseert dat elke browser die variabelen ondersteunt al heel lang CSS-calculatie heeft:
: root {--gutter-width: .5rem; } .col {--column-breedte: 4rem; width: calc (var (- kolombreedte) - var (- gootbreedte))}
In het bovenstaande voorbeeld hebben we de breedte van de .col selector door af te trekken kolombreedte.
Een wankele start
Zoals veel nieuwe functies van CSS, is het pad om naar de browser en gebruikers te worden verzonden een lang, uitgesponnen, ingewikkeld proces. CSS-variabelen zijn geen uitzondering - de syntaxis is al een aantal keren drastisch veranderd en op het moment van schrijven heeft Google Chrome de functie volledig verwijderd totdat alles tot rust is gekomen.
Firefox 31 is momenteel de enige browser die wordt geleverd met native CSS-variabelen. Maar het komt wel goed. In dit artikel laat ik u zien hoe u vandaag aan de slag kunt met CSS-variabelen.
Nabewerking om uit het probleem te komen
Met zoveel disclaimers over welke browsers CSS-variabelen ondersteunen, denk je waarschijnlijk: "Geweldig, dit is iets dat ik de afgelopen vijf jaar niet kan gebruiken." Hoewel we variabelen niet precies kunnen polyfill, kunnen we op zijn minst bestaande tooling gebruiken om te doen alsof variabelen overal volledig worden ondersteund.
In plaats van te vertrouwen op het gebruik van een preprocessor (en dus de syntaxis van de preprocessor voor variabelen), kunnen we iets nieuws proberen: een postprocessor. Een postprocessor verschilt alleen van een preprocessor in naam. Postprocessors zijn niet bedoeld om CSS uit te breiden: in feite is het de bedoeling dat u codeert alsof u recentelijk uitgebrachte CSS-standaarden gebruikt (of edge, in het geval van variabelen), en het vult de lege plekken in.
Over mythe en herwerking
Mythe (door Ian Storm Taylor) is een postprocessor die een reeks door herwerkte plug-ins samenbrengt. Het biedt calc, variabelen, kleurmenging en CSS-browserleveranciersvoorvoegsels (dankzij het ongelooflijke autoprefixer-project).
: root {--column-width: 3rem; --kolom-goot: .5rem; } .column {min-breedte: var (- kolombreedte); }
Plots kun je beginnen te doen alsof het al 2019 is. Je hoeft niet te werken aan wat er in elke browser wordt ondersteund: je schrijft de code maar één keer.
Aan de slag gaan is ook gemakkelijk, aangezien Myth een NPM-pakket is. Nadat u de installatie heeft uitgevoerd, hoeft u alleen maar het volgende op de opdrachtregel uit te voeren:
mythe futuristic.css clever.css
Nu is uw clever.css-bestand klaar voor de browser.
Een laatste woord
Ik ben niet alleen enthousiast over de toekomst van CSS, maar ook vooral enthousiast over waar CSS-variabelen ontwerpers en ontwikkelaars naartoe zullen leiden - hopelijk naar een eenvoudiger, begrijpelijker, lichtere toolketen waar het delen van code absoluut triviaal is!
Ben Schwarz is een onafhankelijke webdude uit Melbourne. Hij is een teamlid van CSSConfAU, JSConf en Bower. Dit is een uitgebreide versie van een artikel uit netmagazine 259.
