Share
I denne opplæringen skal vi lære å bruke PostCSS for å gjøre utviklingen av BEM / SUIT-stil CSS enklere og mer effektiv.
Disse to metodene utarbeider en navngivningskonvensjon for klasser som gjør det lettere å holde stilene tett funksjonsorientert, og hjelper andre utviklere å gjenkjenne formålet med ulike klasser akkurat fra måten de heter.
BEM var forløperen til denne typen klassemetodingsmetodikk, opprettet av Yandex. SUIT-metoden er en tilnærming basert på BEM, men med noen tilpasninger og tilføyelser laget av Nicholas Gallagher. SUIT gjør alt BEM, men for mange brukere anses det som en forbedring.
Arbeide med disse metodene bidrar definitivt til å produsere bedre, mer godt strukturert CSS. Den vanskelige delen er imidlertid at det kan bli tretthet manuelt å skrive ut klassenavnene som kreves i denne strukturen, og holde rede på hvordan klasser interrelaterte kan bli litt av hodepine.
Postboks-bem-plugin av Malte-Maurice Dreyer lindrer disse problemene gjennom en kombinasjon av snarveier og nesting, som du lærer å bruke når vi beveger oss gjennom denne opplæringen.
Men først, la oss få en rask primer på BEM og SUIT-metodene, for å sikre at du har et klart bilde av fordelene ved å bruke postcss-bem-pluginet, og hvordan det brukes.
I BEM blokker er høyt nivå biter av et design; byggeblokkene er laget av. En blokk bør være et stykke av nettstedet ditt som er uavhengig av andre brikker, og kan teoretisk sett plasseres hvor som helst i layoutet ditt, selv inne i en annen blokk.
For eksempel kan søkeskjemaet "blokker" på nettstedet ditt bruke klassen .search-skjema.
en element i BEM er et underavsnitt inne i en blokk. De er signifisert ved å legge til en to understreking __ separator og et elementnavn til overordnet blokknavn.
For eksempel kan et søkeskjema inkludere overskrift, tekstfelt og sende knappelementer. Deres klassenavn kan være .search-form__heading, .search-form__text-feltet og .search-form__submit-knappen henholdsvis.
EN modifier brukes til en blokk eller et element for å indikere en endring i presentasjonen eller en endring i dens tilstand. De er signifisert ved å legge til en separator og et modifikasjonsnavn til blokken eller elementet i spørsmålet.
Den offisielle BEM-siden docs angir at modifikator separatorer skal være en enkelt understreking _. Men "BEM-lignende" konvensjonen av CSS Retningslinjer av Harry Roberts sysselsetter to bindestreker -- og er sannsynligvis mer brukt og kjent enn den offisielle BEM-konvensjonen.
For eksempel, i et design kan du ønske å presentere avanserte søkeskjemaer annerledes enn vanlige søkeskjemaer, og dermed opprette modifikasjonsklassen .search-form_advanced (offisielt BEM) eller .search-skjema - avansert (BEM-lignende).
I et annet eksempel kan det hende du vil endre skjemaets utseende på grunn av en endring i tilstanden, for eksempel hvis ugyldig innhold bare er sendt inn og dermed opprette modifikatoren .search-form_invalid (offisielt BEM) eller .search-skjema - ugyldig (BEM-lignende).
SUIT består av verktøy og komponenter. Innenfor komponenter kan det være modifikatorer, Etterkommere og States.
SUIT bruker en kombinasjon av pascal case (PascalCase), kamel tilfelle (camelCase) og bindestreker. Konvensjonene håndhever en grense på det noen ganger forvirrende antall bindestreker og understreker som kan vises i BEM. For eksempel, BEM-klassen .search-form__text-feltet ville vært .SearchForm-tekstfeltet i SUIT.
verktøy håndtere struktur og posisjons styling, og er skrevet på en slik måte at de kan brukes overalt i en komponent. De er prefixed med u- og skrevet i kamel tilfelle. For eksempel, .u-clearFix.
EN komponent i SUIT tar stedet for a blokkere i BEM. Komponenter er alltid skrevet i pascal-saken og er bare en del av SUIT som bruker pascal-saken, noe som gjør dem enkle å identifisere. For eksempel, .SearchForm.
Komponenter kan eventuelt prefikses med et navneområde og enkelt dash nmsp- for å sikre at konflikter blir forhindret, f.eks. .gruve-SearchForm.
EN kommer i SUIT erstatter en element i BEM. Den bruker en enkelt dash - og er skrevet i kamel tilfelle. For eksempel .SearchForm rubrikken, .SearchForm-tekstfeltet og .SearchForm-submitButto.
SUIT bruker modifikatorer som gjør BEM, men deres rolle er mer tett kontrollert. En SUIT-modifikator brukes vanligvis bare direkte til en komponent, ikke til en etterkommer. Det bør heller ikke brukes til å representere statsendringer, da SUIT har en dedikert navnekonvensjon for stater.
Modifikatorer er skrevet i kamel-saken og er foran med to bindestreker --. For eksempel, .SearchForm - avansert.
Stat klasser kan brukes til å reflektere endringer i komponentens tilstand. Dette gjør at de kan tydelig skille seg fra modifikatorer, noe som reflekterer endring av komponentens grunnutseende uavhengig av tilstand. Om nødvendig kan en tilstand også brukes til en etterkommer.
Stater er prefiks med er- og er skrevet i kamel tilfelle. De er også alltid skrevet som tilstøtende klasser. For eksempel .SearchForm.is-invalid.
Nå som du har essensen av BEM og SUIT, er det på tide å sette opp prosjektet ditt.
Du trenger et tomt prosjekt med enten Gulp eller Grunt, avhengig av dine preferanser. Hvis du ikke allerede har en preferanse for den ene eller den andre, anbefaler jeg at du bruker Gulp, da du trenger mindre kode for å oppnå samme mål, så du bør finne det litt enklere å jobbe med.
Du kan lese om hvordan du konfigurerer Gulp eller Grunt-prosjekter for PostCSS i de tidligere opplæringsprogrammene
henholdsvis.
Hvis du ikke vil opprette prosjektet manuelt fra starten, kan du laste ned kildefilene som er vedlagt denne opplæringen, og trekke ut enten det forsynte Gulp eller Grunt-startprosjektet i en tom prosjektmappe. Deretter kjører kommandoen med en terminal eller kommandoprompt på mappen npm installasjon.
Deretter må du installere postcss-bem-plugin. Vi vil også installere et plugin som kan fungere med det ganske bra: postcss-nested.
Enten du bruker Gulp eller Grunt, kjør følgende kommando inne i prosjektmappen din:
npm installere postcss-bem postcss-nested - save-dev
Nå er vi klare til å laste inn pluginene i prosjektet ditt.
Hvis du bruker Gulp, legger du til disse variablene under variablene som allerede finnes i filen:
Accentsconagua
var bem = kreve ('postcss-bem'); var nestet = krever ('postcss-nested');Legg nå til hver av de nye variabelenavnene i din prosessorer matrise:
var prosessorer = [bem, nested];
Gjør en rask test at alt fungerer ved å kjøre kommandoen gulp css og deretter sjekker du at en ny "style.css" -fil har dukket opp i prosjektets "dest" -mappe.
Hvis du bruker Grunt, oppdaterer du prosessorer objekt, som er nestet under opsjoner objekt til følgende:
prosessorer: [krever ('postcss-bem') (), krever ('postcss-nested') ()]Gjør en rask test at alt fungerer ved å kjøre kommandoen grunt postcss og deretter sjekker du at en ny "style.css" -fil har dukket opp i prosjektets "dest" -mappe.
Ok, du er klar til å gå. La oss lære å generere BEM og SUIT-struktur.
Det kan være litt ufeilbarhet som utvikler seg i BEM eller SUIT-strukturen når man skriver kode ut manuelt, idet kontinuerlig gjentagelse av de samme identifikatorene i klassenavn kan bli kjedelig, og holde rede på hvilke elementer og etterkommere som hører til hvilke blokker og komponenter som kan bli forvirrende.
Når du bruker postcss-bem, blir det imidlertid lett å forstå strukturen til koden din på et øyeblikk, og gjentakelse ved å skrive ut klassenavn blir nesten ikke-eksisterende.
Til tross for navnet, vil postcss-bem som standard sende ut i henhold til SUIT-syntaks i stedet for BEM. Du kan skrive ut i BEM syntaks, som vi vil dekke senere, men pluginet er primært designet for å utføre SUIT, så derfor begynner vi med SUIT-syntaks.
Hvis du vil opprette en komponent, bruker du syntaksen @ komponenten Komponentnavn ....
Prøv dette ved å legge til en SearchForm komponent til filen "src / style.css":
@component SearchForm padding: 0; margin: 0;
Kompilere det og din resulterende kode skal være:
.SearchForm padding: 0; margin: 0;
Bruk syntaxen for å opprette en etterkommere @descendent descName ... nestet inne i den overordnede komponenten.
Legg til en etternavn som heter tekstfelt inne i din SearchForm komponent som så:
@component SearchForm padding: 0; margin: 0; / * Nest descendent under komponent * / @descendent textField border: 1px solid #ccc;
Etter samling bør du nå se:
.SearchForm padding: 0; margin: 0; .SearchForm-textField border: 1px solid #ccc;
Opprett en modifikator til en komponent med syntaksen @modifieringsnavn ..., nestet inne i komponenten det påvirker. Modifikatorer bør typisk plasseres øverst på komponenten din, over noen etterkommere og stater.
Legg til en modifikator som heter avansert til din SearchForm komponent med følgende kode:
@component SearchForm padding: 0; margin: 0; / * Typisk plasser modifikatorer over etterkommere * / @modifier avansert polstring: 1rem; @descendent textField border: 1px solid #ccc;
Kompil koden din og du bør se den nye avansert komponent modifikator:
.SearchForm padding: 0; margin: 0; .SearchForm - avansert polstring: 1rem; .SearchForm-textField border: 1px solid #ccc;
Stater opprettes via syntaksen @ når navnet ... og kan være nestet inne i en komponent eller en etterkommer.
Legg til en stat som heter ugyldig til din tekstfelt etterkommere ved hjelp av denne koden:
@component SearchForm padding: 0; margin: 0; @modifier avansert polstring: 1rem; @descendent textField border: 1px solid #ccc; / * Dette skaper en tilstand for textField etterkommer * / @ når ugyldig grense: 1px solid rød;
Nå når du kompilerer koden din, ser du den inneholder den nye ugyldig stat:
.SearchForm padding: 0; margin: 0; .SearchForm - avansert polstring: 1rem; .SearchForm-textField border: 1px solid #ccc; .SearchForm-textField.is-ugyldig border: 1px solid rød;
Du kan navngi dine komponenter, og alle etterkommere, modifikatorer og stater nestet i dem, ved å omgjøre dem med @ komponentnavnnavnnavn .... Du kan, hvis du vil, pakke inn hele stilarket ditt med dette navneområdet, slik at alle klassene dine automatisk blir prefixed med det.
Prøv dette ved å pakke inn all koden så langt med @ komponent-navneområde mine ...:
@ komponent-navneområde mine @component SearchForm padding: 0; margin: 0; @modifier avansert polstring: 1rem; @descendent textField border: 1px solid #ccc; @ når ugyldig grense: 1px solid rød;
Etter samlingen ser du at nå er hver av komponentene prefiks med min-:
.mine-SearchForm padding: 0; margin: 0; .min-SearchForm - avansert polstring: 1rem; .min-SearchForm-textField border: 1px solid #ccc; .min-SearchForm-textField.is-ugyldig border: 1px solid rød;
Verktøy er opprettet med syntaksen @utility utilityName .... Du husker at når du konfigurerte prosjektet, installerte du postcss-nested plugin. Vi gjorde dette som det kan være veldig nyttig å bruke i samspill med postcss-bem, som du vil se i dette eksemplet hvor vi lager en clearFix nytte:
@utility clearFix &: før, &: etter innhold: ""; skjerm: bord; &: etter clear: both; / * Hvis du støtter IE 6/7 * / * zoom: 1;
Etter å ha lagt til koden ovenfor, kompilere og du vil se dette nye verktøyet har blitt opprettet:
.u-clearFix / * Hvis du støtter IE 6/7 * / zoom: 1; .u-clearFix: før, .u-clearFix: etter innhold: ""; skjerm: bord; .u-clearFix: etter clear: both;
For å aktivere BEM syntaksutgang i postcss-bem, passere alternativet stil: 'bem' i din Gulpfile eller Gruntfile slik:
/ * Gulpfile * / var prosessorer = [bem (style: 'bem'), nestet]; / * Gruntfile * / prosessorer: [krever ('postcss-bem') (stil: 'bem'), krever ('postcss-nested')Som standard vil postcss-bem bruke den offisielle separatoren til en modifikator av et enkelt understreke _. Hvis det er viktig for prosjektet ditt at du bruker den mer vanlige separatoren av to bindestreker -- I stedet kan du endre konfigurasjonen for postcss-bem-pluginet ved å gå til mappen node_modules / postcss-bem i prosjektet, åpne index.js, finne linje 15 og endre dette:
bem: separators: namespace: '-', descendent: '__', modifier: '_'
… til dette:
bem: separators: namespace: '_', descendent: '__', modifier: '-'
Fordi en "blokk" i BEM korrelerer med en "komponent" i SUIT, bruk syntaksen @komponent blokknavn ... å generere en blokk.
Å opprette en search-skjema blokk legg til denne koden:
@komponent søkeskjema padding: 0; margin: 0;
Så kompilere og du bør se:
.søk-skjema polstring: 0; margin: 0;
Som et "element" i BEM korrelerer til en "descendent" i SUIT, kan de opprettes med syntaksen @descendent elementnavn ... nestet inne i foreldreblokken.
Å opprette en tekstfelt element legg til følgende:
@komponent søkeskjema padding: 0; margin: 0; @descendent tekstfelt border: 1px solid #ccc;
Ved samling ser du det nye elementet ditt blitt opprettet:
.søk-skjema polstring: 0; margin: 0; .search-form__text-field border: 1px solid #ccc;
Selv om BEM tillater modifikatorer for både blokker og elementer, vil prosessprogrammet postcss-bem bare behandle dem hvis det er nestet i blokkene og ikke elementer, fordi SUIT-konvensjonen til modifikatorer blir brukt på komponenter som ikke er etterkommere. De kan opprettes med syntaksen @modifieringsnavn ..., nestet inne i sin overordnede blokk.
Legg til en avansert modifikator til din search-skjema komponent som så:
@komponent søkeskjema padding: 0; margin: 0; @modifier avansert polstring: 1rem; @descendent tekstfelt grense: 1px solid #ccc;
Og ved samling vil det gi:
.søk-skjema polstring: 0; margin: 0; .search-form_advanced padding: 1rem; .search-form__text-field border: 1px solid #ccc;
Mens i BEM-modus @nytte og @når syntaksene vil ikke kompilere til noe, gitt BEM ikke bruker verktøy eller stater.
Men selv om det ikke er en del av BEM, er det @ Komponent-navnerom syntaksen vil fortsatt fungere hvis du ønsker å bruke den i BEM-stilarket. Det vil prefikse dine klasser med Navn--:
.min - søk-skjema polstring: 0; margin: 0; .min - søk-skjema_advanced padding: 1rem; .min - search-form__text-field border: 1px solid #ccc;
Nå vet du alt om hvordan du snarveier din BEM og SUIT-utvikling, og gjør hele prosessen enklere. La oss oppsummere alt vi har dekket:
@komponent, @descendent, @modifier etc.@ komponentnavnnavnnavn ... Når vi kommer opp neste, ser vi på en annen flott måte å dra nytte av PostCSS, og det er ved å sette sammen et verktøykasse av kortografi og snarveier vi kan ta for å gjøre kodingen raskere og mer effektiv.
jeg ser deg der!
