Vipin Raunchhela

Best Practices of ‘LESS’

less-wallpaper

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

@base-color: red; 
@light : lighter(@base-color - 3%);
@hyperlink:blue;
@headings:black;

 
These are simplest variables which are easy to remember and you can use them easily.

Now you must be thinking why not this-

@red:red;
// Instead of
@base-color: red;

 
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?

2. Mixins

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.

For example-

@mainfont :'railway', san-serif; 

.regular{
	font-family:@mainfont;
	font-weight:400;
}
.bold{
	font-family:@mainfont;
	font-weight:700;
}
.medium{
	font-family:@mainfont;
	font-weight:500;
}
.light{
	font-family:@mainfont;
	font-weight:500;
}

 
These can be used as a Mixin –

h2{
  font-size: 22px;
  .bold; // mixin containing all the property of .bold
}

.classname h2{
  font-size: 26px;
  .regular; //Mixin containing all the property of .regular
}

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-

.icon{
  background: url(../img/sprite_24x24.png) no-repeat 1px 1px);
  height: 24px;
  width: 24px;
  display: inline-block;
}

Instead of writing the above line again and again.
Create a variable like-

@icon16 : url(../img/sprite_16x16.png) no-repeat;
@icon24 : url(../img/sprite_24x24.png) no-repeat;
.icon24{
  background:@icon24 center center;
  height: 24px;
  width: 24px;
  display:inline-block;
}

 
You can use it as mixin or a common class. For example-

<a href="#" class="btnicon" />
.btnicon{  
  .icon24; //used as mixin  
  background-positon: left -20px; 
}

 
OR

<a href="#" class="icon24 btnicon" />

.icon24.btnicon{ 
    // used as a common class 
    background-positon: left -20px; 
}

 
Same you can do with the buttons also

.btn{
  padding:8px 20px;
  font-size:16px;
  border-radius:5px;
  opacity:0.9;
  cursor:pointer;
  &:hover{
   opacity:1; //by default hover effect
  }
}

.greenbtn{
  .btn; // containing all properties of '.btn' class
  background-color:green;
}

 
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-

.classname div h2 span{
font-weight:bold;
color:bold;
}

 
and what we have actually written in LESS is something like this-

.classname{
  div{
   h2{
    span{
     font-weight:bold;
     color:grey;
    }
  }
 }
}

 
OR

There could be number of hierarchic structures where we have written something like this-

h2 {
  span{
   css properties
  }
}

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-

.main-content .hyperlink{
  color:red;
  text-decoration:none;
   &:hover, 
   &:focus{
    color:green;
    text-decoration:underline;
 }
   // If we want to change the style of .hyperlink with different class then just add &.classname as used below
   &.active{
    //this will work as '.main-content .hyperlink.active'
   color:blue;
   text-decoration:underline;
   }
}