Skip to content

Instantly share code, notes, and snippets.

@meenie
Created October 21, 2013 02:54
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
Star You must be signed in to star a gist
Save meenie/7078009 to your computer and use it in GitHub Desktop.
Proposal for modularising LESS files in your front-end MVC application using Grunt

Background

One of the industry standards that has come about since the inception of JavaScript MVC frameworks is to organise your application by feature, rather than by common files. The structure of your application follows closely to the URL structure of your application. For an example see https://github.com/ngbp/ng-boilerplate/tree/v0.3.1-release/src/app. So each feature of your application has it's own stylesheet, most likely a LESS file. You put all of the styles pertaining to that feature in there. Then you use a grunt task which collects all of the LESS files, compiles them into CSS and then concatenates them into one CSS file which is used for the whole application.

The Problem

The issue you run into is that you need to have some level of specificity so that the styles you add in that particular file do not apply to other features. Too much specificity can actually slow down the rendering engine in the browser when it interprets your styles. Not enough specificity and those styles can bleed over to other features.

Proposed Solution

Creating a grunt task that will run before the LESS files are compiled/concatenated. This task will seek out all templates in each folder and wrap the content in a div that has an ID attribute with a randomly generated string (or even string made of the relative path to your less file). It then opens up the LESS file and wraps all of the rules with that randomly generated ID. After this task is complete, the LESS compiler can go about it's business. Now all of your rules will only apply to this specific feature of your application and there is no chance of the rules leaking to other features.

Thoughts?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment