Effortless

As a designer, CSS is naturally my favorite language but I find that although it can do pretty much anything you ask, writing in CSS can quickly become a redundant task.

Let’s pretend you’ve completed a client site; you’re feelin’ good and everything in the world is right until your client decides to change their entire brand and identity. Suddenly, the world is crumbling around you and your anxiety disorder is kicking in full-force. You’ve applied hex codes to all the anchor tags that correspond with your client’s old brand and now you have to go into your css, cmd+f all hex codes for ‘red’ and replace them with the new ‘red’. That sounds easy, but if you’re dealing with many different CSS files your workflow has basically hit a roadblock until you’ve updated all of the ‘red’ hex codes.

This is where variables come into play. Let’s stick with our ‘red’ example: the old client red was #BF0930 but was changed #E74C3C. Instead of changing every instance of #BF0930, we can apply the variable @red to the hex code. In your LESS file (which is built off CSS so you can keep writing in a familiar language), you’ll define red as:

@red: #E74C3C;
.foo {color:@red;}

If our hypothetical situation ever happened, we would only have to change one hex code rather than every instance of it. Great success! Using variables for color is just one of a bajillion uses. I personally use variables as often as possible because it plays an important role in keeping consistent design across the site. You can make a variable for a sans serif font, border styles, logo use, etc.

Another cool LESS feature is nested rules. I prefer to keep with HTML tags rather than rely on clever class names. Everyone has their own coding grammar, but a lot of times we collaborate in teams and have several people working off the same stylesheet. Having to remember if names are broken up with a hyphen or underscore is a common example as to why giving every element a class can be too confusing. HTML tags were made to be used so let’s rely less on CSS classes and more on HTML!

Here’s an example from my work page. I’ve used only HTML tags to display a thumbnail grid:
https://codepen.io/JimJordan/pen/LAeCh

Remember to use caution when nesting. There’s always going to be the question about how much nesting is appropriate (I personally only go three elements deep). LESS will change the way you organize your stylesheets for optimal efficiency by using variables to define redundant style properties and nested rules to cut down on confusing element classes.

Send me a tweet if you found this article helpful or want to know more about LESS!