Less is more (no pun intended)

If there’s one thing I’ve learnt during my time as a developer, it’s the importance and efficiency of reusable code with the use of semantic class names. During the early stages of a front-end developers training, it’s common to use very specific class names for HTML elements, which is fine, but not if each of those elements will share the same properties.

For example:

Take this page, the two orange divs are of the same width and height. In earlier days, I suspect I would have given the left one a class name similar to that of ‘left-box’ and the right, ‘right-box’, right? Wrong. Naming them both box and applying the one set of properties is good enough. Not to mention left-box and right-box wouldn’t be entirely correct when it scales down to mobile, but that’s for another time.

 

 

 

So now let’s say you wanted a full length box below these two as so:

 

You’re probably wondering, aha! I can’t give that one a class name of box, it totally has different properties. Wrong. Because; A. amen for being able to give multiple class names, and B. this is where you can create your typography.

HTML:

 

CSS:

 

You probably get the picture. With just a few lines of code you’ve pretty much just given yourself a grid and a collection of class names which you can reuse throughout your website.

This isn’t to say of course, that you can’t have class name ‘register-user’ or similar. This is perfectly fine, but ask yourself why it needs to be as specific – perhaps you’re using it on some Javascript or it’s not displayed on the page til later.

Follow this process and I assure you it will cut down the amount of CSS lines in your project and your code will be much easier to read and understand.