Share
In deze tutorial zullen we leren hoe we PostCSS kunnen gebruiken om de ontwikkeling van BEM / SUIT CSS-stijl eenvoudiger en efficiënter te maken.
Deze twee methoden bevatten een naamgevingsconventie voor klassen die het gemakkelijker maakt om uw stijlen strak functioneel te houden en helpt andere ontwikkelaars het doel van verschillende klassen te herkennen, net zoals ze worden genoemd.
BEM was de voorloper van dit type methodologie voor naamgeving van klassen, gemaakt door Yandex. De SUIT-methodologie is een benadering op basis van BEM, maar met enkele aanpassingen en toevoegingen door Nicholas Gallagher. SUIT doet alles wat BEM doet, maar voor veel gebruikers wordt het als een verbetering beschouwd.
Het werken met deze methoden helpt zeker om betere, beter gestructureerde CSS te produceren. Het lastige is echter dat het vermoeiend kan worden handmatig de klassenamen uit te typen die in deze structuur vereist zijn, en bijhouden hoe klassen onderling verband houden, een beetje hoofdpijn kunnen worden.
De postcss-bem-plugin van Malte-Maurice Dreyer lost deze problemen op door een combinatie van snelkoppelingen en nesten, die u zult leren gebruiken terwijl we door deze zelfstudie gaan.
Maar laten we eerst een snelle inleiding geven op de BEM- en SUIT-methoden, om er zeker van te zijn dat u een duidelijk beeld hebt van de voordelen van het gebruik van de postcss-bem-plugin en van de manier waarop deze wordt gebruikt.
In BEM blokken zijn high-level brokken van een ontwerp; de bouwstenen van waaruit de site is gemaakt. Een blok moet een stuk van uw site zijn dat onafhankelijk is van andere stukken en in theorie overal in uw lay-out kan worden geplaatst, zelfs genest binnen een ander blok.
Het zoekformulier 'blokken' op uw site kan bijvoorbeeld de klasse gebruiken .zoekformulier.
Een element in BEM is een subsectie binnen een blok. Ze worden aangeduid door een onderstrepingsteken toe te voegen __ scheidingsteken en een elementnaam voor de naam van het bovenliggende blok.
Een zoekformulier kan bijvoorbeeld kop-, tekst- en verzendknoppen bevatten. Hun klassennamen kunnen zijn .search-form__heading, .search-form__text-field en .search-form__submit-knop respectievelijk.
EEN wijziger wordt toegepast op een blok of element om een wijziging in de presentatie aan te geven, of een wijziging in de staat ervan. Ze worden aangeduid door een scheidingsteken en een modificator toe te voegen aan het blok of element in kwestie.
In de officiële BEM-sitedocumenten staat dat de modifier-scheidingstekens een enkel onderstrepingsteken moeten zijn _. In de "BEM-achtige" conventie van CSS-richtlijnen door Harry Roberts worden echter twee streepjes gebruikt -- en is waarschijnlijk meer algemeen gebruikt en bekend dan de officiële BEM-conventie.
In een ontwerp wilt u bijvoorbeeld geavanceerde zoekformulieren anders presenteren dan gewone zoekformaten en daarom de modificatieklasse maken .-Search form_advanced (officiële BEM) of .search-vorm - advanced (BEM-achtige).
In een ander voorbeeld wilt u mogelijk het uiterlijk van het formulier wijzigen vanwege een wijziging in de staat, bijvoorbeeld als ongeldige inhoud zojuist is ingediend en dus de modifier maken .search-form_invalid (officiële BEM) of .search-vorm - ongeldig (BEM-achtige).
SUIT omvat nutsbedrijven en Components. Binnen componenten kan er zijn modifiers, nakomelingen en Staten.
SUIT gebruikt een combinatie van pascal-behuizing (PascalCase), camelcase (camelCase) en streepjes. De conventies dwingen een limiet af op het soms verwarrende aantal streepjes en onderstrepingstekens die kunnen voorkomen in BEM. Bijvoorbeeld de BEM-klasse .search-form__text-field zou zijn .Zoekformulier-textField in pak.
nutsbedrijven handvatstructuur en positionele styling, en zijn zo geschreven dat ze overal in een component kunnen worden toegepast. Ze worden voorafgegaan door u- en geschreven in kamelengeval. Bijvoorbeeld, .u-Clearfix.
EEN bestanddeel in SUIT neemt de plaats in van een blok in BEM. Componenten worden altijd in pascal-geval geschreven en maken alleen deel uit van SUIT dat gebruik maakt van pascal-case, waardoor ze gemakkelijk te identificeren zijn. Bijvoorbeeld, .Zoekformulier.
Componenten kunnen optioneel worden voorafgegaan door een naamruimte en een enkel streepje NMSP- om te verzekeren dat conflicten worden voorkomen, b.v.. .mine-zoekformulier.
EEN afstammeling in SUIT vervangt een element in BEM. Het gebruikt een enkel streepje - en is geschreven in kamelengeval. Bijvoorbeeld .Zoekformulier-titel, .Zoekformulier-textField en .Zoekformulier-submitButto.
SUIT gebruikt modifiers net als BEM, maar hun rol wordt strakker gecontroleerd. Een SUIT-modifier wordt over het algemeen alleen rechtstreeks op een component toegepast, niet op een afstammeling. Het moet ook niet worden gebruikt om staatsveranderingen te vertegenwoordigen, aangezien SUIT een speciale naamgevingsconventie voor staten heeft.
Veranderingen zijn geschreven in een geval van een kameel en worden voorafgegaan door twee streepjes --. Bijvoorbeeld, .Zoekformulier - advanced.
Staat klassen kunnen worden gebruikt om wijzigingen in de status van een component weer te geven. Hierdoor kunnen ze duidelijk worden onderscheiden van modifiers, die de wijziging van het basisuiterlijk van een component weerspiegelen, ongeacht de status. Indien nodig kan een toestand ook worden toegepast op een nakomeling.
Staten worden voorafgegaan door is- en zijn geschreven in kamelen geval. Ze worden ook altijd geschreven als aangrenzende klassen. Bijvoorbeeld .SearchForm.is-ongeldig.
Nu dat je de essentie van BEM en SUIT hebt, is het tijd om je project in te stellen.
Je hebt een leeg project nodig met Gulp of Grunt, afhankelijk van je voorkeur. Als je nog geen voorkeur hebt voor Gulp, raad ik Gulp aan, omdat je minder code nodig hebt om dezelfde doelen te bereiken, dus je zou het wat eenvoudiger moeten vinden om met Gulp te werken.
U kunt lezen over het instellen van Gulp- of Grunt-projecten voor PostCSS in de vorige zelfstudies
respectievelijk.
Als u uw project echter niet helemaal opnieuw wilt instellen, kunt u de bronbestanden downloaden die aan deze zelfstudie zijn gekoppeld en het meegeleverde Gulp- of Grunt-startersproject uitpakken in een lege projectmap. Voer vervolgens de opdracht uit met een terminal of opdrachtprompt die naar de map wijst npm installeren.
Vervolgens moet je de postcss-bem plug-in installeren. We zullen ook een plug-in installeren die er heel goed mee kan werken: postcss-genest.
Of u Gulp of Grunt gebruikt, voer de volgende opdracht uit in uw projectmap:
npm installeer postcss-bem postcss-nested --save-dev
Nu zijn we klaar om de plug-ins in uw project te laden.
Als u Gulp gebruikt, voegt u deze variabelen toe onder de variabelen die al in het bestand staan:
Accentsconagua
var bem = require ('postcss-bem'); var genest = require ('postcss-nested');Voeg nu elk van die nieuwe variabelenamen toe aan uw processors array:
var processors = [bem, genest];
Voer een snelle test uit dat alles werkt door de opdracht uit te voeren slok css controleer vervolgens of er een nieuw "style.css" -bestand is verschenen in de map "dest" van uw project.
Als u Grunt gebruikt, werk dan het processors object, dat is genest onder de opties object, naar het volgende:
processors: [require ('postcss-bem') (), require ('postcss-nested') ()]Voer een snelle test uit dat alles werkt door de opdracht uit te voeren grunt postcss controleer vervolgens of er een nieuw "style.css" -bestand is verschenen in de map "dest" van uw project.
Oké, je bent klaar om te gaan. Laten we leren hoe we de BEM- en SUIT-structuur kunnen genereren.
Er kan zich wat logheid ontwikkelen in de BEM- of SUIT-structuur bij het handmatig schrijven van code, omdat het herhaaldelijk herhalen van dezelfde ID's in klassenamen vermoeiend kan worden en bijhouden welke elementen en afstammelingen bij welke blokken en componenten verwarrend kunnen zijn.
Wanneer u postcss-bem echter gebruikt, wordt het gemakkelijk om de structuur van uw code in één oogopslag te begrijpen en wordt herhaling bij het typen van klassenamen vrijwel onbestaand.
Ondanks zijn naam wordt postcss-bem standaard standaard uitgevoerd in overeenstemming met de SUIT-syntaxis in plaats van BEM. U kunt uitvoeren in de BEM-syntaxis, die we later zullen behandelen, maar de plug-in is voornamelijk ontworpen om SUIT uit te voeren, dus om die reden zullen we beginnen met de SUIT-syntaxis.
Gebruik de syntaxis om een component te maken @component ComponentName ....
Probeer dit uit door een toe te voegen Zoekformulier component naar uw "src / style.css" bestand:
@component SearchForm opvulling: 0; marge: 0;
Compileer het en uw resulterende code zou moeten zijn:
.SearchForm opvulling: 0; marge: 0;
Gebruik de syntaxis om een afstammeling te maken @descendent descName ... genest in de bovenliggende component.
Voeg een afstammeling met de naam toe textField in je Zoekformulier component zoals zo:
@component SearchForm opvulling: 0; marge: 0; / * Nest afstammeling onder component * / @descendent textField border: 1px solid #ccc;
Na het compileren ziet u nu:
.SearchForm opvulling: 0; marge: 0; .SearchForm-textField border: 1px solid #ccc;
Maak een modifier aan een component met de syntaxis @ naam van de beheerder ..., genest in de component die het heeft. Modifiers moeten meestal bovenaan uw component worden geplaatst, boven eventuele afstammelingen en staten.
Voeg een naam toe met de naam gevorderd aan jouw Zoekformulier component met de volgende code:
@component SearchForm opvulling: 0; marge: 0; / * Typ modifiers meestal boven afstammelingen * / @modifier advanced padding: 1rem; @descendent textField border: 1px solid #ccc;
Hercompileer uw code en u zou uw nieuwe moeten zien gevorderd component modifier:
.SearchForm opvulling: 0; marge: 0; .SearchForm - advanced padding: 1rem; .SearchForm-textField border: 1px solid #ccc;
Staten worden gemaakt via de syntaxis @wanneer naam ... en kan worden genest binnen een component of een afstammeling.
Voeg een naam toe met de naam ongeldig aan jouw textField afstammeling met behulp van deze code:
@component SearchForm opvulling: 0; marge: 0; @modifier advanced padding: 1rem; @descendent textField border: 1px solid #ccc; / * Hiermee wordt een status gemaakt voor de afstammeling textField * / @wanneer ongeldig border: 1px effen rood;
Wanneer u nu uw code compileert, ziet u dat deze uw nieuwe bevat ongeldig staat:
.SearchForm opvulling: 0; marge: 0; .SearchForm - advanced padding: 1rem; .SearchForm-textField border: 1px solid #ccc; .SearchForm-textField.is-invalid border: 1px effen rood;
U kunt de naamgeving van uw componenten en alle afstammelingen, modifiers en statussen die daarin zijn genest, omsluiten met @ naam van component-naamruimte .... U kunt desgewenst uw hele stylesheet met deze naamruimte omwikkelen, zodat al uw klassen automatisch worden voorafgegaan door deze naamruimte.
Probeer dit uit door al je code tot nu toe in te pakken @ component-namespace mine ...:
@ component-namespace mine @component SearchForm opvulling: 0; marge: 0; @modifier advanced padding: 1rem; @descendent textField border: 1px solid #ccc; @wanneer ongeldig border: 1px effen rood;
Na het compileren ziet u dat nu elk van uw componenten wordt voorafgegaan door de mijne-:
.mine-SearchForm opvulling: 0; marge: 0; .mine-SearchForm - advanced padding: 1rem; .mine-SearchForm-textField border: 1px solid #ccc; .mine-SearchForm-textField.is-invalid border: 1px effen rood;
Hulpprogramma's worden gemaakt met de syntaxis @utility utilityName .... U herinnert zich dat u bij het instellen van uw project de postcss-geneste plug-in hebt geïnstalleerd. We hebben dit gedaan omdat het erg handig kan zijn om te gebruiken in combinatie met postcss-bem, zoals je in dit voorbeeld zult zien waar we een Clearfix nut:
@utility clearFix &: before, &: after content: ""; weergave: tafel; &: na clear: both; / * Als ondersteuning van IE 6/7 * / * zoom: 1;
Nadat u de bovenstaande code hebt toegevoegd, compileert u en ziet u dat dit nieuwe hulpprogramma is gemaakt:
.u-clearFix / * Als ondersteuning voor IE 6/7 * / zoom: 1; .u-clearFix: before, .u-clearFix: after content: ""; weergave: tafel; .u-clearFix: after clear: both;
Om de BEM-syntaxisuitvoer in postcss-bem te activeren, geeft u de optie door stijl: 'bem' in je Gulpfile of Gruntbestand zoals zo:
/ * Gulpfile * / var processors = [bem (style: 'bem'), genest]; / * Gruntfile * / processors: [require ('postcss-bem') (style: 'bem'), require ('postcss-nested') ()]Standaard gebruikt postcss-bem het officiële scheidingsteken voor een wijziging van een enkel onderstrepingsteken _. Als het belangrijk is voor uw project, gebruikt u het meer algemene scheidingsteken van twee streepjes -- in plaats daarvan kunt u de config voor de postcss-bem-plugin wijzigen door naar de map node_modules / postcss-bem van uw project te gaan, index.js te openen, regel 15 te vinden en dit aan te passen:
bem: separators: namespace: '-', descendent: '__', modifier: '_'
... dit:
bem: separators: namespace: '_', descendent: '__', modifier: '-'
Omdat een "blok" in BEM correleert met een "component" in SUIT, gebruikt u de syntaxis @component block-naam ... om een blok te genereren.
Om een te maken zoekformulier blok voeg deze code toe:
@component zoek-formulier opvulling: 0; marge: 0;
Dan compileer en je zou moeten zien:
.zoekvorm opvulling: 0; marge: 0;
Als een "element" in BEM correleert met een "afstammeling" in SUIT, kunnen ze worden gemaakt met de syntaxis @descendente elementnaam ... genest in het bovenliggende blok.
Om een te maken text-field element voeg het volgende toe:
@component zoek-formulier opvulling: 0; marge: 0; @descendent text-field border: 1px solid #ccc;
Bij het compileren ziet u dat uw nieuwe element is gemaakt:
.zoekvorm opvulling: 0; marge: 0; .zoek-formulier__tekstveld border: 1px solid #ccc;
Hoewel BEM modifiers voor zowel blokken als elementen toestaat, verwerkt de postcss-bem-plugin ze alleen als genest binnen blokken en geen elementen, vanwege de SUIT-conventie van modifiers die worden toegepast op componenten die niet afstammen. Ze kunnen worden gemaakt met de syntaxis @ naam van de beheerder ..., genest in het bovenliggende blok.
Voeg een toe gevorderd modifier voor uw zoekformulier component zoals zo:
@component zoek-formulier opvulling: 0; marge: 0; @modifier advanced padding: 1rem; @descendent text-field border: 1px solid #ccc;
En bij de compilatie zal het opleveren:
.zoekvorm opvulling: 0; marge: 0; .search-form_advanced padding: 1rem; .zoek-formulier__tekstveld border: 1px solid #ccc;
In de BEM-modus de @nut en @wanneer syntaxes kunnen nergens in worden gecompileerd, aangezien BEM geen hulpprogramma's of toestanden gebruikt.
Hoewel het over het algemeen geen deel uitmaakt van BEM, is het @ Component-namespace syntaxis werkt nog steeds als u het in uw BEM-stylesheet wilt gebruiken. Het geeft uw klassen een voorvoegsel naam--:
.mijn - zoekformulier opvulling: 0; marge: 0; .mine - search-form_advanced padding: 1rem; .mine - search-form__text-field border: 1px solid #ccc;
Nu weet u alles over het korten van uw BEM- en SUIT-ontwikkeling en maakt u het algehele proces eenvoudiger. Laten we alles samenvatten wat we hebben behandeld:
@component, @descendent, @modifier enz.@ naam van component-naamruimte ... Als volgende komen we kijken naar een andere geweldige manier om te profiteren van PostCSS, en dat is door een toolkit samen te stellen van steno's en snelkoppelingen die we kunnen nemen om onze codering sneller en efficiënter te maken.
ik zie je daar!
