0

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?

1
+50

I'm not sure in Drupal world is there is a meaningful difference between a "tag" and a "class", but if it's styling, the ways of selecting an element are not many.

One approach might be to have wrapper classes whose children are styled. For example:

.my-wrapper div input {
  ...
}

This does cut down on the number of classes inside of your HTML, but it creates a new problem wherein your styling and DOM are now very tightly coupled.

While this may seem antithetical to your question, it seems like your team might get some good use out of a more "functional" CSS framework.

Rather than writing a bunch of classes and class-specific rules, you could try Tachyons' approach. Each element that you want to style has its rules defined explicitly within the class attribute.

Furthermore, Drupal 7 seems to be well-suited to this approach, at least according to this blog post.

Good luck!

  • Thanks for your reply and the approach. Unfortunately I can't go with this way as I've mentioned Without classes, Drupal 7 wrapper elements may also get styled, since they're using the same tag names.. The past has proven that this will be the case and it makes the system unmaintanable. The framework, unfortunately, is no solution too. – dude Apr 9 '18 at 5:59
0

It seems that there's no solution to the problem. I've searched for a solution, even with a bounty. It seems that there's either the way to use complex and nested CSS selectors which makes the system unmaintainable and is error prone to CMS elements (like in Drupal 7). On the other hand there's e.g. the BEM approach that requires classes on all elements, which is a pain to generate in e.g. Drupal 7.

There seems not to be a specification approach between these two.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.