I believe that combining BEM classes with other methodologies is possible in many scenarios. BEM can be integrated with other approaches, legacy code, or even unique medium-specific classes.
For instance, I have personally combined different methodologies:
- If you need to apply specific styling to a block that isn't based on logic, it may be more practical to use a utility class (e.g.
.u-uppercase) rather than creating a non-logical BEM modifier (e.g. .title--uppercase).
- If you have a layout class that is used across multiple blocks, using an OOCSS object class (e.g.
.o-container) could simplify your BEM structure compared to repeating the same BEM element everywhere (e.g. .header__container).
You can explore a detailed presentation on extending BEM concepts here: Modular CSS at Rangle.
In my own experience, I experimented with mixing OOCSS (prefixed with l-) and BEM classes (prefixed with p-) while developing the website . Although it felt unfamiliar initially, this approach turned out to be highly beneficial and stable.
An illustration from the netalis website:
<!-- HEADER BLOCK -->
<div class="p-header p-header--hero">
<!-- NESTED BLOCK -->
<div class="p-menu"></div>
<!-- OBJECT CLASS -->
<div class="l-container">
<!-- HEADER ELEMENT -->
<div class="p-header__content"></div>
</div>
</div>
This hybrid approach works because these external classes are:
- Segregated from BEM classes, ensuring no selectors mix both types (
.p-header > .l-container)
- Immutable, meaning the utility/object classes remain consistent over time.
Hence, my query is: Are your page-builder-class isolated and immutable?