Structuring your front-end application with BEM,LESS and GRUNT.

Every developer wants to write structured,maintainable and readable code.Every single line added by a developer adds up as user cost as they need to download extra bytes.Front end performance is beyond the scope of this article but there is a trade off between size and maintenance.
There is no particular definition or convention when it comes to maintaining or structuring your frontend application.If you dissect your frontend application you will see number of modules, home page,static page,product page etc.On proper analysis you can observe patterns that are repeated across these modules eg widgets,list structure(horizontal,vertical),paragraphs with headlines,sections etc.These follow a structure maintaining a symmetry across.

The front end comprise of HTML , CSS and Javascript. For structure and style there is HTML and CSS and to add behavior JS. But how to maintain and structure your front end application.This is the biggest problem in front-end, without proper structure and maintenance the size of your code-base can grow unnecessarily.

Any user who browse your webpages wants to see symmetry across the pages.So what’s the right approach to provide and maintain the same? The solution is defining everything at component level with a proper naming convention that can be easily understood by anyone.

We will use BEM and LESS to structure our application, BEM for naming convention and LESS for module wise style definition, and GRUNT or GULP for compiling and linting LESS files.

Folder Structure


BEM – Block, Element, Modifier methodology is a popular naming convention for classes in HTML and CSS. Developed by Yandex developers.The goal was to help developers better understand the relationship between the HTML and CSS for a given project.

LESS – Dynamic style sheet language that can be compiled to a CSS file

GRUNT or GULP – Is a Javascript task runner, in one word: automation.


Setting up GRUNT is beyond the scope of this article.

Defining a home page structure with BEM.

Block level components are isolated components independent of other components.Elements are parts of components.Modifiers are modifiers defined on block level components or elements.Generally modifiers are defined on block components but to add more flexibility it can defined on elements.

LESS files



Our components are in components folder.A good look at any components(less) files can tell you about the structure.

If you follow MVC Pattern, Modules can be defined at controller level eg home.less


These are the benefits of using BEM with LESS.
1)Code reusability.
2)Faster development.
3)Code maintainability.
4)Symmetry across the site(Nothing is one pixel up or one pixel down).

5)Only required styles are defined and imported.