Those who generate HTML markup are interested in writing the code correctly, quickly and with minimal number of mistakes. The most likely hindrance to that is the problem of writing identical parts of the code. The most immediate solution is to use the same HTML code for identical classes. Still, for some mysterious reasons and high speed traffic, something often does not work.
Yandex found a solution to this problem in a popular web-development methodology called BEM. It is highly effective for making our markup easier.
This methodology allows you to influence the behavior of the given blocks or elements with the help of modificators, and adjust them to specific case. We’ll give you some hints on how to benefit from this methodology most.
What you should definitely use
BEM methodology is as simple as it seems to be. You start from separation of particular blocks and get ready for making markup. By doing so, you shape the flexible HTML framework that you will easily customize in the future.
You can use preprocessors to simplify your work even more. In our case, we use jade as it provides such a trivial but important thing as “includ head.jade”. It allows us to easily insert blocks just importing the file containing the necessary block to where we need it.
Of course, having single framework of your future page or blocks is never enough. So, our next step would be the creation of CSS architecture. It may sound redundant but this is how you reduce the code duplication to the minimum.
Related: Node.js back-end sucks, doesn’t it?
Well, I’ll give you a hint. You can take all this architecture from the HTML architecture we have developed previously. Just divide CSS into separate files with identical names and import them to the main file.
Our advice if use LESS preprocessor for CSS as it ensures flexibility and availability of imports, mixins, constants and other things to simplify our routine work. Of course, you can use any preprocessor you want, but their function would be the same since they all have the same properties.
We also suggest you pay your attention to “constant.less” file. This file contains all main variables used in our template. You can choose one of the variables and determine other indents or sizes. This will give you pretty good flexibility in case of adaptive blocks.
No doubt, you can use such units as “em”, and “rem” that work depending on both parent font size and the global html font. When you change font in media requests and get the same results. Warning! This method requires understanding of how these units work, otherwise you can get confused with them.
Issues you may face
Nesting. Since blocks consist of elements, which in turn consist of other elements, nesting can seem endless to you. However, it does not mean we cannot elements and blocks separately from one another. It can look frightening at first, but soon you will see that practical implementation is rather convenient.
Class readability. BEM methodology implies content accumulation that negatively affects class readability. The more classes you have the faster you forget about them. It means that this approach requires efficient documentation and structuration. S
To sum up, there are many ways you can make your markup easier. We suggested something that we know works for sure. After all, we have implemented BEM methodology ourselves. Whatever methodology you choose, only practice will show what works best for you.