Здравствуйте, меня зовут Дмитрий Карловский и я.. изобрёл $mol только для того, чтобы ваши глаза кровоточили, глядя в его код. Во всяком случае, такое ощущение может сложиться, если почитать разного рода околоJSНые чаты, но не обращаться к первоисточникам, где все технические решения вытекают из чисто прагматических рассуждений. Один из таких анализов позвольте представить вашему вниманию.

Способы записи

camelCase

Традиционно используются в именах переменных и полей во многих современных языках.

❌ Требуется много нажатий шифта вовремя.

❌ слипшиесяСловаТрудноЧитать.

❌ Проблемы с аббревиатурами: sdpFmtpLine, encodeURICoponent.

❌ Имеет проблемы с наложением стилей в CSS (в зависимости от типа элемента и типа селектора стиль может не примениться).

PascalCase

Традиционно используются для имён классов и глобальных неймспейсов.

❌ Требуется много нажатий шифта вовремя.

❌ СлипшиесяСловаТрудноЧитать.

❌ Проблемы с аббревиатурами: XMLHttpRequest, HTMLBRElement, IDBOpenDBRequest, RTCDTMFSender.

❌ Одноимённые имена файлов могут вызвать проблемы в не чувствительных к регистру файловых системах.

❌ Проблемы с наложением стилей в CSS (в зависимости от типа элемента и типа селектора стиль может не примениться).

lowercase

Традиционно используется для имён нативных событий в браузере.

❌ слипшиесясловатрудночитать.

❌ проблемы с аббревиатурами: onicegatheringstatechange.

UPPERCASE

Традиционно используется для cтандартных элементов в некоторых DOM-API (tagName, например)..

❌ СЛИПШИЕСЯСЛОВАТРУДНОЧИТАТЬ.

❌ Требует временного включения caps lock при вводе или зажатия шифта.

❌ проблемы с аббревиатурами: BGSOUND.

❌ Текст с малым числом выносных элементов сложно воспринимать: FIGCAPTION.

❌ Одноимённые имена файлов могут вызвать проблемы не чувствительных к регистру файловых системах.

❌ Имеет проблемы с наложением стилей в CSS (в зависимости от типа элемента и типа селектора стиль может не примениться).

kebab-case

Традиционно используются для имён в HTML, CSS, Lisp, а также в именах файлов.

❌ Редакторы не считают эти имена единым именем (выделение даблкликом, ctrl+стрелка и тп).

❌ Не допустимо в большинстве языков программирования.

❌ Имя получается на несколько символов длиннее.

❌ Лишние символы ломают Fuzzy Search в IDE/DevTools, так как они не встречаются в пути.

SHAWERMA-CASE

Традиционно используются для имён нестандартных элементов в некоторых DOM-API (tagName, например).

❌ Редакторы не считают эти имена единым именем (выделение даблкликом, ctrl+стрелка и тп).

❌ Не допустимо в большинстве языков программирования.

❌ Требует временного включения caps lock при вводе.

❌ Имя получается на несколько символов длиннее.

❌ Текст с малым числом выносных элементов сложно воспринимать: ACME-TOOLBAR-DROPDOWN.

❌ Лишние символы ломают Fuzzy Search в IDE/DevTools, так как они не встречаются в пути.

❌ Одноимённые имена файлов могут вызвать проблемы не чувствительных к регистру файловых системах.

❌ Имеет проблемы с наложением стилей в CSS (в зависимости от типа элемента и типа селектора стиль может не примениться).

snake_case

Традиционно используются в "олдскульных" языках (C, C++, Rust, Erlang, OCaml) и языках с упором на читаемость (Ruby, Python) для локальных имён и имён полей.

❌ требуется_много_нажатий_шифта.

❌ Имя получается на несколько символов длиннее.

❌ Лишние символы ломают Fuzzy Search в IDE/DevTools, так как они не встречаются в пути.

Cobra_case

❌ Требуется_много_нажатий_шифта.

❌ Имя получается на несколько символов длиннее.

❌ Лишние символы ломают Fuzzy Search в IDE/DevTools, так как они не встречаются в пути.

❌ Одноимённые имена файлов могут вызвать проблемы не чувствительных к регистру файловых системах.

❌ Имеет проблемы с наложением стилей в CSS (в зависимости от типа элемента и типа селектора стиль может не примениться).

SCREAM_CASE

Традиционно используется для констант.

❌ Требует зажатия шифта при вводе.

❌ Имя получается на несколько символов длиннее.

❌ Текст с малым числом выносных элементов сложно воспринимать: SVG_MORPHOLOGY_OPERATOR_UNKNOWN.

❌ Лишние символы ломают Fuzzy Search в IDE/DevTools, так как они не встречаются в пути.

❌ Одноимённые имена файлов могут вызвать проблемы не чувствительных к регистру файловых системах.

❌ Имеет проблемы с наложением стилей в CSS (в зависимости от типа элемента и типа селектора стиль может не примениться).

Смешение стилей

Традиционно проявляется при попытке использовать традиционное именование для каждого языка по отдельности. В разных местах одна и та же сущность имеет разное форматирование имени.

❌ Требуется дополнительное ментальное напряжение на ассоциацию и конвертацию разных форматов одного имени.

❌ Тут и там необходимы конвертации между стилями написания.

❌ Не везде возможна автоконвертация. Например в TypeScript на уровне типов такое затруднительно.

❌ Поиск всех вхождений одного имени в проекте приходится повторять для каждой формы написания.

❌ Суммирует недостатки всех употребляемых стилей.

Нативные API

Web API развивались стихийно, так что не стоит удивляться необоснованному разнообразию форматов имён в разных местах:

• JS:

  • PascalCase — классы

  • camelCase — поля, функции

  • lowercase — события

  • SCREAM_CASE — константы

• CSS: kebab‑case везде

• HTML:

  • lowercase — стандартные элементы и атрибуты

  • kebab‑case — нестандартные элементы и атрибуты

Отдельно стоит отметить смешение стилей, ведь одна и та же сущность может именоваться по разному в разных языках:

• Имена стандартных элементов:

  • JS: lowercase, UPPERCASE, PascalCase

  • HTML: lowercase

  • CSS: lowercase

• Имена нестандартных элементов:

  • JS: kebab‑case, SHAWERMA‑CASE, PascalCase

  • HTML: kebab‑case

  • CSS: kebab‑case

• Имена атрибутов:

  • JS: camelCase, lowercase

  • HTML: kebab‑case, lowercase

  • CSS: kebab‑case, lowercase

• Имена CSS‑классов:

  • JS: camelCase

  • HTML: kebab‑case

  • CSS: kebab‑case

Особняком стоит химерное именование констант типа SVG_MARKERUNITS_USERSPACEONUSE.

Рекомендации

✅ Оптимальный выбор - snake_case, как наиболее удобочитаемый и наименее проблемный.

Соглашения в $mol

• snake_case — любые имена в XHTML и CSS, локальные имена в JS

• Cobra_case — имена локальных фабрик в JS

• $nake_case — глобальные имена в JS, соответствующие FQN.

Послесловие

Надеюсь этот разбор будет для вас полезным, даже если выводы окажутся совсем иными.

• Указать на неточности или просто обсудить вопрос можно в комфортной обстановке темы про языки программирования на форуме Гипер Дев.

• Почитать другие тех анализы и помочь их улучшить можно в Энциклопедии по $mol.

Актуальный оригинал на $hyoo_page.