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...

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.

Afterwords

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