Modular CSS with LESS

All class names and IDs in CSS are global, which makes it extremely difficult to maintain in large-scale projects. No matter how well you specify your naming conventions, vanilla CSS is a pretty messy language to work with.

Some of the ways we can solve that problem, or at least minimize it, is by implementing CSS preprocessor frameworks, such as Sass and LESS. Both of them are allowing us to separate the style sheets into logical modules (files), create variables, mix in classes, and generate CSS with loops and conditions. At the end of the development cycle, we can compile all the files into one or many plain CSS files before moving the styles to production.

Let's set up a simple Meteor app and implement the same grid with LESS.

In the terminal, run the following command:

>> meteor create less_app;

We need to add the less package, as follows, to allow Meteor to compile the LESS files into CSS:

>> meteor add less;

Here's a screenshot of the folders and files...