DrupalCon Los Angeles 2015: 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.
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.