Именовать вещи всё ещё сложно?

В Mastodon, Cassondra Roberts спросила...

Быстрый опрос для тех, кто пишет веб-компоненты:

Именование вещей — это _____.

• всё ещё сложно.
• уже не так сложно.
• просто покажи мне результаты.

Это напоминает старую аксиому...

Две самые сложные проблемы в программировании — это именование, не валидность кэша и ошибки на единицу.

Я ответил "уже не так сложно", но почти 90 процентов респондентов сказали, что это всё ещё сложно.

И я думаю, что это потому, что веб-компоненты на самом деле не решают проблемы именования. Многие проблемы, связанные с именованием вещей, возникают из-за попыток умничать или создания вещей, которые пытаются сделать слишком много.

Если у вас небольшие, узконаправленные функции, а имена переменных, классов и так далее понятны и очевидны, именование может быть относительно простым.

Например, если у вас есть переменная, в которой хранится куча кнопок, назовите её btns. Если у вас есть несколько кнопок, добавьте тип кнопки, например accordionToggles или что-то в этом роде.

let btns = document.querySelectorAll('button');
let accordionToggles = document.querySelectorAll('[data-accordion]');

Не пытайтесь умничать. Не пытайтесь быть краткими.

Просто называйте вещи своими именами.

Для переменных и функций, возвращающих логические значения, начните с дескрипторов типа is, has, contains и т. д.

let isPasswordValid = password.length > 16;
let hasAccess = user.permission.includes('admin');
let containsMerlin = ['Gandalf', 'Merlin', 'Radagast'].includes('Merlin');

Функции обычно выполняют действия, поэтому они должны начинаться с глагола.

function getUsername () {
 return localStorage.getItem('username');
}

function loginUser (username, password) {
 // ...
}

function saveSettings (settings) {
 // ...
}

Если функция выполняет несколько действий так, что придумать ей название, ориентированное на глагол, очень сложно, разделите её и сделайте так, чтобы она выполняла меньше действий!

Этот шаблон именования также применим к CSS и пользовательским элементам.

.list-inline {}
.btn-primary {}

.text-large {}
.text-larger {}
.text-color-primary {}

.is-active {}
.has-submenu {}

<modal-toggle></modal-toggle>
<modal-content></modal-content>

<accordion-group></accordion-group>

<table-of-content></table-of-content>

Очень многие проблемы, связанные с именованием (и конфликтами именований) и долгосрочной сопровождаемостью проекта, сводятся к тому, что разработчики слишком умны или пытаются сделать слишком много с помощью одной конкретной переменной, функции или стиля.