We've been using BEM for several Drupal CMS projects quite successfully. This means we've been following a frontend-first approach where frontend developers specify the HTML, which is then implemented backend-side.
In Drupal 8 where we have Twig templates this isn't a big problem. It's also conducive that Drupal 8 uses BEM itself. However, in Drupal 7 it's a real pain. Frontend developers aren't able to implement the specified HTML into a theme/module, due to the fact that a deep knowledge of Drupal 7 would be required – especially when Panels/Panelizer is used.
Therefore backend developers (as we have no "themers") started implementing the HTML backend-side in Drupal 7 projects, which makes them feel bad as it's not their central area. The main reason for that is that BEM (and also other CSS methodologies) is totally based on classes rather than tag names. So, for every element that needs styling, it is required to have a class name. This of course is a big benefit for frontend developers since they can control which elements get styled. Without classes, Drupal 7 wrapper elements may also get styled, since they're using the same tag names.
When there's a system like Drupal 7 where it's not easy to specify classes for all elements it's going to be a pain for the developer to write all these overrides in order to generate the expected HTML.
So I am looking for a solution where we have still a manageable frontend – where we can control which elements get styled, but also reduce the complexity for backend developers meaning less classes than BEM requires. Unfortunately we can't go headless/decoupled, which would probably be the best approach.
Are there any approaches for this scenario?