CSS i JavaScript: Fremtiden for komponentbaseret styling

Billede af @jonathanzwhite

Ved at vedtage inline-stilarter kan vi få alle de programmatiske råd til JavaScript. Dette giver os fordelene ved noget som en CSS-forprocessor (variabler, mixins og funktioner). Det løser også en masse af de problemer, CSS har, såsom global navnepasning og stylingkonflikter.

For en dyb dykning i de problemer, som CSS i JavaScript løser, kan du tjekke den berømte præsentation: React CSS in JS. For en casestudie om de præstationsforbedringer, du får fra Aphrodite, kan du læse Inline CSS på Khan Academy: Aphrodite. Hvis du vil lære mere om CSS i JavaScript-praksis, kan du tjekke Airbnb's styleguide.

Derudover bruger vi inline JavaScript-stilarter til at opbygge komponenter til at adressere nogle af de grundlæggende elementer i design, som jeg dækkede i en af ​​mine tidligere artikler: Før du kan mestre design, skal du først mestre de grundlæggende elementer.

Et motiverende eksempel

Lad os starte med et simpelt eksempel: oprette og style en knap.

Normalt vil komponenten og dets tilknyttede stilarter gå i den samme fil: Button and ButtonStyles. Dette skyldes, at de falder ind under den samme bekymring: udsigten. For dette eksempel opdelte jeg koden i flere gists for at gøre den mere fordøjelig.

Her er knapkomponenten:

Dette er intet uventet - bare en statsløs React-komponent. Hvor Afrodite kommer i spil er i egenskaben className. Funktionen css indtager et stilartsobjekt og konverterer det til css. Stilobjektet oprettes med Aphrodites funktion StyleSheet.create ({...}). Du kan se output fra StyleSheet.create ({...}) med denne Aphrodite legeplads.

Her er knappen stilark:

En af fordelene ved Afrodite er, at migration er ligetil og indlæringskurven er lav. Egenskaber som grænseradius bliver borderRadius og værdier bliver strenge. Pseudo-vælgere, medieforespørgsler og definitioner af font fungerer alle. Derudover tilføjes leverandørpræfikser automatisk.

Her er resultatet:

En af fordelene ved Afrodite er, at migration er ligetil og indlæringskurven er lav.

Med dette eksempel i tankerne, lad os se på, hvordan vi kan bruge Aphrodite til at opbygge et grundlæggende visuelt designsystem med fokus på følgende designfundament: typografi og afstand.

Grundlæggende №1 —Typografi

Lad os starte med typografi, et grundlæggende grundlag for design. Det første trin er at definere typografikonstanter. Og i modsætning til Sass eller Less, kan konstanter for Aphrodite gå i en JavaScript- eller JSON-fil.

Definer typografikonstanter

Når du opretter konstanter, skal du bruge semantiske navne til dine variabler. I stedet for at navngive en af ​​dine fontstørrelser h2, skal du f.eks. Bruge et navn som displayLarge, der beskriver dens rolle. Ligeledes for fontvægte, i stedet for at navngive en af ​​dine vægte 600, skal du give den et navn som halvkugle for at beskrive dens virkning.

Det er vigtigt at få værdierne rigtige for variabler som fontstørrelser og linjehøjder. Dette skyldes, at de direkte påvirker den vertikale rytme i et design. Lodret rytme er et koncept, der hjælper dig med at opnå en ensartet afstand mellem elementerne.

For mere om vertikal rytme kan du læse denne artikel: Hvorfor er lodret rytme en vigtig typografipraksis?

Brug en lommeregner til at bestemme linjehøjder

Der ligger en videnskab bagved at vælge værdierne for dine linjehøjder og fontstørrelser. Vi kan bruge matematiske forhold til at generere et sæt kandidater med potentielle størrelser. For et par uger siden skrev jeg en artikel om metodikken: Typografi kan gøre eller ødelægge dit design: en proces til valg af type. Til bestemmelse af fontstørrelser bruger du Modular Scale. Til bestemmelse af linjehøjder kan du bruge denne lodrette rytmeberegner.

Definer en overskriftskomponent

Efter at have defineret vores typografikonstanter, er det næste trin at oprette en komponent til at forbruge værdierne. Målet med komponenten er at håndhæve konsistensen i design og implementering af overskrifter på tværs af codebase.

Overskriftskomponenten er en statsløs funktion, der tager et tag som en egenskab og returnerer tagget med det tilhørende format. Dette er muligt, fordi vi definerede tagmappinger tidligere i konstanten-filen.

I bunden af ​​komponentfilen definerer vi vores stilobjekt. Det er her vi bruger typografikonstanterne.

Og det er sådan, at overskriftskomponenten ville blive brugt:

