What is the Kebab Case? What's the difference between the Pascal Case and the Snake Case?

In the world of development, you have probably already heard terms like Kebab Case, Pascal Case, or Snake Case! 😉

These terms are actually naming conventions very frequently used in various programming languages. Each of them has its own peculiarities: a convention is used for a specific purpose and not for another!

The purpose of a naming convention is simple:

• to design maintainable code that is easy to navigate
• to maintain consistency across different files, especially when collaborating
• to improve code readability

Let's delve deeper into all the technical details of each one!

Table of Contents

1. What is Kebab Case? 🤔
   1. Origins of Kebab Case
   2. How to Write in Kebab Case?
   3. Example of Using Kebab Case
      1. At the URL Level
      2. At the CSS Classes Level
2. What is Pascal Case? 🤔
   1. Origins of Pascal Case
   2. How to Write in Pascal Case?
   3. Example of Using Pascal Case
3. What is Snake Case? 🤔
   1. Origins of Snake Case
   2. How to Write in Snake Case?
   3. Example of Using Snake Case
      1. Snake Case with Python
      2. Snake Case with Ruby
4. Comparison between Kebab Case, Pascal Case, and Snake Case ❌
   1. Visual Differences
   2. Summary of Uses
5. Why Use Naming Conventions?
   1. To Improve Readability and Facilitate Collaboration
   2. For Code Maintainability
6. Conclusion
7. FAQ on Naming Conventions 👀

What is Kebab Case? 🤔

Kebab Case is a naming convention where words are separated by hyphens, and each letter is in lowercase. Its name comes from the resemblance of hyphens to a kebab skewer, with words attached like pieces of meat on the skewer. 😋

Origins of Kebab Case

Originally, the term Kebab Case is a humorous invention within the developer community: nothing can make people smile more than a convention named after one of the most consumed products daily!

Even though this name might make you smile, it is an official and recognized name.

How to Write in Kebab Case?

To write in Kebab Case, you need to follow a few simple rules:

• All words must be in lowercase;
• Words must also be separated by hyphens (-);
• There should be no uppercase letters or special characters.

Example

This is a name using Kebab Case: mon-site-internet.html or ma-classe.

Example of Using Kebab Case

Kebab Case is commonly used in file names or HTML elements.

At the URL Level

It is often recommended to use Kebab Case for URLs as it is easier for search engines to read and compatible with search engine optimization (SEO).

For example: https://believemy.com/course/formation-html.

Speaking of which, using Kebab Case in URLs also helps avoid encoding issues with special characters like spaces. 😉

At the CSS Classes Level

It is quite common to also use Kebab Case for naming classes in style sheets:

.menu-principal {
  color: red;
}

What is Pascal Case? 🤔

Pascal Case (also known as Upper Camel Case) is another naming convention in which each word starts with an uppercase letter and the words are concatenated together, without any separators.

Origins of Pascal Case

The origin of Pascal Case comes from the programming language Pascal. Indeed, in this language, types and classes must adhere to certain rules: the Pascal Case name originates from this rule which is now adopted in many other programming languages like JavaScript.

How to Write in Pascal Case?

The rules for writing in Pascal Case are as follows:

• Each word must start with an uppercase letter, including the first one;
• Words must be concatenated without spaces or hyphens.

Example

Here is an example of using Pascal Case: MaClasse or MonComposantReact.

Example of Using Pascal Case

We generally use Pascal Case when we want to name classes or components with React or NextJS, for example.

Here is a small example with JavaScript:

class Personne {
  constructor(prenom) {
    this.prenom = prenom;
  }
}

In this example, Personne is a class name in Pascal Case.

What is Snake Case? 🤔

Snake Case is a naming convention in which words are separated by underscores (_) and all are in lowercase.

There is also a variant of Snake Case where everything is in uppercase: it is generally used to define constants in programming languages like Python, for example.

Origins of Snake Case

The term Snake Case comes from the snake-like shape created by underscores between words, resembling a snake that crawls.

It is one of the oldest naming conventions, used in programming languages like C, Python, and even Ruby! 😬

How to Write in Snake Case?

The rules for writing in Snake Case are simple:

• All words must be separated by underscores (_);
• and be in lowercase.

Example

Here is a small example of using Snake Case: nom_utilisateur and adresse_email.

Example of Using Snake Case

Snake Case is very often used in older programming languages. 😗

Snake Case with Python

Snake Case is used with Python for variable names, for example:

prenom_utilisateur = "Nicolas"
adresse_email = "nicolas@believemy.com"

In the variant of Snake Case where everything is uppercase, it is used to define constants (as mentioned earlier):

PYTHON

TAUX_TVA = 20

Snake Case with Ruby

Snake Case is also used with Ruby for file names: mon_fichier.rb.

Comparison between Kebab Case, Pascal Case, and Snake Case ❌

Visual Differences

Here is a summary table of the differences between Kebab Case, Pascal Case, and Snake Case:

Summary of Uses

To summarize, here is how naming conventions are generally used:

• For Kebab Case: it is generally used for file names, URLs, and CSS classes;
• For Pascal Case: it is used more for classes or components with React;
• For Snake Case: it is used more for Python or Ruby, while its variant is used to define constants with Python.

Why Use Naming Conventions?

Using a naming convention may seem a bit rigid: you might feel obliged to follow rules without really knowing why you use them.

Just as every good developer should know why they use something rather than just knowing how to use it, let's highlight the necessity of using naming conventions! 😉

To Improve Readability and Facilitate Collaboration

Using a naming convention means having a rule that defines all your files, projects, and codes you encounter on the internet: in other words, just as today everyone uses the same way of speaking to understand each other, it is exactly the same for programming.

Using a naming convention (or even more globally, a convention in general!) allows you to follow rules that all developers use.

Another way to think about naming conventions is to consider the traffic code: we all follow the same rules on the road to avoid having an accident at the first red light we encounter, the same goes here.

For Code Maintainability

Well-named code is easier to maintain in the long run. Conventions allow you to remain consistent in a project even during major changes or significant feature additions.

Conclusion

Naming conventions like Kebab Case, Pascal Case, and Snake Case are not just formalities. 😗

They play a crucial role in the readability, consistency, and maintainability of code. Each convention has its context of use, and knowing which one to use is a sign of professionalism in development.

Whether you are developing websites, mobile applications, or more complex programs, choosing the right naming convention will help you create cleaner code that is easier to understand for yourself and your colleagues.

FAQ on Naming Conventions 👀

Here is a small summary of some interesting questions that our learners often ask us:

Which naming convention is the best?

None. It all depends on your need. Each of the conventions we mentioned here is used according to the programming language you are developing with.

Can you mix multiple naming conventions in the same project?

Yes. You can use multiple naming conventions in the same project as long as you follow their rules. For example, using Pascal Case for components and Kebab Case for classes in your CSS stylesheet is perfectly feasible.

Why is Kebab Case recommended for URLs?

Kebab Case is recommended for URLs because it is SEO-friendly and improves the readability of links for users and search engines.

Are we obliged to use naming conventions?

No. The code will work even if you don't use naming conventions (fortunately!), but you will lose out in the long term when you want to progress.