I have been practicing LESS from last two years within which I have learnt many things which were simple but yet imperative in all.
In this blog, I am not going to tell you what LESS does or how to install it? What kind of features you have in LESS? You can always get these details on the official site of LESS.
What I am going to tell you is about the good practices for LESS which will make your life easier while writing style sheet-
1. Use of Variable
Variable name should be easy and meaningful. So, don’t use too many variables as it will create a problem because we have to use them repeatedly.
To choose the variables name first go through the designs and study the theme, analyze the major colors and fonts, like how many types of major colors, font and its variations like bold, semi-bold, regular, italic, light, etc.
Your variable name should be simple and logical so that you can easily remember those names.
So be careful while picking the variable name.
For example -:
When your theme is based on red and black, you can use a variable name like
These are simplest variables which are easy to remember and you can use them easily.
Now you must be thinking why not this-
That would be a more easy variable name!
There is a reason behind this. Let’s suppose your UI Development work gets completed and now you have to change the theme color red to blue. What you are going to do? @red :blue;
Do you really think this makes sense? Variable name is ‘@red’ and value is ‘blue’. I m sure it doesn’t make any sense but @base-color : blue; this makes sense. Isn’t it?
Mixin is a set of css properties or in other words we can call it as a common class. It helps us in both ways, we can use it as a common class or a mixin .
We can use variables while creating mixins.
These can be used as a Mixin –
The main advantage is that when we have to change the font-family we only need to update the value of @mainfont : ‘robot’, san-serif; that’s it!
3. Use of background Images
To display a background image icon, we normally write like this-
Instead of writing the above line again and again.
Create a variable like-
You can use it as mixin or a common class. For example-
Same you can do with the buttons also
If you have to use the LESS for long term, then I’ll suggest you to create different file for variables and mixins because mixins looks same as a classes. If it’s in different file it will be easy to manage.
4. Repeated classes and tags
When I started with LESS I was using only two things- ‘variable name’ and ‘inheritance of classes’ but when CSS size increased, then I had to search for something. My code became an elephant in front of me and I had to fight with the self-written code. Who was the elephant in my code? It was the repeated CLASS NAME and TAG NAME! .
What browser show us in firebug style-sheet is something like this-
and what we have actually written in LESS is something like this-
There could be number of hierarchic structures where we have written something like this-
When I had to search for some particular “h2 span”, I had to go through all hierarchies that I have written and check which properties belong to the one I was searching. That was really time consuming.
To overcome this situation this is what I do now-
- Use of proper comments if I am using repeated classes.
- Break down large style sheet in modules for better understanding.
- Indent nested rules so it’s obvious that they’re related.
5. Use of pseudo classes or two class.
Use of pseudo classes like :hover, :focus, :after, :before etc. is easy to use in LESS. For example-