This is taken from Nicholas Gallagher’s awesome article “About HTML Semantics and CSS Architecture”. The conventions are taken from MontageJS but Nicholas’ examples make it really clear. /* Utility */ .u-utilityName {} /* Component */ .ComponentName {} /* Component modifier */ .ComponentName–modifierName {} /* Component descendant */ .ComponentName-descendant {} /* Component descendant modifier */ .ComponentName-descendant–modifierName…… Continue reading MontageJS naming for BEM
Category: css
CSS Utility Classes with BEM
CSS utility classes are a way of making big projects more maintainable. There are many benefits but also downsides, you can end up with code like this… <div class=”bg-blue text-white font-bold uppercase px-2 py-1 mx-auto mb-1 border-1 w-200″> Not great. There are workarounds for this but they add other overheads (as discussed in this article).…… Continue reading CSS Utility Classes with BEM
Bootstrap BEM
It’s important for CSS to be modular. Without modularity, selectors are fragile and it’s hard to be confident that changing one style won’t inadvertently break a different style somewhere else. How does BEM help? BEM solves modularity by encapsulating styles within a “Block”. Here’s an example from BEM.info. <form class=”search-form__button”> The __ separates the Block…… Continue reading Bootstrap BEM