In React, why I use kebab-case for all my file and folder names—and why you should too
React does not provide strict folder/file naming conventions, leaving us with options... This is not always a good thing. Let's walk through the options we have, focusing on their issues vs simply using kebab-case for all folder/file names.
❌ Using different conventions per file type
- The above were rules from an old project.
- From my experience, this added an unnecessary, cognitive step—one had to think about which case to use every time a new folder/file had to be created, and because we were always in a rush, led to frequent mistakes.
- There is even a book called Don't Make Me Think by Steve Krug... think about that😉!
❌PascalCase
Windows and MacOS have case-insensitive file systems, thus importing a UserProfileCard.tsx as userProfileCard.tsx won't cause a problem, BUT if that mistake makes its way to a Linux machine (via another developer / production / build pipelines) an error of Module not found: Error: Can't resolve './userProfileCard.tsx' could cause the app to crash.
Linux uses case-sensitive file systems. It treats UserProfile.jsx and userProfile.jsx as two different files.
❌camelCase
Same as PascalCase (reverse example).
✅kebab-case
- ✅ Lowercase-only: avoids casing issues on case-sensitive file systems
- ✅ Common in file and folder names in modern web projects
- ✅ More common in front-end: E.g., URLs, CSS class names, and HTML attributes typically use kebab-case
- ✅ Easy to read: hyphens are clear visual separators
- ✅ CLI-friendly: no need for quotes or special characters
❌snake_case
- ✅ Lowercase-only: avoids casing issues on case-sensitive file systems
- ✅ Commonly used in Python and Ruby
- ❌ Less common in front-end: E.g., URLs, CSS class names, and HTML attributes typically use kebab-case
- ❌Requires Shift to type
- ❌ "_" is slightly longer than "-" resulting in longer file names:
- example_of_a_long_file_name_.tsx
- example-of-a-long-file-name.tsx
- ❌ long "_" separated file names are more difficult to read than long kebab-case file names. This is because, as one reads, the eye moves across the vertical-middle of each letter as it moves horizontally across the word, but the "_" at the bottom of the word forces the eye down, which can cause a blurry effect.