Share
I denna handledning ska vi lära oss hur vi använder PostCSS för att göra utvecklingen av BEM / SUIT-stil CSS enklare och effektivare.
Dessa två metoder utarbetar en namngivningskonvention för klasser som gör det lättare att hålla dina stilar tätt funktionsorienterade och hjälper andra utvecklare att känna igen syftet med olika klasser precis från det sätt de heter.
BEM var föregångaren till denna typ av klassnamnsmetodik, skapad av Yandex. SUIT-metoden är ett tillvägagångssätt baserat på BEM, men med några justeringar och tillägg gjorda av Nicholas Gallagher. SUIT gör allt BEM, men för många användare anses det som en förbättring.
Att arbeta med dessa metoder bidrar definitivt till att producera bättre, mer välstrukturerad CSS. Den svåra delen är dock att det kan bli tröttsamt att manuellt skriva ut de klassnamn som krävs i den här strukturen och hålla reda på hur klasser som är relaterade till varandra kan bli lite av huvudvärk.
Post-plug-in-plugin av Malte-Maurice Dreyer lindrar dessa problem genom en kombination av genvägar och häckar som du kommer att lära dig använda när vi flyttar igenom denna handledning.
Men först, låt oss ha en snabb primer på BEM och SUIT-metoderna för att se till att du har en tydlig bild av fördelarna med att använda plugin-programmet plugin-bem, och hur det används.
I BEM block är högkvalitativa bitar av en design; byggstenarna som webbplatsen är gjord av. Ett block bör vara en del av din webbplats som är oberoende av andra delar och kan teoretiskt placeras var som helst i din layout, även inbäddat i ett annat block.
Exempelvis kan sökformuläret "block" på din webbplats använda klassen .sök-formen.
En element i BEM är ett underavsnitt i ett block. De betecknas genom att lägga till en två understrykning __ separator och ett elementnamn till moderblocknamnet.
Exempelvis kan ett sökformulär innehålla rubrik, textfält och lägga in knappelement. Deras klassnamn kan vara .search-form__heading, .search-form__text-fält och .search-form__submit knapp respektive.
en modifieringsmedel appliceras på ett block eller element för att indikera en förändring i dess presentation eller en förändring i dess tillstånd. De betecknas genom att addera en separator och ett modifieringsnamn till blocket eller elementet i fråga.
Den officiella BEM-webbplatsen docs anger att modifierare separatorer borde vara ett enda understreck _. Men "BEM-liknande" konventionen av CSS Guidelines av Harry Roberts sysselsätter två bindestreck -- och är antagligen mer utbredd och känd än den officiella BEM-konventionen.
Till exempel, i en design kan du önska att presentera avancerade sökformulär annorlunda än vanliga sökformulär och därigenom skapa modifierarklassen .sök-form_advanced (officiell BEM) eller .search-formen - advanced (BEM-liknande).
I ett annat exempel kanske du vill ändra formulärets utseende på grund av en förändring av tillståndet, till exempel om ett ogiltigt innehåll just har skickats in och därigenom skapa modifieraren .search-form_invalid (officiell BEM) eller .search-formen - ogiltig (BEM-liknande).
SUIT innefattar verktyg och Komponenter. Inom komponenter kan det finnas modifierare, Ättlingar och stater.
SUIT använder en kombination av pascal case (PascalCase), kamelfall (camelCase) och bindestreck. Dess konventioner verkställer en gräns för det ibland förvirrande antalet streck och understreck som kan förekomma i BEM. Till exempel BEM-klassen .search-form__text-fält skulle vara .SearchForm-textfield i SUIT.
verktyg hantera struktur och positionsstilning, och skrivs på ett sådant sätt att de kan appliceras var som helst i en komponent. De är prefixed med u- och skrivet i kamelfall. Till exempel, .u-clearFix.
en komponent i SUIT tar platsen för a blockera i BEM. Komponenter skrivs alltid i pascal-fodral och är bara en del av SUIT som använder pascal-fodral, vilket gör dem enkla att identifiera. Till exempel, .SearchForm.
Komponenter kan valfritt prefixas med en namnrymd och en singeldash NMSP- för att säkerställa att konflikter förhindras, t.ex.. .mine-SearchForm.
en ättling i SUIT ersätter en element i BEM. Den använder en enda streck - och är skrivet i kamelfall. Till exempel .SearchForm rubrik, .SearchForm-textfield och .SearchForm-submitButto.
SUIT använder modifieringsmedel liksom BEM, men deras roll är tätt kontrollerad. En SUIT-modifierare tillämpas generellt endast direkt på en komponent, inte till en efterkommande. Det ska inte heller användas för att representera statliga förändringar, eftersom SUIT har en särskild namngivningskonvention för stater.
Modifierare är skrivna i kamelfall och föregås av två bindestreck --. Till exempel, .SearchForm - advanced.
stat klasser kan användas för att reflektera förändringar i en komponents tillstånd. Detta gör det möjligt för dem att tydligt differentieras från modifierare, vilket återspeglar modifiering av en komponents basutseende oberoende av tillstånd. Om det behövs kan en stat också tillämpas på en efterkommande.
Staterna är prefixade med är- och är skrivna i kamelfall. De skrivs också alltid som angränsande klasser. Till exempel .SearchForm.is-invalid.
Nu när du har det väsentliga med BEM och SUIT, är det dags att konfigurera ditt projekt.
Du behöver ett tomt projekt med antingen Gulp eller Grunt, beroende på vad du föredrar. Om du inte redan föredrar en eller annan, rekommenderar jag att du använder Gulp eftersom du behöver mindre kod för att uppnå samma ändamål, så du borde hitta det lite enklare att arbeta med.
Du kan läsa om hur du konfigurerar Gulp eller Grunt-projekt för PostCSS i de tidigare handledningarna
respektive.
Om du inte vill installera ditt projekt manuellt från början, kan du ladda ner källfilerna som bifogas denna handledning och extrahera antingen det angivna Gulp eller Grunt-startprojektet i en tom projektmapp. Sedan kör kommandot med en terminal eller kommandotolk som pekas på mappen npm installera.
Därefter måste du installera postcss-bem-plugin. Vi installerar också ett plugin som kan fungera bra med det: postcss-nested.
Oavsett om du använder Gulp eller Grunt, kör följande kommando i din projektmapp:
npm installera postcss-bem postcss-nested - save-dev
Nu är vi redo att ladda plugin till ditt projekt.
Om du använder Gulp, lägg till dessa variabler under de variabler som redan finns i filen:
Accentsconagua
var bem = kräver ('postcss-bem'); var nested = kräver ('postcss-nested');Lägg nu till var och en av de nya variabla namnen i din processorer array:
var processorer = [bem, nested];
Gör ett snabbt test att allt fungerar genom att köra kommandot gulp css Kontrollera sedan att en ny "style.css" -fil har dykt upp i projektets "dest" -mapp.
Om du använder Grunt, uppdatera processorer objekt som är nestat under alternativ objekt till följande:
processorer: [kräver ('postcss-bem') (), kräver ('postcss-nested') ()]Gör ett snabbt test att allt fungerar genom att köra kommandot grunt postcss Kontrollera sedan att en ny "style.css" -fil har dykt upp i projektets "dest" -mapp.
Okej, du är redo att gå. Låt oss lära oss hur du genererar BEM och SUIT-struktur.
Det kan hända att det inte går att utveckla någon ojämnhet i BEM eller SUIT-strukturen när man skriver ut manuellt. Att kontinuerligt upprepa samma identifierare i klassnamn kan bli tröttsamt och hålla reda på vilka element och nedstigningar som hör till vilka block och komponenter som kan bli förvirrande.
När du använder postcss-bem, blir det dock lätt att förstå strukturen i din kod vid en blick och repetition när du skriver ut klassnamn blir praktiskt taget obefintlig.
Trots sitt namn kommer postcss-bem som standard att utgå enligt SUIT-syntax snarare än BEM. Du kan skriva ut i BEM-syntaxen, som vi kommer att täcka senare, men pluginprogrammet är primärt utformat för att skriva ut SUIT, så därför börjar vi med SUIT-syntax.
Använd syntaxen för att skapa en komponent @ komponent Komponentnamn ....
Prova detta genom att lägga till en SearchForm komponent till din "src / style.css" -fil:
@component SearchForm padding: 0; marginal: 0;
Kompilera det och din resulterande kod ska vara:
.SearchForm padding: 0; marginal: 0;
Använd syntaxen för att skapa en efterföljare @descendent descName ... nestad inuti moderkomponenten.
Lägg till en avkänning som heter textfält inuti din SearchForm komponent som så:
@component SearchForm padding: 0; marginal: 0; / * Nest descendent under komponent * / @descendent textField border: 1px solid #ccc;
Efter sammanställningen borde du nu se:
.SearchForm padding: 0; marginal: 0; .SearchForm-textField border: 1px solid #ccc;
Skapa en modifierare till en komponent med syntaxen @ modifieringsnamn ..., nestad inuti komponenten den påverkar. Modifierare bör typiskt placeras överst på din komponent, över några efterkommande och stater.
Lägg till en modifier som heter Avancerad till din SearchForm komponent med följande kod:
@component SearchForm padding: 0; marginal: 0; / * Placera typiskt modifierare över efterkommande * / @modifierad avancerad padding: 1rem; @descendent textField border: 1px solid #ccc;
Kompilera din kod och du bör se din nya Avancerad komponent modifierare:
.SearchForm padding: 0; marginal: 0; .SearchForm - avancerad padding: 1rem; .SearchForm-textField border: 1px solid #ccc;
Stater skapas via syntaxen @ när namnet ... och kan nästas inuti en komponent eller en efterkommande.
Lägg till ett namn som heter ogiltig till din textfält efterkommande med denna kod:
@component SearchForm padding: 0; marginal: 0; @ modifierad avancerad padding: 1rem; @descendent textField border: 1px solid #ccc; / * Detta skapar ett tillstånd för textFields efterkommande * / @when ogiltig border: 1px solid red;
Nu när du sammanställer koden ser du att den innehåller din nya ogiltig stat:
.SearchForm padding: 0; marginal: 0; .SearchForm - avancerad padding: 1rem; .SearchForm-textField border: 1px solid #ccc; .SearchForm-textField.is-ogiltigt border: 1px solid red;
Du kan namnge dina komponenter, och alla efterkommande, modifierare och stater nestade i dem, genom att omge dem @ komponentnamnrymdsnamn .... Du kan, om du vill, sätta in hela ditt stilark med denna namnrymd så att alla dina klasser automatiskt är prefixade med den.
Prova detta genom att förpacka all din kod hittills med @ komponent-namnrymdminne ...:
@ komponent-namnrymdminne @component SearchForm padding: 0; marginal: 0; @ modifierad avancerad padding: 1rem; @descendent textField border: 1px solid #ccc; @when ogiltig border: 1px solid red;
Efter sammanställningen ser du att nu är var och en av dina komponenter prefixad med mina-:
.min-SearchForm padding: 0; marginal: 0; .min-SearchForm - avancerad padding: 1rem; .min-SearchForm-textField border: 1px solid #ccc; .min-SearchForm-textField.is-invalid border: 1px solid red;
Verktyg skapas med syntaxen @utility utilityName .... Du kommer ihåg att när du konfigurerat ditt projekt installerade du det postcss-kapslade plugin-programmet. Vi gjorde det eftersom det kan vara väldigt praktiskt att använda i samverkan med postcss-bem, som du ser i det här exemplet där vi skapar en clearFix verktyg:
@utility clearFix &: före, &: efter innehåll: ""; display: bord; &: efter clear: both; / * Om du stöder IE 6/7 * / * zoom: 1;
Efter att du har lagt till ovanstående kod, kompilera och du får se det här nya verktyget har skapats:
.u-clearFix / * Om du stöder IE 6/7 * / zoom: 1; .u-clearFix: före, .u-clearFix: efter innehåll: ""; display: bord; .u-clearFix: efter clear: both;
För att aktivera BEM-syntaxutgången i postcss-bem, välj alternativet stil: 'bem' i din Gulpfile eller Gruntfile som så:
/ * Gulpfile * / var processorer = [bem (style: 'bem'), nested]; / * Gruntfile * / processorer: [kräver (postcss-bem ") (style: 'bem'), kräver ('postcss-nested')Som standard kommer postcss-bem använda den officiella separatorn för en modifierare av ett enda understreck _. Om det är viktigt för ditt projekt att du använder den vanligare separatorn av två streck -- istället kan du ändra konfigurationen för postcss-bem-pluginet genom att gå till mappen node_modules / postcss-bem i ditt projekt, öppna index.js, lokalisera rad 15 och ändra det här:
bem: separators: namespace: '-', descendent: '__', modifierare: '_'
… till detta:
bem: separators: namespace: '_', descendent: '__', modifier: '-'
Eftersom ett "block" i BEM korrelerar med en "komponent" i SUIT använder du syntaxen @komponentblocknamn ... att generera ett block.
För att skapa en sök-formen block lägg till den här koden:
@komponent-sökformulär vaddering: 0; marginal: 0;
Kompilera sedan och du bör se:
.sökformulär vaddering: 0; marginal: 0;
Eftersom ett "element" i BEM korrelerar till en "descendent" i SUIT, kan de skapas med syntaxen @descendent elementnamn ... nestad inuti moderblocket.
För att skapa en textfält element lägg till följande:
@komponent-sökformulär vaddering: 0; marginal: 0; @descendent textfält border: 1px solid #ccc;
Vid sammanställning ser du att ditt nya element har skapats:
.sökformulär vaddering: 0; marginal: 0; .search-form__text-field border: 1px solid #ccc;
Även om BEM tillåter modifierare till både block och element, kommer postcss-bem-pluginet bara att bearbeta dem om de är kapslade inuti block och inte element, på grund av att SUIT-konventionen av modifierare appliceras på komponenter som inte är efterkommande. De kan skapas med syntaxen @ modifieringsnamn ..., nestad inuti sitt moderblock.
Lägg till en Avancerad modifierare till din sök-formen komponent som så:
@komponent-sökformulär vaddering: 0; marginal: 0; @ modifierad avancerad padding: 1rem; @descendent textfält border: 1px solid #ccc;
Och vid sammanställning kommer det att ge:
.sökformulär vaddering: 0; marginal: 0; .search-form_advanced padding: 1rem; .search-form__text-field border: 1px solid #ccc;
Medan i BEM-läget @verktyg och @när syntaxer kommer inte att kompilera i någonting, eftersom BEM inte använder verktyg eller stater.
Men även om det inte är en del av BEM, är det @ Komponent-namespace Syntaxen fungerar fortfarande om du vill använda den i ditt BEM-stilark. Det kommer att prefixa dina klasser med namn--:
.min - sökformulär vaddering: 0; marginal: 0; .min - sökformulär_advanced padding: 1rem; .min - sökformulär__textfält border: 1px solid #ccc;
Nu vet du allt om hur du snabblar din BEM och SUIT-utveckling och gör den övergripande processen enklare. Låt oss sammanfatta allt vi har täckt:
@komponent, @descendent, @modifier etc.@ komponentnamnrymdsnamn ... När vi kommer fram nästa tittar vi på ett annat bra sätt att dra nytta av PostCSS, och det är genom att sätta ihop ett verktygsverktyg av stenografi och genvägar vi kan vidta för att göra vår kodning snabbare och effektivare.
vi ses där!
