Name Format in Code
Tags: javascript, webdev, programming, analytics
Published: 2024-04-03 16:09:50

Hello, my name is Dmitry Karlovsky and I... invented $mol just to make your eyes bleed looking at its code. In any case, this feeling can be formed if you read various kinds of *around JS* chats, but do not turn to the primary sources, where all technical solutions follow from purely pragmatic reasoning. Let me present one of these analyzes to your attention...

![](https://i.imgur.com/hhEjmCm.png)

# Formatting Methods

## camelCase

Traditionally used in variable and field names in many modern languages.

❌ It takes a lot of Shift presses in time.
❌ stuckTogetherWordsAreDifficultToRead.
❌ Problems with abbreviations: `sdpFmtpLine`, `encodeURICoponent`.
❌ Has problems with styling in CSS (depending on the element type and selector type, the style may not be applied).

## PascalCase

Traditionally used for class names and global namespaces.

❌ It takes a lot of Shift presses in time.
❌ StuckTogetherWordsAreDifficultToRead.
❌ Problems with abbreviations: `XMLHttpRequest`, `HTMLBRElement`, `IDBOpenDBRequest`, `RTCDTMFSender`.
❌ Same file names can cause problems on case-insensitive file systems.
❌ Has problems with styling in CSS (depending on the element type and selector type, the style may not be applied).

## lowercase

Traditionally used for naming native browser events.

❌ stucktogetherwordsaredifficulttoread.
❌ Problems with abbreviations: `onicegatheringstatechange`.

## UPPERCASE

Traditionally used for standard elements in some DOM-APIs (`tagName`, for example)..

❌ STUCKTOGETHERWORDSAREDIFFICULTTOREAD.
❌ Requires caps lock to be temporarily turned on when typing or holding down Shift.
❌ Problems with abbreviations: `BGSOUND`.
❌ Text with a small number of callout elements is difficult to perceive: `FIGCAPTION`.
❌ Same file names can cause problems on case-insensitive file systems.
❌ Has problems with styling in CSS (depending on the element type and selector type, the style may not be applied).

## kebab-case

Traditionally used for names in HTML, CSS, Lisp, and also in file names.

❌ Editors do not consider these names to be a single name (double-click selection, ctrl+arrow, etc.).
❌ Not allowed in most programming languages.
❌ The name turns out to be several characters longer.
❌ Extra characters break Fuzzy Search in IDE/DevTools, as they are not found in the path.

## SHAWERMA-CASE

Traditionally used for names of non-standard elements in some DOM-APIs (tagName, for example).

❌ Editors do not consider these names to be a single name (double-click highlighting, ctrl+arrow, etc.).
❌ Not allowed in most programming languages.
❌ Requires caps lock to be temporarily enabled when typing.
❌ The name turns out to be several characters longer.
❌ Text with a small number of callout elements is difficult to perceive: `ACME-TOOLBAR-DROPDOWN`.
❌ Extra characters break Fuzzy Search in IDE/DevTools, as they are not found in the path.
❌ Same file names can cause problems on case-insensitive file systems.
❌ Has problems with styling in CSS (depending on the element type and selector type, the style may not be applied).

## snake_case

Traditionally used in "old school" languages (C, C++, Rust, Erlang, OCaml) and readability-focused languages (Ruby, Python) for local names and field names.

❌ it_takes_a_lot_of_shift_presses.
❌ The name turns out to be several characters longer.
❌ Extra characters break Fuzzy Search in IDE/DevTools, as they are not found in the path.

## Cobra_case

❌ It_takes_a_lot_shift_presses.
❌ The name turns out to be several characters longer.
❌ Extra characters break Fuzzy Search in IDE/DevTools, as they are not found in the path.
❌ Same file names can cause problems on case-insensitive file systems.
❌ Has problems with styling in CSS (depending on the element type and selector type, the style may not be applied).

## SCREAM_CASE

Traditionally used for constants.

❌ Requires holding down Shift when entering.
❌ The name turns out to be several characters longer.
❌ Text with a small number of callout elements is difficult to perceive: `SVG_MORPHOLOGY_OPERATOR_UNKNOWN`.
❌ Extra characters break Fuzzy Search in IDE/DevTools, as they are not found in the path.
❌ Same file names can cause problems on case-insensitive file systems.
❌ Has problems with styling in CSS (depending on the element type and selector type, the style may not be applied).

# Native APIs

Web APIs have evolved spontaneously, so don't be surprised by the unreasonable variety of name formats in different places:

- JS:
   - PascalCase - classes
   - camelCase - fields, functions
   - lowercase - events
   - SCREAM_CASE - constants
- CSS: kebab-case everywhere
- HTML:
   - lowercase - standard elements and attributes
   - kebab-case - non-standard elements and attributes

Separately, it is worth noting the mixture of styles, because the same entity can be called differently in different languages:

- Standard element names:
   - JS: lowercase, UPPERCASE, PascalCase
   - HTML: lowercase
   - CSS: lowercase
- Names of non-standard elements:
   - JS: kebab-case, SHAWERMA-CASE, PascalCase
   - HTML: kebab-case
   - CSS: kebab-case
- Attribute names:
   - JS: camelCase, lowercase
   - HTML: kebab-case, lowercase
   - CSS: kebab-case, lowercase
- CSS class names:
   - JS: camelCase
   - HTML: kebab-case
   - CSS: kebab-case

The chimeric naming of constants like `SVG_MARKERUNITS_USERSPACEONUSE` stands out. The sleep of reason gives birth to monsters.

# Recommendations

> ✅ The optimal choice is snake_case, as it is the most readable and least problematic.

## $mol convention

- snake_case - any names in XHTML and CSS, local names in JS, and file names
- Cobra_case - names of local factories in JS
- $nake_case - global names in JS corresponding to [FQN](https://en.wikipedia.org/wiki/Fully_qualified_name).

# Afterwords

I hope this analysis will be useful for you, even if the conclusions turn out to be completely different.