DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

Hasan Zohdy
Hasan Zohdy

Posted on

Best Practices For Case Styles: Camel, Pascal, Snake, and Kebab Case In Node And Javascript

For being a good software engineer, it's too important to know what is the best practices for writing code and naming your variables, functions and classes properly, well this article will help you with it.

Case Styles

Basically, there are 4 ways of naming in general:

  • PascalCase
  • kebab-case
  • snake_case
  • camelCase

Now let's see each one of them in action for proper naming

Pascal/Studly Case

Also called Studly Case it basically means you write all words combined without any separators (not even whitespaces) and each word of the statement MUST be capitalized.

Let's say for example we've the following statement

total online users
Enter fullscreen mode Exit fullscreen mode

To Be

TotalOnlineUsers
Enter fullscreen mode Exit fullscreen mode

So what are our cases that we should write our code in studly case style?

It's recommended to use it in OOP classes, React Function Component, Typescript Types and Interfaces.


// types
// ❌ Nope
export type user = {
}

// βœ… Yes
export type User = {
}

// interfaces
// ❌ Nope
export interface user {
}

// βœ… Yes
export interface User {
}

// classes
// ❌ Nope
class user {
}

// βœ… Yes
class User {
}

// React function component
// ❌ Nope
const user = () => {
}

// βœ… Yes
const User = () => {
}
Enter fullscreen mode Exit fullscreen mode

Kebab Case

It's also called Spinal Case and it's basically writing all words combined with a hyphen - between each word.

This is usually used in CSS and HTML classes and ids.

total online users
Enter fullscreen mode Exit fullscreen mode

To Be

total-online-users
Enter fullscreen mode Exit fullscreen mode
<!-- HTML -->

<!-- ❌ Nope -->
<div class="user_info"></div>

<!-- βœ… Yes -->

<div class="user-info"></div>
Enter fullscreen mode Exit fullscreen mode
/* CSS */

/* ❌ Nope */
.user_info {
}

/* βœ… Yes */
.user-info {
}
Enter fullscreen mode Exit fullscreen mode

Snake Case

It's also called Underscore Case and it's basically writing all words combined with an underscore _ between each word.

It usually used in Python and Ruby and it's also used in SQL and MongoDB for naming collections but does not have pretty much usage in Nodejs or Javascript.

total online users
Enter fullscreen mode Exit fullscreen mode

To Be

total_online_users
Enter fullscreen mode Exit fullscreen mode

Camel Case

It's also called Camel Case and it's basically writing all words combined with the first word in lowercase and the rest of the words are capitalized.

It's recommended to be used in Javascript and Typescript for naming variables, functions and constants.

total online users
Enter fullscreen mode Exit fullscreen mode

To Be

totalOnlineUsers
Enter fullscreen mode Exit fullscreen mode
// ❌ Nope
const user_name = "John Doe";

// βœ… Yes
const userName = "John Doe";

// ❌ Nope
let my_var = 10;

// βœ… Yes
let myVar = 10;

// ❌ Nope
var my_other_var = 10;

// βœ… Yes
var myOtherVar = 10;

// ❌ Nope
function my_function() {

}

// βœ… Yes
function myFunction() {

}
Enter fullscreen mode Exit fullscreen mode

Conclusion

I hope you enjoyed this article, and if you have any questions or suggestions, please feel free to comment below.

Top comments (2)

Collapse
 
fruntend profile image
fruntend

Π‘ongratulations πŸ₯³! Your article hit the top posts for the week - dev.to/fruntend/top-10-posts-for-f...
Keep it up πŸ‘

Collapse
 
hassanzohdy profile image
Hasan Zohdy

Thanks for your support :)

Really appreaciate it.

πŸ” If you came here from Google, why not take a look at some of our top posts?