Un mio collega sta spingendo pesantemente il metodo BEM (Block Element Modifier) per il CSS in un progetto che sta guidando, e non riesco proprio a capire cosa lo rende migliore del MENO CSS che scriviamo da anni.
BEM è una metodologia CSS. Altri includono OOCSS e SMACSS. Queste metodologie sono utilizzate per scrivere codice modulare, estensibile e riutilizzabile che funziona bene su scala.
MENO è un preprocessore CSS. Altri includono Sass e Stilo. Questi preprocessori vengono utilizzati per convertire le rispettive fonti in CSS espanso.
BEM e LESS non sono comparabili in quanto "migliori" l'uno dell'altro, sono strumenti che servono a scopi diversi. Non diresti che un cacciavite è meglio di un martello, tranne quando si considera l'utilità per risolvere un problema specifico.
Afferma "prestazioni più elevate" ...
Le prestazioni dovrebbero essere misurate tra uno stile CSS classico di:
.widget .header
e stile BEM di:
.widget__header
ma in generale, le prestazioni del selettore CSS non sono un collo di bottiglia e non devono essere ottimizzate.
La "performance" di BEM è in genere relativa al codice di scrittura delle performance di uno sviluppatore. Se la metodologia BEM viene utilizzata in modo coerente e corretto, è facile per gruppi di sviluppatori creare simultaneamente moduli distinti senza collisioni di stile.
Afferma "leggibilità" e "riutilizzo" ...
Non so che direi a un nuovo sviluppatore che BEM è più leggibile. Posso dire che fornisce alcune linee guida ben definite sul significato e sulla struttura delle classi.
Vedere una classe come
.foo--bar__baz
Mi dice che c'è un fooblocco che si trova nello barstato e contiene un bazelemento.
Direi assolutamente che BEM è più riutilizzabile di un modello classico.
Se due sviluppatori creano blocchi ( fooe bar), ed entrambi i blocchi hanno intestazioni, possono riutilizzare in sicurezza i loro blocchi in contesti diversi senza preoccuparsi di una collisione dei nomi.
Questo perché, in un contesto classico, .foo .headinge .bar .headingsarebbe in contrasto, e introdurre un conflitto specificità che avrebbe bisogno di essere risolto, possibilmente su una base caso per caso.
In un sito BEM, le classi sarebbero .foo__headinge .bar__heading, che non sarebbero mai in conflitto.
Afferma che "il CSS nidificato è un anti-pattern". Cosa significa "anti-pattern", e perché CSS nidificato è dannoso?
Un "anti-pattern" è un modello di codifica che è più facile da imparare e usare per gli sviluppatori inesperti rispetto a un'alternativa più appropriata.
Per quanto riguarda il motivo per cui il CSS nidificato è negativo: l'annidamento aumenta la specificità di un selettore. Maggiore è la specificità, maggiore è lo sforzo necessario per scavalcare. Gli sviluppatori inesperti spesso temono che i loro CSS possano interessare più pagine, quindi usano selettori come:
#something .lorem .ipsum .dolor ul.sit li.amet a.more
Quando uno sviluppatore esperto si preoccuperebbe che il suo CSS non influisse su più pagine, quindi utilizzava selettori come:
.more
Afferma che "tutti si stanno muovendo verso l'uso del BEM, quindi dovremmo anche noi." ...
Questo è un errore del carrozzone , quindi ignoralo come un cattivo argomento. Non cadere nella trappola dell'errore fallace , perché una cattiva discussione a sostegno di BEM non è un motivo per credere che BEM non possa essere buono.
Qualcuno potrebbe spiegare in dettaglio cosa rende BEM migliore di MENO?
Ho già parlato di questo, BEM & LESS non sono comparabili. Mele e arance, ecc.
Il mio collega non riesce a convincermi completamente, ma non so se ho altra scelta che seguire.
Consiglio di dare un'occhiata a OOCSS, SMACSS e BEM e valutare i pro ei contro di ogni metodologia ... come una squadra . Uso BEM perché mi piace la sua rigidità nel formato e non mi dispiace per i brutti selettori, ma non posso dirti cosa è giusto per te o per la tua squadra. Non lasciare che un individuo schietto esegua lo spettacolo. Se non ti senti a tuo agio con BEM, tieni presente che esistono altre alternative che potrebbero essere più facili da supportare per il tuo team. Potrebbe essere necessario difendere la tua posizione con il tuo collega, ma a lungo termine avrà probabilmente un effetto positivo sul risultato dei tuoi progetti.
Preferirei davvero poter apprezzare il BEM, piuttosto che accettarlo a malincuore.
Ho scritto una risposta su StackOverflow che descrive come funziona BEM . La cosa importante da capire è che i selettori ideali dovrebbero avere una specificità in 0-0-1-0modo che siano facili da sostituire ed estendere.
Scegliere di usare BEM non significa che devi rinunciare a MENO! Puoi ancora usare le variabili, puoi ancora usare @imports e puoi sicuramente continuare a usare l'annidamento. La differenza è che vuoi che l'output renderizzato diventi una singola classe, piuttosto che una catena discendente.
Dove avresti potuto avere
.widget {
.heading {
...
}
}
Con BEM puoi usare:
.widget {
&__heading {
...
}
}
Inoltre, poiché BEM ruota attorno a singoli blocchi, puoi facilmente separare il codice in file separati. widget.lessconterrebbe gli stili per il .widgetblocco, mentre component.lessconterrebbe gli stili per il .componentblocco. Questo rende molto più facile trovare l'origine per una particolare classe, anche se potresti comunque voler utilizzare le mappe di origine.