Hints to make your HTML markup easy

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.  

HTML framework

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.


Divide css

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.  


General less

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.  

Share via:
Recommended posts:
Connecting Raspberry PI via Azure IoT: Step-By-Step Tutorial

Connecting Raspberry PI via Azure IoT: Step-By-Step Tutorial

Top 10 IoT sensors in 2019

Top 10 IoT sensors in 2019

CI server on Mac OS for iOS using GitLab and Fastlane

CI server on Mac OS for iOS using GitLab and Fastlane

Interested in latest news in IT sphere?

Subscribe to start receiving notifications about new posts
28 Oct 2019

Indeema receives Clutch leader award for top development companies in Ukraine

23 Oct 2019

6 Promising German-Austrian IoT Startups

8 Oct 2019

Giving a presentation with perfect UI/UX design

17 Sep 2019

5 IoT Trends to Watch in 2020