Een introductie van componenten van 5 minuten in stijl

CSS is raar. Je kunt de basis ervan in 15 minuten leren. Maar het kan jaren duren voordat je een goede manier hebt gevonden om je stijlen te ordenen.

Een deel hiervan is alleen te wijten aan de eigenaardigheden van de taal zelf. Uit de doos is CSS vrij beperkt, zonder variabelen, loops of functies. Tegelijkertijd is het vrij tolerant dat je elementen, klassen, ID's of een combinatie hiervan kunt stijlen.

Bladen in chaotische stijl

Zoals je waarschijnlijk zelf hebt ervaren, is dit vaak een recept voor chaos. En terwijl preprocessors zoals SASS en MINDER veel nuttige functies toevoegen, doen ze niet echt veel om CSS-anarchie te stoppen.

Die organisatorische taak werd overgelaten aan methodologieën zoals BEM, die - hoewel nuttig - volledig optioneel zijn en niet kunnen worden afgedwongen op taal- of toolniveau.

De nieuwe golf van CSS

Een paar jaar vooruitspoelen en een nieuwe reeks op JavaScript gebaseerde tools proberen deze problemen op te lossen door hun manier van schrijven te wijzigen.

Styled Components is een van deze bibliotheken en heeft snel veel aandacht getrokken vanwege zijn mix van innovatie en vertrouwdheid. Dus als je React gebruikt (en als je dat niet doet, bekijk dan mijn JavaScript-studieplan en mijn intro voor React), is het zeker de moeite waard om dit nieuwe CSS-alternatief te bekijken.

Ik gebruikte het onlangs om mijn persoonlijke site opnieuw te ontwerpen en vandaag wilde ik een paar dingen delen die ik tijdens het proces heb geleerd.

Onderdelen, gestileerd

Het belangrijkste dat u moet weten over Styled Components is dat de naam vrij letterlijk moet worden genomen. U stileert niet langer HTML-elementen of componenten op basis van hun klasse of HTML-element:

Hallo wereld

h1.title {
  lettergrootte: 1,5em;
  kleur paars;
}

In plaats daarvan definieert u gestileerde componenten die hun eigen ingekapselde stijlen bezitten. Dan gebruik je deze vrij in je codebase:

gestileerd importeren uit 'gestileerde componenten';
const Titel = styled.h1`
  lettergrootte: 1,5em;
  kleur paars;
`;
 Hallo wereld 

Dit lijkt misschien een klein verschil en in feite lijken beide syntaxis erg op elkaar. Maar het belangrijkste verschil is dat stijlen nu deel uitmaken van hun component.

Met andere woorden, we zijn CSS-klassen kwijt als een tussenstap tussen het onderdeel en de stijlen.

Zoals stijlmaker componenten co-maker Max Stoiber zegt:

"Het basisidee van stijlcomponenten is om best practices af te dwingen door de koppeling tussen stijlen en componenten te verwijderen."

Complexiteit lossen

Dit lijkt in eerste instantie contra-intuïtief, omdat het hele punt van het gebruik van CSS in plaats van HTML-elementen direct te stileren (de tag onthouden?) Het ontkoppelen van stijlen en markeringen is door deze intermediaire klassenlaag te introduceren.

Maar die ontkoppeling zorgt ook voor veel complexiteit, en er is een argument te maken dat in vergelijking met CSS een "echte" programmeertaal zoals JavaScript veel beter is uitgerust om die complexiteit aan te kunnen.

Rekwisieten over klassen

In overeenstemming met deze no-klassen filosofie, maakt styled-componenten gebruik van rekwisieten boven klassen als het gaat om het aanpassen van het gedrag van een component. Dus in plaats van:

Hallo wereld

// wordt blauw
h1.title {
  lettergrootte: 1,5em;
  kleur paars;
  
  & .Primary {
    kleur blauw;
  }
}

Je zou schrijven:

const Titel = styled.h1`
  lettergrootte: 1,5em;
  kleur: $ {props => props.primary? 'blauw paars'};
`;
 Hello World  // wordt blauw

Zoals u ziet, kunt u met stijlcomponenten uw React-componenten opschonen door alle CSS- en HTML-gerelateerde implementatiedetails eruit te houden.

Dat gezegd hebbende, CSS met gestileerde componenten is nog steeds CSS. Dus dit soort dingen zijn ook volledig geldige (hoewel enigszins niet-idiomatische) code:

const Titel = styled.h1`
  lettergrootte: 1,5em;
  kleur paars;
  
  & .Primary {
    kleur blauw;
  }
`;
 Hallo wereld  // wordt blauw

Dit is een functie waarmee gestileerde componenten heel gemakkelijk te bereiken zijn: als je twijfelt, kun je altijd terugvallen op wat je weet!

Voorbehoud

Het is ook belangrijk om te vermelden dat stijlcomponenten nog steeds een jong project zijn en dat sommige functies nog niet volledig worden ondersteund. Als u bijvoorbeeld een onderliggende component van een bovenliggende stijl wilt stijlen, moet u voorlopig vertrouwen op het gebruik van CSS-klassen (althans totdat styled-components v2 uitkomt).

Er is ook nog geen "officiële" manier om uw CSS vooraf op de server weer te geven, hoewel het zeker mogelijk is door de stijlen handmatig te injecteren.

En het feit dat gestileerde componenten zijn eigen gerandomiseerde klassennamen genereert, kan het moeilijk maken om de ontwikkeltools van uw browser te gebruiken om erachter te komen waar uw stijlen oorspronkelijk zijn gedefinieerd.

Maar wat erg bemoedigend is, is dat het kernteam met gestileerde componenten zich bewust is van al deze problemen en er hard aan werkt om ze een voor een op te lossen. Versie 2 komt binnenkort en ik kijk er echt naar uit!

Leer meer

Mijn doel hier is niet om in detail uit te leggen hoe stijlcomponenten werken, maar meer om je een kleine glimp te geven zodat je zelf kunt beslissen of het de moeite waard is om te bekijken.

Als het me is gelukt je nieuwsgierig te maken, hier enkele plaatsen waar je meer kunt leren over stijlcomponenten:

  • Max Stoiber schreef onlangs een artikel over de reden voor stijlcomponenten voor Smashing Magazine.
  • De repo van de stijlcomponenten zelf heeft een uitgebreide documentatie.
  • Dit artikel van Jamie Dixon schetst een paar voordelen van het overschakelen naar stijlcomponenten.
  • Als je meer wilt weten over hoe de bibliotheek daadwerkelijk is geïmplementeerd, lees dan dit artikel van Max.

En als je nog verder wilt gaan, kun je ook kijken naar Glamour, een andere kijk op new-wave CSS!

Tijd voor zelfpromotie: we zijn op zoek naar open-sourcebijdragers om te helpen met Nova, de eenvoudigste manier om volledige React & GraphQL-apps te maken, compleet met formulieren, gegevens laden en gebruikersaccounts. We gebruiken nog geen stijlcomponenten, maar u kunt de eerste zijn om ze te implementeren!