Does an element in BEM need to be inside a block?

I have a question regarding BEM. Is it ok to have a .block__element on its own with having a block as a parent? I'm building a site with WordPress where there are a lot of other classes from the theme, page builder and plugins, so the need to have parent blocks sometimes makes it all a bit messy. So is this then ok, to have a block__element on its own and then style it via SCSS, or should I add a block to the footer to do this properly?

HTML

<footer id="footer">
 <div class="theme-class page-builder-class">
  <div class="footer-block__text">Some footer element text</div>
 </div>
</footer>

CSS

#footer .footer-block__text {
 color: #ffffff;
}

Solution

I think you can mix BEM classes with others in a lot of cases. BEM could be mixed with other methodologies, with some old code, or even with medium specific classes.

For example, I used to mix methodologies:

You have specific changes to make to a block that are not based on logic. In this case, I would prefer use a utility class (ex: .u-uppercase) that will be shorter to write and available for every blocks, than to write an non-logical BEM modifier (ex: .title--uppercase)
You have a layout class (that distribute the screen space) that your repeat in multiple blocks. In this case, I would prefer use an OOCSS object class (ex: .o-container) that will reduce BEM complexity, than to write the same BEM element everywhere (ex: .header__container).

You could find a great presentation about extending BEM here: Modular CSS at Rangle.

From my experience, I tried to mix OOCSS (with l- prefix) and BEM classes (with p- prefix) when building this website https://www.netalis.fr. It was strange at first, but finally very useful and stable.

An example from 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>

It works because theses external classes are:

Isolated from BEM classes, for example no selector that mix both (.p-header > .l-container)
Immutable, the utilities/object classes should not change over time.

So my question is: Does your page-builder-class isolated and immutable?