Share
Laten we eerlijk zijn, we willen allemaal onze code leesbaarder maken. Door dit te doen, kunnen we sneller en efficiënter werken en wanneer anderen met ons samenwerken, kunnen we de duidelijkheid en samenhangende semantiek behouden. Tegenwoordig lijken er zoveel normen en termen in de CSS-wereld te bestaan: OOCSS, SMACSS, BEM en meer! Dit zijn allemaal benaderingen om de CSS-structuur te verbeteren, en vandaag gaan we BEM behandelen.
BEM staat voor Blokelementmodifier. Het suggereert een gestructureerde manier om je klassen een naam te geven, gebaseerd op eigenschappen van het element in kwestie. Als je ooit een klassennaam hebt gezien zoals header__form-mail dat is BEM in actie. Houd er bij het gebruik van de BEM-methodiek rekening mee dat we alleen klassenamen gebruiken (geen ID's). Klassenamen geven u de mogelijkheid de BEM-naam indien nodig te herhalen en een consistentere codeerstructuur te maken (beide in de HTML- en CSS / Sass-bestanden). Laten we het nu afbreken.
De blok is de container of context waarin het element zich bevindt. Zie dit als de grotere structurele brokken van uw code. Mogelijk hebt u een koptekst-, voettekst-, zijbalk- en hoofdinhoudsgebied; elk daarvan zou als een blok worden beschouwd. Bekijk de afbeelding hieronder:
Het blokelement vormt de wortel van de klasse en zal altijd eerst gaan. Weet gewoon dat als je eenmaal je blok hebt gedefinieerd, je klaar bent om te beginnen met het benoemen van je elementen.
Het element is het stuk van een blok. Het blok is het geheel en de elementen zijn de stukjes. Elk element wordt geschreven na het blok dat is verbonden door twee onderstrepingstekens.
.block__element
Ik weet dat dit er een beetje vreemd uitziet maar als je het eenmaal begint te gebruiken, vraag je je af hoe je ooit CSS hebt geschreven zonder het! Met het dubbele onderstrepingsteken kun je snel en visueel navigeren en je code manipuleren.
Hier zijn enkele voorbeelden van hoe de elementmethodologie werkt:
.header__logo .header__tagline .header__searchbar .header__navigation
Zoals u kunt zien, is er ruimte voor creativiteit en het maken van deze methodiek voor u. "Navigatie" kan worden gewijzigd in "nav", "tagline" kan worden gewijzigd in "tag" of "tagLine". Het gaat erom de namen eenvoudig, duidelijk en nauwkeurig te houden. Denk er niet over na, en omdat je stylesheets en html DROOG blijven (herhaal jezelf niet). Het zou geen probleem moeten zijn om de klassenamen bij te werken als je een betere semantiek vindt die voor jou werkt (probeer het gewoon vol te houden!). Elementen zullen de kern vormen van uw klassenamen, zodat u beter begrijpt hoe u uw stylesheets structureert en hoe u uw lay-out beheert.
Nu wordt het leuk (als je al geen plezier had!) Als je een klasse een naam geeft, is het de bedoeling dat je dat element herhaalbaar maakt, zodat je geen nieuwe klassen in andere delen van de site hoeft te schrijven als de elementen stijlen zijn hetzelfde. Wanneer u de stijl van een specifiek element moet wijzigen, kunt u een modifier gebruiken (natuurlijk!) Om dit te doen, voegt u een dubbel koppelteken toe -- na het element (of blok). Hier is een kort voorbeeld
.block - modifier .block__element - modifier
Wees voorzichtig met deze! Vergeet niet dat je alles eenvoudig wilt houden en jezelf niet hoeft te herhalen of extra lessen wilt maken, tenzij dit absoluut noodzakelijk is. Laten we er met code over praten met behulp van de header van de site als ons blok:
.header__navigation .header__navigation - secondary
Als u een secundaire navigatie gebruikt, is de kans groot dat de lay-out en spatiëring hetzelfde is, maar dat de secundaire navigatie een andere kleur heeft. U kunt de originele stijlen dupliceren of, beter nog, een preprocessor gebruiken. Met Sass zou je dat doen @uitbreiden het hoofdelement (zodat het secundaire element alle eigenschappen overneemt) en de juiste stijlen wijzigt.
.header__navigation background: # 008cba; opvulling: 1rem 0; marge: 2rem 0; text-transform: hoofdletters; .header__navigation - secondary @extend .header__navigation; achtergrond: # dfe0e0;
Je denkt misschien aan jezelf "maar de klassenaam is zo lang!" De manier waarop ik het zie: BEM-klassenamen zijn specifiek, duidelijk, gemakkelijk te lezen in html, en communiceren duidelijk waar ze voor zijn.
Wat ik ook leuk vind aan BEM-klassenamen, is dat je maar één klassenaam hoeft te gebruiken voor elke html-tag. Bekijk hoe het voor labels kan werken. Standaard selectors:
.label .label-default .label .label-alert
versus BEM selectors:
.label .label - alert
Talen zoals Sass (specifiek Scss) stellen ons in staat om snel elementen dezelfde stijl te laten delen met kleine uitzonderingen. Het onderstaande voorbeeld voorkomt dat stijlen worden gedupliceerd, maar we veranderen gewoon wat nodig is. Wat ik zo leuk vind aan de BEM-methodologie, is dat ik geen ambigue lessen zoals "paneelpaneel-standaard col-md-3”. Als u een framework zoals Foundation gebruikt, kunt u beginnen met het gebruik van mixins. Maar laten we voor een eenvoudig voorbeeld de labels die we zojuist hebben gedefinieerd, stijlen.
.label background: #eee; grensradius: 505; kleur: # 333; lettergrootte: 1rem; .label - alert @extend .label; achtergrond: # da4531; kleur: #fff;
Nou daar heb je het, BEM in een notendop. Zoals je ziet, is er zoveel meer te ontdekken. BEM is een systeem dat voortdurend evolueert en waarmee u uw code duidelijker kunt maken en waarmee u uw hiërarchie beter kunt definiëren en instellen voor uw front-end ontwikkeling.
Vanuit mijn persoonlijke ervaring heeft het me enorm geholpen bij het efficiënter bouwen van prototypen en de overgang naar code op productieniveau zelfs nog sneller!
Wat vind je van BEM, heb je advies, tips of trucs voor je mede-Tuts + -lezers? Laat het ons weten in de comments hieronder!
Accentsconagua