Share
În acest tutorial vom învăța cum să folosim PostCSS pentru a face dezvoltarea CSS stil BEM / SUIT mai ușoară și mai eficientă.
Aceste două metodologii stabilesc o convenție de numire pentru clase, care facilitează păstrarea stilurilor strâns legate de funcții și ajută alți dezvoltatori să recunoască scopul diferitelor clase doar din modul în care sunt numiți.
BEM a fost predecesorul acestui tip de metodologie de numire a claselor, creat de Yandex. Metodologia SUIT este o abordare bazată pe BEM, dar cu unele ajustări și completări făcute de Nicholas Gallagher. SUIT face tot ceea ce face BEM, dar pentru mulți utilizatori este considerat un accesoriu.
Lucrul cu aceste metode contribuie cu siguranta la producerea unor CSS mai bine structurate. Cu toate acestea, partea complicată este că poate deveni obositoare manual tastând numele de clasă necesare în această structură și urmărirea modului în care clasele inter-relaționate pot deveni un pic de dureri de cap.
Plug-ul postcss-bem de Malte-Maurice Dreyer ameliorează aceste probleme printr-o combinație de comenzi rapide și cuiburi, pe care o veți învăța să le folosiți pe măsură ce treceți prin acest tutorial.
Dar, mai întâi, hai să avem un primer rapid cu privire la metodele BEM și SUIT, pentru a vă asigura că aveți o imagine clară a beneficiilor utilizării pluginului postcss-bem și a modului în care este folosit.
În BEM blocuri sunt bucăți de nivel înalt ale unui design; blocurile de construcție din care face parte. Un bloc ar trebui să fie o bucată din site-ul dvs. care este independentă de alte piese și ar putea fi plasată teoretic oriunde în aspectul dvs., chiar și în interiorul unui alt bloc.
De exemplu, formularul de căutare "blochează" pe site-ul dvs. ar putea utiliza clasa .Căutare în formă.
Un element în BEM este o subsecțiune în interiorul unui bloc. Acestea sunt semnificative prin adăugarea a două subliniere __ separator și un nume de element în numele blocului părinte.
De exemplu, un formular de căutare poate include titluri, câmp de text și elemente de buton de trimitere. Numele lor de clasă ar putea fi .căutare-form__heading, .căutare-form__text-câmp și .căutare-form__submit-buton respectiv.
A modificator este aplicat unui bloc sau element care semnifică o schimbare a prezentării sale sau o schimbare a stării sale. Acestea sunt semnificative prin adăugarea unui separator și a unui nume de modificare a blocului sau elementului în cauză.
Documentele oficiale ale site-ului BEM afirmă că separatoarele de modificatori ar trebui să fie un singur subliniere _. Cu toate acestea, convenția "BEM-like" a Ghidului CSS de Harry Roberts folosește două liniuțe -- și este, probabil, mai larg utilizat și cunoscut decât convenția oficială BEM.
De exemplu, într-un design puteți dori să prezentați formulare de căutare avansată diferit de formularele de căutare obișnuite și, prin urmare, să creați clasa de modificatori .-Search form_advanced (BEM oficial) sau .Căutare în formă - avansat (BEM-like).
Într-un alt exemplu, este posibil să doriți să modificați aspectul formularului datorită unei modificări a stării, cum ar fi în cazul în care tocmai a fost trimis un conținut nevalid și, prin urmare, să creați modificatorul .căutare-form_invalid (BEM oficial) sau .căutare-formular - invalid (BEM-like).
SUIT cuprinde Utilități și Componente. În cadrul componentelor pot exista Modificatorii, Urmasi și statele.
SUIT utilizează o combinație de caz pascal (PascalCase), caz de cămilă (camelCase) și liniuțe. Convențiile sale impun o limită a numărului uneori confuz de liniuțe și sublinieri care pot apărea în BEM. De exemplu, clasa BEM .căutare-form__text-câmp va fi .SearchForm-textfield în SUIT.
Utilități structura mânerului și stilul pozițional și sunt scrise astfel încât să poată fi aplicate oriunde într-o componentă. Acestea sunt prefixate cu u- și scrisă în caz de cămilă. De exemplu, .u-clearFix.
A component în SUIT ia locul unui bloc în BEM. Componentele sunt întotdeauna scrise în cazul pascal și fac parte doar din SUIT care utilizează cazul pascal, făcându-le ușor de identificat. De exemplu, .SearchForm.
Componentele pot fi prefixate opțional cu un spațiu de nume și o singură linie NMSP- pentru a asigura împiedicarea conflictelor, de ex. .mina-SearchForm.
A descendent în SUIT înlocuiește o element în BEM. Utilizează o singură linie - și este scrisă în caz de cămilă. De exemplu .SearchForm-titlu, .SearchForm-textfield și .SearchForm-submitButto.
SUIT utilizează modificatori la fel ca BEM, însă rolul lor este mai strict controlat. Un modificator SUIT este, în general, aplicat doar direct unei componente, nu unui descendent. De asemenea, nu ar trebui să fie folosit pentru a reprezenta schimbări de stat, deoarece SUIT are o convenție dedicată de numire pentru state.
Modificatorii sunt scrise în cazul cămilă și sunt precedate de două liniuțe --. De exemplu, .SearchForm - avansat.
Stat clasele pot fi folosite pentru a reflecta modificările la starea unei componente. Acest lucru le permite să fie diferențiate în mod clar de modificatori, care reflectă modificarea aspectului de bază al unei componente, indiferent de stat. Dacă este necesar, o stare poate fi aplicată și unui descendent.
Statele sunt prefixate cu este- și sunt scrise în caz de cămilă. Ele sunt, de asemenea, întotdeauna scrise ca clase adiacente. De exemplu .SearchForm.is-nevalid.
Acum, că aveți cele mai importante lucruri pentru BEM și SUIT, este timpul să vă configurați proiectul.
Veți avea nevoie de un proiect gol, utilizând fie Gulp, fie Grunt, în funcție de preferințele dvs. Dacă nu aveți deja o preferință pentru unul sau altul, vă recomandăm să utilizați Gulp, deoarece veți avea nevoie de un cod mai mic pentru a atinge aceleași scopuri, așadar ar trebui să vă simțiți puțin mai ușor să lucrați cu.
Puteți citi despre cum să configurați proiectele Gulp sau Grunt pentru PostCSS în tutorialele anterioare
respectiv.
Dacă nu doriți să configurați manual proiectul de la zero, puteți să descărcați fișierele sursă atașate acestui tutorial și să extrageți proiectul Gulp sau Gruntul furnizat într-un dosar gol al proiectului. Apoi, cu un terminal sau un prompt de comandă indicat la dosarul de executare a comenzii npm install.
Apoi, va trebui să instalați pluginul postcss-bem. Vom instala, de asemenea, un plugin care poate funcționa destul de bine cu acesta: postcss-nested.
Indiferent dacă utilizați Gulp sau Grunt, executați următoarea comandă în dosarul proiectului:
npm instalare postcss-bem postcss-imbricate - save-dev
Acum suntem gata să încărcăm pluginurile în proiectul tău.
Dacă utilizați Gulp, adăugați aceste variabile sub variabilele deja în fișier:
Accentsconagua
var bem = necesită ("postcss-bem"); var nested = necesită ("postcss-nested");Acum adăugați fiecare dintre aceste nume de variabile noi în dvs. procesoare matrice:
var procesoare = [bem, imbricate];
Faceți un test rapid că totul funcționează prin rularea comenzii gulp css verificând apoi că un nou fișier "style.css" a apărut în folderul "dest" al proiectului.
Dacă utilizați Grunt, actualizați procesoare obiect, care este imbricat sub Opțiuni obiect, la următoarele:
procesoare: [cere ('postcss-bem') (), necesită ('postcss-nested') ()Faceți un test rapid că totul funcționează prin rularea comenzii zgâria postcss verificând apoi că un nou fișier "style.css" a apărut în folderul "dest" al proiectului.
Bine, sunteți gata să plecați. Să învățăm cum să generăm structura BEM și SUIT.
Există oarecare neajuns în dezvoltarea structurii BEM sau SUIT atunci când scrieți codul manual, deoarece repetarea continuă a acelorași identificatori în numele claselor poate deveni obositoare și urmărirea elementelor și descendenților care aparțin blocurilor și componentelor care pot deveni confuze.
Când utilizați postcss-bem cu toate acestea, devine ușor să înțelegeți structura codului dvs. dintr-o privire și repetarea în tastarea numelor de clasă devine practic inexistentă.
În ciuda numelui său, în mod implicit postcss-bem va ieși conform sintaxei SUIT, mai degrabă decât BEM. Puteți ieși în sintaxa BEM, pe care o vom acoperi mai târziu, dar plugin-ul este în primul rând proiectat să producă SUIT, deci din acest motiv, vom începe cu sintaxa SUIT.
Pentru a crea o componentă, utilizați sintaxa @ component ComponentName ....
Încercați acest lucru prin adăugarea unui SearchForm în fișierul "src / style.css":
@ Component SearchForm umplutură: 0; marja: 0;
Compilați-l și codul rezultat ar trebui să fie:
.Formularul de căutare padding: 0; marja: 0;
Pentru a crea un descendent, utilizați sintaxa @ descendent descName ... imbricate în interiorul componentei părinte.
Adăugați un descendent numit textfield în interiorul tău SearchForm astfel:
@ Component SearchForm umplutură: 0; marja: 0; / * Nest descendent sub componenta * / @descendent textField border: 1px solid #ccc;
După compilare, ar trebui să vedeți acum:
.Formularul de căutare padding: 0; marja: 0; .SearchForm-textField border: 1px solid #ccc;
Creați un modificator pentru o componentă cu sintaxa @ name of modifier ..., imbricate în interiorul componentei pe care o efectuează. Modificatorii ar trebui să fie în mod obișnuit plasați în partea superioară a componentei dvs., deasupra oricărui descendent și stat.
Adăugați un modificator numit avansat pentru dumneavoastră SearchForm componenta cu următorul cod:
@ Component SearchForm umplutură: 0; marja: 0; / * De obicei, modificați locurile de deasupra descendenților * / @modifier advanced padding: 1rem; @descendent textField border: 1px solid #ccc;
Recompilați codul dvs. și ar trebui să vedeți noul dvs. avansat modificator de componente:
.Formularul de căutare padding: 0; marja: 0; .SearchForm - avansat padding: 1rem; .SearchForm-textField border: 1px solid #ccc;
Statele sunt create prin sintaxa @ când numele ... și pot fi imbricate în interiorul unei componente sau descendente.
Adăugați o stare numită invalid pentru dumneavoastră textfield descendent folosind acest cod:
@ Component SearchForm umplutură: 0; marja: 0; @modifier avansat padding: 1rem; @descendent textField border: 1px solid #ccc; / * Aceasta creează o stare pentru descendentul textField * / @when invalid border: 1px solid red;
Acum, când compilați codul, veți vedea că acesta conține noul dvs. invalid stat:
.Formularul de căutare padding: 0; marja: 0; .SearchForm - avansat padding: 1rem; .SearchForm-textField border: 1px solid #ccc; .SearchForm-textField.is-invalid border: 1px solid red;
Aveți posibilitatea să denumiți componentele și toți descendenții, modificatorii și stările imbricate în ele, prin înconjurarea lor @ name-name-component-component .... Poți, dacă îți dorești, să îți împacheți întreaga foaie de stil cu acest spațiu de nume, astfel încât toate clasele tale să fie prefixate automat cu acesta.
Încercați acest lucru prin împachetarea întregului cod până acum @ component-namespace mine ...:
@ component-namepace mina @component SearchForm padding: 0; marja: 0; @modifier avansat padding: 1rem; @descendent textField border: 1px solid #ccc; @when invalid border: 1px solid red;
După compilare, veți vedea că acum fiecare dintre componentele dvs. este prefixată A mea-:
.a mea-SearchForm umplutura: 0; marja: 0; .mine-SearchForm - avansat padding: 1rem; .mine-SearchForm-textField graniță: 1px solid #ccc; .mine-SearchForm-textField.is-nevalid border: 1px solid red;
Utilitățile sunt create cu sintaxa @ utilitate utilityName .... Vă reamintiți că atunci când ați configurat proiectul, ați instalat pluginul postcss-nested. Am făcut acest lucru, deoarece poate fi foarte util pentru a fi folosit împreună cu postmodern, așa cum veți vedea în acest exemplu în care vom crea un clearFix utilitate:
@ utilitate clearFix &: înainte, &: după conținut: ""; afișare: tabel; &: după clar: ambele; / * Dacă se acceptă zoom IE 6/7 * / *: 1;
După adăugarea codului de mai sus, compilați și veți vedea că acest utilitar nou a fost creat:
.u-clearFix / * Dacă suportă IE 6/7 * / zoom: 1; .u-clearFix: înainte, .u-clearFix: după content: ""; afișare: tabel; .u-clearFix: după clear: ambele;
Pentru a activa ieșirea sintaxei BEM în postcss-bem, treceți opțiunea stil: "bem" în Gulpfile sau în Gruntfile:
/ * Gulpfile * / procesoarele var = [bem (stil: bem '), imbricate]; / * Gruntfile * / procesoare: [necesită ('postcss-bem')) (stil: 'bem')În mod implicit, postcss-bem va folosi separatorul oficial pentru un modifier al unui singur subliniere _. Dacă este important pentru proiectul dvs. să utilizați separatorul mai comun al celor două liniuțe -- în schimb, poți schimba configurația pentru plugin-ul postcss-bem accesând folderul node_modules / postcss-bem al proiectului tău, deschizând index.js, localizând linia 15 și schimbând aceasta:
bem: separatoare: spațiu de nume: '-', descendent: '__', modificator: '_'
… la acest:
bem: separatoare: spațiu de nume: '_', descendent: '__', modificator: '-'
Deoarece un "bloc" în BEM se corelează cu o "componentă" în SUIT, utilizați sintaxa numele blocului -component ... pentru a genera un bloc.
Pentru a crea un Căutare în formă bloc adăugați acest cod:
Formularul de căutare a componentelor padding: 0; marja: 0;
Apoi compilați și ar trebui să vedeți:
.forma de căutare padding: 0; marja: 0;
Ca un "element" în BEM se corelează cu un "descendent" în SUIT, ele pot fi create cu sintaxa @ element adunant-nume ... imbricate în interiorul blocului părinte.
Pentru a crea un text-câmp element adaugă următoarele:
Formularul de căutare a componentelor padding: 0; marja: 0; @ câmpul textual adunat border: 1px solid #ccc;
La compilație, veți vedea că elementul dvs. nou a fost creat:
.forma de căutare padding: 0; marja: 0; .search-form__text-câmp border: 1px solid #ccc;
Chiar dacă BEM permite modificarea atât a blocurilor, cât și a elementelor, pluginul postcss-bem va procesa numai dacă este implantat în blocuri și nu în elemente, datorită convenției SUIT a modificatorilor care se aplică componentelor care nu sunt descendente. Ele pot fi create cu sintaxa @ name of modifier ..., imbricate în blocul părinte.
Adăugați un avansat modificator la dvs. Căutare în formă astfel:
Formularul de căutare a componentelor padding: 0; marja: 0; @modifier avansat padding: 1rem; @ câmp de text care se află la distanță border: 1px solid #ccc;
Și pe compilație va da:
.forma de căutare padding: 0; marja: 0; .search-form_advanced padding: 1rem; .search-form__text-câmp border: 1px solid #ccc;
În modul BEM @utilitate și @cand sintaxele nu se vor compila în nimic, având în vedere că BEM nu utilizează utilități sau state.
Cu toate acestea, chiar dacă în general nu face parte din BEM, @ Component-namespace sintaxa va funcționa dacă doriți să o utilizați în foaia de stil BEM. Acesta vă va prefixa clasele Nume--:
.a mea - forma de căutare padding: 0; marja: 0; .mine - căutare-form_advanced padding: 1rem; .mini - căutarea-forma__text-câmp border: 1px solid #ccc;
Acum știi totul despre cum să scurtezi dezvoltarea BEM și SUIT și să faci mai ușor procesul general. Să rezumăm tot ce am acoperit:
@component, @descendent, @modifier etc.@ name-name-component-component ... Urmează o altă modalitate excelentă de a profita de PostCSS, și anume prin a pune împreună un set de instrumente de scurtătură și scurtături pe care le putem lua pentru a face codificarea noastră mai rapidă și mai eficientă.
ne vedem acolo!
