If you spend any time writing styles, I am sure you will frequently have written some that are duplicates of existing ones elsewhere in the same style sheet; this is particularly true if you are creating styles for elements of a site, such as a menu system using <ul> or <li>.

It can add a lot of extra code bloat from duplicated styles. Thankfully, there is a way we can reduce this, by using Less' ability to nest styles. Let's take a look at how this principle works, by creating the online equivalent of a business card.

For this exercise, we will need a few things. As a start, we'll need an image on our card; in this instance, we'll use an avatar, as this business card will be displayed on websites. There are thousands of icons available for this purpose; I will assume you have picked a suitable one and saved it as avatar.png. I've used the Office Client Male Light Icon, available at http://www.iconarchive.com/show/vista-people-icons-by-icons-land/Office-Client...