En 5-minuters introduktion till utformade komponenter

CSS är konstigt. Du kan lära dig grunderna i det på 15 minuter. Men det kan ta år innan du räknar ut ett bra sätt att organisera dina stilar.

En del av detta beror bara på själva språket. Ut ur rutan är CSS ganska begränsat, utan variabler, slingor eller funktioner. Samtidigt är det ganska tillåtet att du kan utforma element, klasser, ID eller någon kombination av dessa.

Kaotiska stilark

Som du antagligen har upplevt för dig själv är detta ofta ett recept för kaos. Och medan förbehandlare som SASS och LESS lägger till många användbara funktioner, gör de inte riktigt mycket för att stoppa CSS-anarki.

Det organisatoriska jobbet överlämnades till metoder som BEM, som - även om det är användbart - är helt valfritt och inte kan verkställas på språk- eller verktygsnivå.

Den nya vågen av CSS

Spola fram ett par år och en ny våg av JavaScript-baserade verktyg försöker lösa dessa problem i deras rot genom att ändra hur du skriver CSS.

Styled Components är ett av dessa bibliotek, och det har snabbt väckt mycket uppmärksamhet på grund av dess blandning av innovation och kännedom. Så om du använder React (och om du inte gör det, kolla in min JavaScript-studieplan och min introduktion till React), är det definitivt värt att titta på det här nya CSS-alternativet.

Jag använde den nyligen för att göra om min personliga webbplats, och idag ville jag dela några saker jag lärde mig i processen.

Komponenter, Styled

Det viktigaste du behöver förstå om Styled Components är att dess namn ska tas helt bokstavligen. Du utformar inte längre HTML-element eller komponenter baserat på deras klass- eller HTML-element:

Hello World

h1.title {
  typstorlek: 1,5em;
  färg: lila;
}

Istället definierar du utformade komponenter som har sina egna inkapslade stilar. Sedan använder du dessa fritt i hela din kodbas:

importera stil från 'stilkomponenter';
const Titel = styled.h1`
  typstorlek: 1,5em;
  färg: lila;
';
 Hello World 

Detta kan verka som en mindre skillnad, och i själva verket är båda syntaxerna mycket lika. Men de viktigaste skillnaden är att stilar nu är en del av deras komponent.

Med andra ord, vi tar bort CSS-klasser som ett mellansteg mellan komponenten och dess stilar.

Som utformade komponenter säger medskaparen Max Stoiber:

"Grundidén med utformade komponenter är att upprätthålla bästa praxis genom att ta bort kartläggningen mellan stilar och komponenter."

Avlastningskomplexitet

Detta kommer att verka mot intuitivt till en början, eftersom hela poängen med att använda CSS istället för att direkt utforma HTML-element (kom ihåg -taggen?) Är att avkoppla stilar och markering genom att införa detta mellanliggande klasslager.

Men den frikopplingen skapar också mycket komplexitet, och det finns ett argument som kan göras att jämfört med CSS är ett "riktigt" programmeringsspråk som JavaScript mycket bättre utrustat för att hantera den komplexiteten.

Rekvisita över klasser

I linje med denna icke-klassen filosofi, använder styled-komponenter rekvisita över klasser när det gäller att anpassa beteendet hos en komponent. Så istället för:

Hello World

// kommer att vara blå
h1.title {
  typstorlek: 1,5em;
  färg: lila;
  
  &.primär{
    färgen blå;
  }
}

Du skulle skriva:

const Titel = styled.h1`
  typstorlek: 1,5em;
  färg: $ {props => props.primary? 'blå': 'lila'};
';
 Hello World  // blir blå

Som du kan se, med stylade komponenter kan du städa upp dina React-komponenter genom att hålla alla CSS- och HTML-relaterade implementeringsinformation från dem.

Med det sagt är CSS med stilkomponenter fortfarande CSS. Så saker som detta är också helt giltiga (även om de är lite icke-idiomatiska):

const Titel = styled.h1`
  typstorlek: 1,5em;
  färg: lila;
  
  &.primär{
    färgen blå;
  }
';
 Hello World  // kommer att vara blå

Detta är en funktion som gör utformade komponenter väldigt enkla att komma in i: när det tvivlar kan du alltid falla tillbaka till det du vet!

förbehåll

Det är också viktigt att nämna att utformade komponenter fortfarande är ett ungt projekt och att vissa funktioner ännu inte stöds fullt ut. Om du till exempel vill style en barnkomponent från en förälder måste du lita på att använda CSS-klasser för närvarande (åtminstone tills styled-komponenter v2 kommer ut).

Det finns inte heller något "officiellt" sätt att förhandsvisa din CSS på servern ännu, även om det definitivt är möjligt genom att injicera stilarna manuellt.

Och det faktum att utformade komponenter genererar sina egna slumpmässiga klassnamn kan göra det svårt att använda webbläsarens dev-verktyg för att ta reda på var dina stilar ursprungligen definierats.

Men det som är väldigt uppmuntrande är att kärnteamet med stilkomponenter är medvetna om alla dessa problem och arbetar hårt med att fixa dem en efter en. Version 2 kommer snart, och jag ser verkligen fram emot det!

Läs mer

Mitt mål här är inte att förklara i detalj hur stylade komponenter fungerar, utan mer att ge dig en liten inblick så att du kan bestämma själv om det är värt att kolla in.

Om jag har lyckats göra dig nyfiken, här några platser där du kan lära dig mer om utformade komponenter:

  • Max Stoiber skrev nyligen en artikel om orsaken till utformade komponenter för Smashing Magazine.
  • Själva repo-stilen har en omfattande dokumentation.
  • Den här artikeln av Jamie Dixon beskriver några fördelar med att byta till utformade komponenter.
  • Om du vill lära dig mer om hur biblioteket faktiskt implementeras, kolla in den här artikeln av Max.

Och om du vill gå ännu längre, kan du också kolla in Glamour, en annan uppsättning av nyvåg CSS!

Självpromoteringstid: Vi letar efter bidrag med öppen källkod för att hjälpa till med Nova, det enklaste sättet att skapa full-stack React- och GraphQL-appar, kompletta med formulär, datalastning och användarkonton. Vi använder inte utformade komponenter ännu, men du kan vara den första att implementera dem!