Scalable architecture with SMACSS, BEM, and OOCSS


CSS comes off as a simple language but as your codebase grows so does the technical debt. If not used correctly, you will end up with a bunch of code that is not only difficult to manage and extend but also doesn't follow any of the principals (DRY/SRP) our forefathers with the UNIX beard had passed on to us. 

SMACSS, BEM, and OOCSS are the three methodologies that have emerged in the last few years that have helped companies like Facebook and Twitter with massive codebases to scale while continuously iterating and extending. We will learn how to adopt these techniques to write scalable and maintainable code which portrays a single author but in reality has multiple committers.

We'll be learning about:

  • Component abstraction: Making a shift from theming for pages to theming for components.
  • Naming patterns: Classes that are easy to extend and reuse with the low specificity.
  • Preprocessors: Using preprocessor for dividing large stylesheets into components and abstracting magic data.
  • Drupal: How to use all these techniques in harmony with Drupal.

Session Track

Front End

Experience Level


Drupal Version