CSS Academy · Oppitunti

Vanilla Extract: CSS-in-JS ilman ajoaikaista suoritusta

Kirjoita tyyppiturvallista CSS:ää Vanilla Extractilla, joka luo staattiset CSS-tiedostot koontiaikana.

Oppitunti 4/413 vaihetta

Vanilla Extract: CSS-in-JS ilman ajoaikaista suoritusta on ilmainen CSS Academy-oppitunti CoddyKitissä. Tämä on oppitunti 4/4. Voit lukea koko oppitunnin alta ilmaiseksi ja harjoitella sen jälkeen käytännössä selaimessa sisäänrakennetulla koodieditorilla ja ympäri vuorokauden käytettävissä olevan tekoälytuutorin avulla. Oppitunti kuuluu CSS Academy-oppimispolkuun, ja edistymisesi synkronoituu verkon ja CoddyKit-sovelluksen välillä. CSS Academy-kurssilla on yhteensä 4 oppituntia.

Mikä Vanilla Extract on

Vanilla Extract on CSS-in-JS-kirjasto, joka ei aiheuta lainkaan ajonaikaista lisäkustannusta. CSS määritellään TypeScriptissä ja käännetään staattisiksi CSS-tiedostoiksi koontivaiheessa — näin saatte tyyppiturvallisuuden ilman tyylien lisäämistä ajonaikana.

Keskeinen periaate

Toisin kuin styled-components ja Emotion, Vanilla Extract toimii kokonaan koontivaiheessa. JavaScript-tuonti toimii tyylien määrittelyn rajapintana, ja tuloksena ovat tavalliset CSS-tiedostot. Asiakaspuolella ei suoriteta JavaScriptiä tyylien käyttöönottoa varten.

Tiedostokäytäntö

Vanilla Extract -tiedostot käyttävät päätettä .css.ts:

// button.css.ts
import { style } from '@vanilla-extract/css';

export const button = style({
  background: 'royalblue',
  color: 'white',
  padding: '10px 20px',
  borderRadius: '4px',
  cursor: 'pointer',
  ':hover': {
    background: '#2563eb'
  }
});

Käyttö komponenteissa

Tuokaa viety luokan nimi ja käyttäkää sitä:

import { button } from './button.css.ts';

function Button({ children }) {
  return <button className={button}>{children}</button>;
}

Teemasopimukset

Vanilla Extractin tehokkain ominaisuus on teemasopimuksen (token-rakenteen) määrittäminen ja useiden sen toteuttavien teemojen luominen:

import { createTheme, createThemeContract } from '@vanilla-extract/css';

const contract = createThemeContract({
  color: { primary: null, bg: null }
});

export const lightTheme = createTheme(contract, {
  color: { primary: '#3b82f6', bg: '#ffffff' }
});

export const darkTheme = createTheme(contract, {
  color: { primary: '#60a5fa', bg: '#111827' }
});

styleVariants

Luokaa tyylin useita muunnelmia ilman toistoa:

import { styleVariants } from '@vanilla-extract/css';

export const variants = styleVariants({
  primary: { background: 'royalblue' },
  danger:  { background: 'crimson' },
  ghost:   { background: 'transparent', border: '1px solid royalblue' }
});

// <Button className={variants[variant]}>

Reseptit paketilla @vanilla-extract/recipes

recipes-paketin recipe-funktio yhdistää perustyylit ja muunnelmat elegantisti:

import { recipe } from '@vanilla-extract/recipes';

export const button = recipe({
  base: { padding: '10px 20px', borderRadius: '4px' },
  variants: {
    color: {
      primary: { background: 'royalblue', color: 'white' },
      danger:  { background: 'crimson', color: 'white' }
    },
    size: {
      sm: { fontSize: '0.875rem' },
      lg: { fontSize: '1.25rem' }
    }
  }
});

Sprinkles-apuluokat

@vanilla-extract/sprinkles luo apuluokkia tokenijoukosta — kyseessä on kuin tyyppiturvallinen, ajonaikaisesta kustannuksesta vapaa Tailwind:

Tyyppiturvallisuus

Koska tyylit ovat TypeScript-olioita, saatte CSS-ominaisuuksien nimille ja arvoille täyden IDE:n automaattisen täydennyksen ja tyyppitarkistuksen. Ominaisuuksien nimissä olevat kirjoitusvirheet havaitaan koontivaiheessa, ei ajonaikana.

Koontityökalujen integraatio

