Think back to the previous chapter, where we introduced Bootstrap and covered how Less is used to create the styles that are compiled into clean, semantic HTML…Bootstrap looks good, is easy to use, and provides a nice, consistent theme to our site, right?

Wrong—it suffers from one particularly nasty problem: Bootstrap embeds CSS classes directly within HTML. We could argue that there is nothing wrong with that, except for the fact that the style names used are not always semantic!

This whole concept of providing semantic code has been at the forefront of developers' minds for years. Some frameworks such as Scaffold (for PHP) or Compass (for Ruby) recognized the problem back as far as 2009, yet Bootstrap still forces us to use nonsemantic CSS styling in our HTML code. To see what this all means, let's delve in deeper, take a look at an example, and understand how we can correct this using Less.