Naming Conventions

february 16, 2020

There are two things that come to mind when you open your own code after a long period of time.. or that even of another developer:

1. WOW! That is so cool!
2. Oh my goodness, who wrote this?!

To help you, I will be sharing some of my top tips on naming conventions to help out when looking back at this previous work.

Avoid abbreviation for things that are not commonly known

Things like "nav" or "hero" is okay because you or someone else nine times out of ten would know what this means.

Things like "blk" or "herr" is not okay because you or someone else will almost never know what this means unless they contributed and can remember what it was supposed to.

Make re-usable classes and names

When you type something out, don't cause the code to be DRY (which means: Don't Repeat Yourself). Make the classes and names re-usable, for example : "flex" could be used to throw flex display on something, but "flext-and-to-the-right" would not be good because now you're being super specific what that CSS class will do. Now if you need something on the left a few times, this will not serve you sell, and you'll end up making a longer** CSS file.

Try to avoid more than two words for a given name

Here's an example I found off a website in the past :

.button {
/* OK */

.dropdown-button {
/* still OK */

.dropdown-button-part-one {
/* Hmm, still ok, but will be unredable when adding children, for ex : */

.dropdown-button-part-one__button-admin {
/* Yikes !!! */

Make names reflect functionality

If your class sets the display to flex, you shouldn't name it: "super-awesome-block-element-thing" or even "hero-banner-box".. you should name it something related to what it does. This applies to all programming languages, and in my opinion, you should always be thinking of this when naming things.

These are just my opinion and suggestions to help you out long term, you do NOT have to use them, but take it for what its worth if it's any good to you..