Vanilla Extract integroituu Viten, webpackin, esbuildin ja Next.js:n kanssa erillisten sovittimien avulla. Eroteltu CSS tarjotaan staattisena tiedostona.

Milloin Vanilla Extract kannattaa valita

Valitkaa Vanilla Extract, kun haluatte:

tyyleillenne täyden TypeScript-tyyppiturvallisuuden
CSS-in-JS:n ajonaikaisten kustannusten puuttuvan kokonaan
staattisen CSS-tulosteen parhaan mahdollisen suorituskyvyn saavuttamiseksi
vankan teemoitusjärjestelmän, jonka tokenisopimukset tarkistetaan tyyppien avulla

Pikatarkistus

Mikä on Vanilla Extractin keskeinen suorituskykyetu ajonaikaiseen CSS-in-JS:ään, kuten styled-componentsiin, verrattuna?

Vastaa interaktiivisessa oppitunnissa

Yhteenveto

Vanilla Extract on TypeScript-lähtöinen CSS-in-JS-kirjasto, joka ei aiheuta ajonaikaisia kustannuksia. Määritelkää tyylit .css.ts-tiedostoissa tyyppiturvallisina JavaScript-olioina. Koontivaihe tuottaa staattiset CSS-tiedostot. Teemasopimukset tarjoavat tyyppitarkistetun tuen useille teemoille. styleVariants ja recipe käsittelevät komponenttien muunnelmat elegantisti. Ajonaikaisten kustannusten puuttuminen tekee siitä ihanteellisen suorituskykykriittisiin sovelluksiin.

Aloita maksutta

Opi CSS tekoälytuutorin avulla — ilmaiseksi

Kirjoita ja suorita oikeaa koodia selaimessa, saa välitöntä apua tekoälytuutorilta ympäri vuorokauden ja jatka siitä, mihin jäit, verkossa tai sovelluksessa.

Kurssit: 40
Oppitunnit: 159

Aloita opiskelu maksutta Näytä koko kurssi

Usein kysytyt kysymykset

Onko oppitunti ”Vanilla Extract: CSS-in-JS ilman ajoaikaista suoritusta” ilmainen?

Kyllä – oppitunnin ”Vanilla Extract: CSS-in-JS ilman ajoaikaista suoritusta” koko tekstin voi lukea täällä verkossa ilmaiseksi. Jos haluat harjoitella interaktiivisesti sisäänrakennetulla koodieditorilla ja ympäri vuorokauden käytettävissä olevan tekoälytuutorin avulla sekä avata koko CSS Academy-kurssin, päivitä CoddyKit PROhon. CSS Academy-kurssilla on yhteensä 4 oppituntia.

Mitä opin oppitunnilla ”Vanilla Extract: CSS-in-JS ilman ajoaikaista suoritusta”?

Kirjoita tyyppiturvallista CSS:ää Vanilla Extractilla, joka luo staattiset CSS-tiedostot koontiaikana. Harjoittelet CSS Academy-aihetta koodilla, jonka suoritat suoraan selaimessa. Ympäri vuorokauden käytettävissä oleva tekoälytuutori vastaa kysymyksiisi oppitunnin aikana.

Tarvitsenko kokemusta aloittaakseni CSS Academy-opiskelun?

Aiempi kokemus ei ole tarpeen. CoddyKitin CSS Academy-oppimispolku sopii vasta-alkajista edistyneisiin, joten voit aloittaa tästä tai alusta ja edetä omaan tahtiisi. Tämä on oppitunti 4/4.

Kuinka kauan ”Vanilla Extract: CSS-in-JS ilman ajoaikaista suoritusta”-oppitunnin suorittaminen kestää?

Useimmat CoddyKitin oppitunnit kestävät noin 5–10 minuuttia. Jokainen oppitunti on lyhyt ja interaktiivinen, joten edistyt tasaisesti ja voit jatkaa siitä, mihin jäit – sekä verkossa että sovelluksessa.

Voinko kirjoittaa ja suorittaa koodia tällä CSS Academy-oppitunnilla?

Kyllä. Jokainen CSS Academy-oppitunti sisältää sisäänrakennetun koodieditorin, joten voit kirjoittaa ja suorittaa oikeaa koodia suoraan selaimessa ja saada välitöntä palautetta tekoälyltä – paikallista asennusta ei tarvita.

Kaikki tämän kurssin oppitunnit

Styled-components: Tagged Template Literals
Emotion: css() ja styled()
CSS Modules: rajatut tyylit
Vanilla Extract: CSS-in-JS ilman ajoaikaista suoritusta

← Takaisin: CSS Academy