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.

image
 
 
 

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

image
 

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:

image
 

CSS:

image
 

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.

Advertisements

3 thoughts on “Less is more (no pun intended)

  1. Very true! I’ve only been learning for about 1 month and a half and I am starting to realise how inefficient it is to give everything their own class name. I used to go crazy with class names.

    p.s “talk nerdy to me” is freaken hilarious :’)

    Like

    1. Hi Jonathan! Thank you for your comment, I’m glad you enjoyed my post. I really liked this post of yours https://jonathanpuc.com/2017/03/29/document-8-difference-between-master-and-beginner/, it is so true that only once you’ve had struggles and have overcome them that you become better at what you do, and essentially, the master. It’s because of my mistakes when using classes that I am now able to post stuff like this!

      Wishing you all the best in your journey 🙂

      Like

      1. Glad to hear you enjoyed it! There is no better feeling than overcoming your struggles. Sometimes people forget to be grateful for the things they DO know. Whenever I’m having a hard time I always take a minute and become thankful for what I have managed to learn along the journey. Its healthy to be positive in a learning process.

        Ditto Natalie!

        Liked by 1 person

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s