Front-End Development with Atomic Design and BEM Syntax

The web has evolved well beyond the static page to page workflow.  Content strategy and delivery have become more modular and dynamic.  

A struggle with any project is keeping the code on the front-end clean, scalable and reusable as it jumps from design to development.

We’ve all been in that position where we are given a bunch of PSDs and told to make the greatness happen.  Instead of the developer diving right into full-page comps, what if designers and developers came together to recognize fully the components that make up these pages?  How are these pieces threaded together as well as responding to the overwhelming number of device screen sizes?  Before client approval, how can a project be reviewed and set up correctly to avoid future development headaches?

As I continue my perpetual journey towards cleaner and more modular code production, I started to focus my attention on the concept of atomic design.  One of the sessions I was excited to attend at DrupalCon Los Angeles went into more detail on this notion.  Front-end Efficiency with BEM Syntax and Atomic Design presented a deeper look into how breaking up full page designs into modular components can create better site architecture on the front-end.

Atomic Design

Photo credit to Brad Frost at bradfrost.com. 

The concept of atomic design has been around for a little while now.  Teams are starting to understand that we are not developing static pages anymore, but modules that fill in templates to construct these pages.

The breakdown of atomic design suggests that all designs are made up of atoms, molecules, organisms, templates and pages.  Atoms are the basic components that join to create molecules that link up with other molecules to create organisms, and so on.  Each level in this workflow becomes a more complex unit that eventually gets presented to the user as a full page.  This dissection of page elements can help keep development clean and modular, which translates into readable, reusable code.

Pattern Lab is an extensive collection of tools to help aid in atomic design.  It puts site elements into a robust style guide format.  A user can create static sites and component libraries quickly.  It also has a viewport resizer to be sure that components are working across all screen sizes.

BEM Syntax

Block-Element-Modifier syntax is one way of getting developers on a project working together to produce code that’s semantic and reusable.  It starts with blocks, which are the independent entities of an application.  For instance, a search bar made up of a label, input and submit button would be considered a block.  The submit button in this search block would be an element that performs a particular function.  Modifiers are the states that alter a block element’s characteristics or behaviors, such as an active state.

Introducing the BEM concept to a project helps both present and future developers understand what element and modifiers are currently in use.  The BEM concept can also help designers and developers be on the same page with naming conventions that are logical.

My only gripe about the syntax is the use of double underscores and hyphens.  It’s certainly not my typical approach when naming classes, but I’m finding that as I’ve worked with some examples, that distaste fades pretty quickly.

Rather than break down the concepts of BEM in this post, I would urge you to read through this article to get a better understanding of how this syntax works.  CSS-Tricks also has a primer on this concept.

Final Thoughts

I’ve seen too many projects cave in from complications where the benefits of these previously mentioned concepts could have provided proper guidance in the beginning.  Using an atomic design workflow and BEM syntax with Drupal 8’s new templating engine will (hopefully!) make a themer’s life more enjoyable.  Finding common ground with naming conventions and compartmentalizing a project helps both designers and developers connect on the finer details.  Overlooked questions can also be raised with this type of workflow. Plus, if other team members join a project, they would be able to see what’s happening a lot more easily than they may have in the past.