Med denne tilgang reducerer vi uventet variation i vores typesystem. Vi undgår falden i hundrede forskellige skrifttypestørrelser ved at fjerne behovet for globale stilarter og standardisere overskrifter på tværs af kodebasen. Derudover kan denne fremgangsmåde, vi tog til opbygning af overskriftskomponenten, anvendes til at opbygge en tekstkomponent til kropskopi.

Grundlæggende №2 - Afstand

Afstand styrer både lodret og vandret rytme i design. Det gør afstanden afgørende for etablering af et visuelt designsystem. Ligesom i typografisektionen er det første trin til adressering af afstand at definere afstandskonstanter.

Definer afstandskonstanter

Når vi definerer afstandskonstanter for marginalerne mellem elementerne, kan vi anvende en matematisk tilgang. Ved hjælp af en afstandsfaktorkonstant kan vi generere et sæt afstande baseret på en fælles faktor. Denne tilgang sikrer, at vi har en logisk og konsekvent afstand mellem elementerne.

Eksemplet ovenfor bruger en lineær skala, en til tretten. Eksperimenter dog med forskellige skalaer og forhold. Design kræver forskellige skalaer baseret på deres formål, deres målgruppe og de enheder, de målretter mod. Som et eksempel er her de første seks beregnede afstande ved hjælp af det gyldne forhold med en afstandsfaktor på otte.

Golden Ratio (1: 1.618)
8,0 x (1.618 ^ 0) = 8.000
8,0 x (1,618 ^ 1) = 12,94
8,0 x (1,618 ^ 2) = 20,94
8,0 x (1,618 ^ 3) = 33,89
8,0 x (1,618 ^ 4) = 54,82
8,0 x (1,618 ^ 5) = 88,71

Sådan ser afstandskalaen ud i kode. Jeg tilføjede en hjælperfunktion til at håndtere beregningen og afrunde output til dens nærmeste pixelværdi.

Efter at have defineret vores afstandskonstanter, kan vi bruge dem til at tilføje marginer til elementer i vores design. En fremgangsmåde, vi kan tage, er at importere afstandskonstanterne og forbruge dem i komponenter.

Lad os f.eks. Tilføje en marginBottom til knapkomponenten.

Dette fungerer i de fleste scenarier. Hvad sker der dog, hvis vi vil ændre egenskaben marginBottom på knappen baseret på hvor knappen er placeret?

En måde at opnå variable margener er at tilsidesætte marginstilen fra den konsumerende overordnede komponent. En alternativ fremgangsmåde er at oprette en afstandskomponent til at kontrollere de lodrette marginer på elementerne.

Ved hjælp af denne tilgang kan vi fjerne ansvaret for at indstille margener fra barnekomponenten og ind i den overordnede komponent. På denne måde bliver barnekomponenten layout agnostisk, og kræver ikke nogen viden om, hvor man skal placere sig selv i forhold til andre elementer.

Dette fungerer, fordi komponenter som knapper, indgange og kort muligvis har brug for forskellige margener. F.eks. Kan en knap i en form muligvis have større margener end en knap i en navigationslinje. Forbehold er, at hvis en komponent altid har ensartede margener, ville det være mere fornuftigt at håndtere marginer inden for komponenten.

Du har måske også bemærket, at eksemplerne kun bruger marginBottom. Dette skyldes, at hvis du definerer alle dine lodrette marginer i en retning, kan du undgå sammenbrudte margener og holde styr på den lodrette rytme i dit design. Du kan læse mere om dette i Harry Roberts artikel, Enkeltretning marginalerklæringer.

På en sidste note kan du også bruge afstandskonstanterne, du definerede som polstring.

Ved at bruge de samme afstandskonstanter til både marginer og polstring kan du opnå mere visuel konsistens i dit design.

Sådan ser resultatet ud:

Ved at bruge afstandskonstanter til dine marginer og polstring kan du opnå mere visuel konsistens.

Nu hvor du har fat på CSS i JavaScript, skal du gå ud og eksperimentere. Prøv at integrere inline JavaScript-stilarter i dit næste projekt. Jeg tror, ​​du vil sætte pris på at være i stand til at arbejde i en enkelt kontekst for at håndtere al din styling og se bekymringer.

Hvad er CSS og JavaScript, hvad er der nogle nye udviklinger, som du er begejstret for? Personligt er jeg begejstret over async / afventer. Efterlad en note, eller send mig en tweet på Twitter.

Du kan finde mig på Medium, hvor jeg udgiver hver uge. Eller du kan følge mig på Twitter, hvor jeg poster ikke-sensiske ramblings om design, front-end-udvikling og virtual reality.

P. S. Hvis du nød denne artikel, ville det betyde meget, hvis du klikkede på og delte med venner.