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.