Maintainable Frontend Development with BEM

We are all familiar with the common interface development process which is: * first, preparing an interface layout by a designer; * then, making an HTML/CSS dummy; * next, adding some JavaScript tricks with a help of JavaScript ninja; * and, finally, having a server guy operating on templates and doing all the integration stuff. Even while sometimes all these things are done by the same person, these are different roles and different project stages, and you switch from stage to stage to complete the development cycle. When looking for performance gains, people often try to achieve that by changing the way the process is managed. This presentation is about is a completely different approach which changes development from within. The goal is to convert a flat process with distinct stages into a continuous, uninterrupted development flow. You can achieve this by decomposing a web interface into independent pieces (the so-called blocks), once and for all, and use them to build interfaces the same way bricks are used to build a house. Thus, each of these interface components can be developed separately, which allows maintenance, refactoring and redesign to happen simultaneously on different interface parts, whenever necessary. You are not tied to a specific stage of project development anymore. To make this happen, there are several principles you can follow: 1. Special project file structure, where files are stored the way the whole project can be built from components; 2. CSS guidelines that allow an interface piece to fit anywhere on any page without affecting other pieces; 3. In JavaScript, your functionality can be described in a highly semantic way usually unavailable with any other common approach. All this magic is called BEM, which stands for Block, Element, and Modifier. With my presentation, this technology will be revealed in greater detail, and magic explained bit by bit.