Meta Refresh 2015

The web in your pocket

Bassam Ismail


Scalable architecture with SMACSS and BEM

Submitted Feb 25, 2015

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.
  • CMS: How to use all these techniques in harmony with content management systems.


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 and BEM are the two 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.

Speaker bio

I’m a 23 year old Front-end Developer from Srinagar, Kashmir. I work at Axelerant where most of my time is spent working on medium to large scale websites built on top of Drupal. I’ve been working with various startups for the past three years with an agile approch, building front-end for website and webapp.

I specialize in Front-end architecture, responsive design, web typography and UI/UX development. I’m passionate about JavaScript and spend most of time crafting software using Node.js and one of many client-side MVC frameworks. I’m a huge proponent of following best practices: TDD & BDD, proper design patterns, always optimizing, and using the right tools for the right job.

A believer of all Unixy things, I spend most of the time in the terminal. Vim is the text editor of choice. I live and breathe Open Source, I even started a local Open Source Community.


{{ gettext('Login to leave a comment') }}

{{ gettext('Post a comment…') }}
{{ gettext('New comment') }}
{{ formTitle }}

{{ errorMsg }}

{{ gettext('No comments posted yet') }}

Hosted by

Meta Refresh is an umbrella forum for conversations about different aspects of design and product including: UX and interaction design CMS, content management, publishing and content marketing Information architecture more