Refactoring Nested CSS Rules using LESS

  • Sep 10, 2013 at 6:15 PM
  • Shawn Wildermuth
  • 2 Comments

One of my favorite features of LESS is the ability to simplify my CSS rules that are deeply nested by using LESS to compose them more simply. I like this feature because it gives me the ability to clean up messy CSS files and make them more maintainable. Take a look to see what I am talking about.

LESS is an open-source dynamic stylesheet language for adding features to the CSS language that help you build better CSS. LESS parsing is supported in the free Web Essentials extension for Visual Studio 2012 and 2013 (though not supported for the Express editions) as well as in the free WebMatrix tool from Microsoft. It is also supported in most IDEs, as a JavaScript library and even a command-line LESS builder.

You can view this excerpt from my Pluralsight course covering Web Debugging with Firebug, Fiddler and more.  If you want to view the entire course, you can find it here:

http://pluralsight.com/courses/web-debug

 

Comments

Gravatar

Patrick Long Wednesday, November 06, 2013

This is now my least favourite feature of LESS. When I first came to LESS i thought it was cool but you can end up with crazy levels of nesting resulting in high levels of specificity.

Pat

Gravatar

Shawn Wildermuth Wednesday, November 06, 2013

Patrick,

This is another instance of "moderation" where this feature is really helpful for building specificity when you need it, but it's not a replacement for using top-level rules.


Leave a Comment

*
*
*