Front-End Efficiency with BEM Syntax and Atomic Design


Successfully architecting a large-scale front-end project in this day and age is no small task. Imagine this:

You’re about to kick off a massive project with multiple complex template designs and a team of developers working alongside you. The deadline is aggressive and the budget is tight. Nothing new, right?

As a website increases in size and complexity during development, it becomes more and more difficult to write front-end code that isn’t duplicated, unclear, inconsistent, or prone to code conflicts. Even with the best of intentions and planning, the lack of a repeatable, comprehensive approach for dealing with large-scale front-end code can be a recipe for disaster.

In this session, we will:

  • Discuss the philosophy and necessity of abstracting our code in the interest of scalability and reuse.

  • Explore methods of analyzing a design in an effort to break it down into reusable parts using the Atomic Design Pattern, an organizational method to promote thoughtful code architecture.

  • Learn Block-Element-Modifier (BEM) syntax, an effective new naming convention pattern to establish an efficient, consistent, understandable codebase.

  • Tie all of our learning together by seeing some real-world Drupal examples in action.

Session Track

Front End

Experience Level


Drupal Version

When & Where

Wednesday, 13 May, 2015 - 14:15 to 15:15
515B -Forum One