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.
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.
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.
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.