_bem - WordPress theme with BEM methodology

BEM is great. It is simple, yet powerful. If you're not familiar with it, I highly recommend reading this article by Harry Roberts.

In short, it is a CSS naming convention methodology. It stands for: block, element, modifier. Blocks are parent components, elements are child components and modifiers are different states of components.

WordPress is great, too. It is an open source blog tool and a publishing platform and content management system.

This is a post about building custom WordPress theme with BEM naming methodology. Check it out!

Starter template

A few years ago, I was looking for a tool that could help me build WordPress themes more easily. I've stumbled upon Underscores, a starter theme for WordPress. I was amazed by the simplicity of it.

You enter a template name (and some other options, if you want) and you generate plain theme. It contains the following:

• simple templates,
• default styling,
• translations and
• few custom functions.

Swell! From this step, I could easily dive into developing beautiful custom themes.

BEM

Right about that time, I was learning about BEM. I was trying to implement it on the project I was working on. BEM really simplified my final CSS.

From the start, I saw great benefits of BEM:

• clean HTML templates and
• clean CSS code.

Not only that. If used with SASS or any other preprocessing tool, you could really organize your code. And debugging and fixing style was a piece of cake.

Starter template with BEM methodology

An idea was born—why don't I build a WordPress starter template with BEM methodology?

Great! I should fork Underscores starter template and start customizing it. Like everything else in life, it was easier said than done.

Problems

I knew it will be a daunting project to deal with. Going through all the templates and SASS files was hard enough, for sure. But adding classes and styling on some parts of WordPress was just impossible.

For example, comments. WordPress provides you with a commenting system out of the box. It is a great feature used by many people out there. But adding custom classes to comment components could not be done easily. As I found out later, it should be done by using callback of wp_list_comments function and writing custom callback function. Here is an example code:

<div class="comment-list _comments__list">
<?php
  wp_list_comments( array(
    'style' => 'div',
    'short_ping' => true,
    'callback' => '**_bem_comments**',
  ) );
?>
</div><!-- .comment-list -->

If you're interested in a custom callback function _bem_comments you could see it here.

Another example of how difficult it is to add classes to post navigation links.

/**
  * Custom _bem post links
  *
  * @package _bem
  */
add_filter( 'next_post_link', '_bem_next_post_link' );
add_filter( 'previous_post_link', '_bem_previous_post_link' );

/**
  * Custom next post link
  *
  * @param string $format Accepts format string.
  */
function _bem_next_post_link( $format ) {
  return str_replace( 'href=', 'class="**_post-navigation__link _post-navigation__link--next**" href=', $format );
}

/**
  * Custom previous post link
  *
  * @param string $format Accepts format string.
  */
function _bem_previous_post_link( $format ) {
  return str_replace( 'href=', 'class="**_post-navigation__link _post-navigation__link--previous**" href=', $format );
}

There are still some WordPress parts where I couldn't find the solution how to add classes to HTML components, like WordPress widgets. If you know how to do this, please let me know.

Fancy stuff

BEM is big deal, but there is more stuff that I've implemented in this starter template:

• cita-flex,
• System fonts,
• Gutenberg,
• Sass MQ,
• CSS locks and
• Critical CSS

cita-flex

cita-flex is a flexbox grid system built by me. It is a set of SASS mixins and CSS classes that could help you build grid system. Although it is not perfect, it works in most cases, especially with simple templates, like ones that are used by this starter theme.

System fonts

Using system fonts are awesome and beautiful. And they don't cost a dime—they are part of an operating system on your device. There is no extra request. Yaay!

Gutenberg

Web typography is hard. That's why I'm using Gutenberg by Matej Latin, a meaningful web typography starter kit. It comes with a bunch of great stuff, such as modular scale and vertical rhythm. Now typography is not so hard. Double yaay!

Sass MQ

Writing media queries could be a tedious and boring task. And it could lead to many inconsistencies in a code. To avoid all that, I'm using Sass MQ, a Sass mixin with configuration for media queries. Usage is pretty simple, but if you want to make it even simpler, create a snippet for your favorite text editor. This is how it looks in Atom:

{
  '.source.scss':
    'mq.scss':
      'prefix': 'mq'
      'body': '@include mq(${1:\$from}: ${2:desktop}) {\n\t$3\n}'
}

CSS locks

When I first read about CSS locks, I wasn't sure what is going on here. But after reading and reading some more, I realized how powerful this technique is. After playing around for a while with it, I decided that it could be a great addition to this project. Check it out, resize the browser (this website is built using _bem starter theme, too) and see it in action.

Critical CSS

This is a tough one. And frankly, it needs more work.

Critical CSS as a technique is valid and it comes with great intentions. But man, to make it work out of the box was a real pain in the ass, pardon my french. For months I was trying to make it work using different tools. Finally, I end up using gulp-critical-css, a Gulp task that extracts critical CSS into a separate stylesheet. But that also didn't work at first, so I forked the project, made some tweaks and it's working now.

Final thoughts

There you have it, a WordPress starter theme. All you need to do is download the project and start developing new shiny WordPress theme.

As always, any comments or tweets are appreciated.