Styled Components

• Hur hamnade vi här?
• Introducerar Styled Components
• Installation
• Vår första styled component

Hur hamande vi här

En gång i tiden var webben riktigt enkel och CSS fanns inte ens. Vi la ut sidor med tabeller och ramar. Simplare tider.

Då kom CSS till liv, och efter en tid blev det tydligt att ramverket kunde hjälpa särskilt när det gäller att bygga rutnät system och layouter, och Bootstrap och Foundation spelade en stor roll i detta, och på senaste åren så kom först Flexbox som hjälpte oss att presentera vårt innehåll antigen vertikalt eller horisontellt utan massa "hacks" som floats. Sen kom CSS-Grids som har verkligen revoluionärat vårt sätt att bygga vår presentation i vårt frontend, som till skillnad från Flexbox kunde manpulera inehållet både horisontell och vertiallt samtidig, vilket öppnar upp för många spännande layout lösningar.

Pre-processorer som SASS och andra hjälpte mycket till att bromsa antagandet av rnya CSS amverk, och är bättre på att organisera koden. Konventioner som BEM och SMACSS växte i bruk, särskilt inom teams.

Konventioner är inte en lösning på allt, och de är komplexa att komma ihåg, så under de senaste åren med den ökande användningen av JavaScript och byggprocesser i varje frontend-projekt, har CSS börjat användas till JavaScript (CSS-in-JS). CSS Modules inom React är ett sånt exempel.

Introducerar Styled Components

En av dem mest populara av dessa verkyg är Styled Components.

Det är en kanditat som en efterföljare till CSS-moduler, ett sätt att skriva CSS vars "scope" är till en enda komponent och inte läcker till något annat element på sidan.

(mer om CSS modules här och här)

Styled Components låter dig skriva vanlig CSS i dina komponenter utan att oroa dig kollisioner i dina klassnamn. Detta blir ett problem då du måste namge dina klasser vädligt specifikt för minsta lilla variation från någon annan klass. Ibland råkar man ut för att en viss CSS klass har högre specificitet som då skriver över den CSS koden man har skapat. Att namnge ge ens klassesr enligt BEM-standarden avhjälper det hela, men du måste ändå vara väldigt specifikt vid namngivningen

Installation

Installera styled-components genom npm eller yarn:

npm install styled-components

yarn add styled-components

Vår första Styled Component

Med det importerade Styled Component kan vi nu börja skapa stilkomponenter. Här är den första:

const Button = styled.button
`
  font-size: 1.5em;
  background-color: black;
  color: white;
`

Button är nu en React Component i all sin skönet.

Nu kan denna komponent återges i vår "container" med den normala React-syntaxen:

render(<Button />)