Lets use LessJS to Create Less CSS not just CSS

How can we use Less efficiently!!??


I have been working on a project with more than 40 FED’s and we are using LESS for CSS Architecture. LESS and SASS has given front end developers a hope for more modularised components into our CSS Architecture. With that I have observed the use and misuse of LESSJS to create more meaningful development of CSS.

In this article I want to share one efficient thing that you should use in your LESS and one thing which you should always avoid. (This could be applied to SASS Architecture as well.)

What can be more efficient in Cascading Style Sheets than including the only styles into the CSS file for that particular page, i.e. removing styles which are unused. To enable this you need to utilize the LESS functions and modules efficiently and bravely. Let me give you an example where I have used this modular concept of LESS efficiently.

CODE
/*Icon Fonts */
.icon-wireless-outline, .icon-wireless-dashboard,.icon-circle-action-close, .icon-website-hosting-outline,.....{
font-family: ‘icons’;
}
.icon-wireless-outline:before {
content: “\e600";
}
.icon-wireless-dashboard:before {
content: “\e601";
}.......

We all use Icon fonts in our projects these days. They have become one way to decrease the number of image requests from the browser. Thats great. But with that we are defining more and more CSS for all the icons on the iconfont file. Above I have just a small snippet of it. But we have so many icons used in the project that just this icon font file is 21 kb. So that means we are including such big file just for icon fonts on each page where we have icons fonts used. Do you think this is efficient??!!

I sincerely do not like this approach of including all the CSS into a page which does not get used at all on the page. (Sometimes it freaks me out when a project use complete Bootstrap, and they use only components like tooltip or popups).


SOLUTION
/*Defining the icon-font modules*/
#icon(@list){
@{list} {
font-family: ‘icons’;
}
}
#icons-before(){
.icon_wireless_outline() {
content: “\e600";
}
.icon_wireless_dashboard() {
content: “\e601";
} ........
}

When you need particular icon font on the page, you just include that particular style using

@list: .dashboard,.outline;
#icon(@list);
.dashboard:before{
#icons-before.icon_wireless_dashboard();
}
.outline:before {
#icon-before.icon_wireless_outline();
}

RESULT
.dashboard,.outline {
font-family: ‘icons’
}
.dashboard {
content: “\e601";
}
.outline {
content: “\e600";
}

So what is the result of this is that instead of 21kb of CSS to be included in your CSS file you now include less than 1kb of CSS for that icons on the page. Isn’t this great!! If CSS is used responsibly, we will not be just proficient developer but responsible developer.


What should be avoided in our LESS Architecture is using Deep Nesting of CSS. Here is a detailed blogpost on the performance of CSS Selectors by Ben Frain (click here). I know this applies not just to LESS/SASS, but with these architecture, nesting is thought as a feature and used more and more…..

Below is one simple example which result in styles for a tag as

#wrapper {
#container {
div.toppost {
ul {
li {
a {

which results in

#wrapper #container div.toppost ul li a

which could be simply replaced by a small class attached to the anchor tag for the top post div like:

a.anchorclass { /*styles */ }

Using nested is okay, but having the whole page styles nested should never be preferred since it also comes with tight coupling with the markup, which means any changes would be difficult for us to manage.

My Preference now a days is to keep performance first for the webpage, and to implement grunt.js into our applications and get all the performance first task automated. I am really looking forward to use UNCSS Grunt task and remove the css not used on the page and make rendering of the webpage to be less than 1000ms.