BEM is a CSS naming methodology that advocates the concept of modular CSS (an acronym for Block, Element, Modifier). I first learned about this through an article on CSS Wizardry, and whilst Harry Roberts (aka CSS Wizardry) is not the inventor of this practice, it was this article that first got me into the idea of modular CSS.
Having utilised it on a few WordPress projects over the past couple of years, I’ve constantly been unable to really utilise it in Drupal because, as any Drupal themer will tell you; writing an elegant front-end in Drupal is an almost impossible pursuit.
In this article I’d like to discuss one way in which we’ve managed to utilise BEM in Drupal, to what we consider a satisfactory extent. It doesn’t involve overriding Views templates (because that is an utter pain), instead it simply involves rewriting our Views output.
Let’s begin by creating a basic content type. Create a content type called “Film” with the following fields:
For the purpose of simplicity, let’s just use the widget types listed above. If you wish to use Date for the Year field, feel free to install it; it won’t affect this tutorial.
Before continuing, please add some dummy content to this content type.
Create a new View – select the Film content type and let’s just create a page. On the View edit page, ensure that under Format we’re showing fields not content which is the default option. This will give us access to individual fields (i.e. Cover, Director etc).
Next, add some fields. Under fields click add and then add all fields relating to our Film content type. Add them all so that we see something similar to the image below.
If you save the View and look at the page (/films) you’ll see a list of entries similar to the image below.
Note that all of the content is simply spilled out onto the page – this is intentional because it helps to clean up the markup. There are a couple of things you can do to prevent Views from adding extraneous things:
This simply prevents Views from adding additional markup and classes to the view output, and will results in purely content being spat out when viewed. This is what we want.
Now that we’ve got mostly just raw content, we can start to style it up in our own way. To do this, we need to add a new field. So, under Fields once more, click Add and then select Global: Custom text.
This is essentially a blank, custom field which allows us to add HTML and more importantly, replacement patterns. In Drupal, each piece of variable data is called a replacement pattern, and these are available to us in Views. If you click on the Custom text field we just added, you should see the following patterns available to you (note: ensure the Custom text field is underneath all the other fields or it won’t work!).
Hopefully at this point you’re starting to see where we’re going with this. In the Custom text field you can write whatever markup you wish. For the purpose of this demonstration I’m going to keep it very simple and create a basic example of desired BEM output:
By default, all fields will output, so you will need to go into each of the above fields and check Exclude from display to ensure that you don’t get duplicated output.
By rewriting the View output and implementing BEM (albeit a very basic example of BEM) into my markup, I now have a nice clean slate for styling up with CSS, meaning I could much more easily create modular CSS for my site. This example isn’t particularly reusable, but you get the picture.
I’d love to know what other Drupal themers and front-end developers think of this approach. Obviously, it’s nothing new, but we started implementing it on a few Drupal projects and it’s turned out to be a big help when styling up Views output.