Как избавиться от неспособности придумать адекватное название блокам?

Question

[godsplane]

Я иногда не могу придумать адекватные названия блокам.
Например есть блок который выглядит как просто текст на черном фоне.
Я конечно могу написать что-то вроде .text-on-black-bg , но это как то не универсально.
Тоже самое с блоком слайдером. Видов сладйеров может быть масса.
Как например вы бы назвали этот слайдер?

А этот?

Я понимаю что тут дело в контексте, но в первом случае его вообще нет. И этот блок может повторяется в разных местах.
Есть какие то простые блоки, названия которым уже придумали за меня:
CTA, header, footer, features, list etc..

Смотря примеры на других сайтах подавляющее большинство либо как то генерят свои классы, либо используют утилитарный подход.

Как быть, что делать?
Может есть какой то чит о котором я не знаю.

Comments

[WbICHA]

Может есть какой то чит о котором я не знаю.

Накидаться веществами, а дальше само пойдёт.

[WbICHA]

А если серьёзно, то именно за это программистам и платят. Написать рандомный код может любой, но придумать нормальные названия переменным, классам и вообще любые адекватные названия – это 90% работы программиста. Это самая сложная часть работы программиста. Так что тут поможет только практика и опыт.

[Антон Литвиненко]

я иногда с женой советуюсь

[Yes It's matrik]

-Нет, ты должен придумывать нормальные названия классов!!
-Хаха container1 container2 container3 делает brrrrr

[Ankhena]

Например есть блок который выглядит как просто текст на черном фоне.

Он что, просто текст без заголовка и смысла? У блока, в котором он лежит нет названия?

Со слайдерами аналогично, они же не просто так приляпаны на страницу, есть ведь контекст, что хотят показать этим слайдером. Фотки туров или событий или что-то ещё.

[godsplane]

Ankhena, Это сам по себе блок.
Заголовки есть внутри этого блока.

[VolgaVolga]

Изучайте HTML других сайтов и смотрите имена классов.

[Ankhena]

godsplane,

Это сам по себе блок.
Заголовки есть внутри этого блока.

Обычно по ним можно понять о чем весь этот блок и дать ему название.
Либо это не один блок, а несколько, каждый со своим заголовком.
Либо это список каких-то блоков __list
Без контекста сложно.

[Владимир Кочергин]

Считаете, эту неспособность приобретённой? Раньше её не было и вы придумывали адекватные названия? Тогда попробуйте вспомнить когда она появилась, что могло быть причиной.

А если серьёзно, то, как уже отметили выше, это приходит с опытом. Выявляйте особенности блоков (в реализации или назначении).

Answer 1

[Сергей delphinpro]

https://tpverstak.ru/common-css-class-names/
https://github.com/yoksel/common-words
https://habr.com/ru/post/303174/

Совмещайте с БЭМ

.regular-text – обычный текст
.regular-text_inverted – на темном фоне

Если фоны могут быть произвольные, имеет смысл сделать отдельные классы-помощники

.regular-text.bg-black
.regular-text.bg-reg

Слайдер можно так и обозвать – .slider
Если есть еще один – назовите его .carousel
Что показывает слайдер?
Картинки из галереи – .gallery-slider
Карточки с новостями – .news-slider
И т.д. Помним, что помимо .slider можем использовать .carousel и без лишних заморочек имеем возможность именовать два разных слайдера с новостями. Хотя обычно он один.
Еще кейс: у вас несколько разных слайдеров, функционально они одинаковые, но сами слайды отличаются. Обзываем из все просто .slider, а слайдам даем отдельные названия. .slide-news, .slide-image и т.п.

Фантазируйте.

Comments

[godsplane]

Мне религия не позволит в одном месте называть слайдеры slider, а в другом carousel.
Бэм я и так стараюсь использовать по максимуму. Но например блок regular-text может быть настолько уникальным среди всех похожих блоков, что тут не поможет модификатор, так как он будет менять буквально все.
Если смысла в блоке нет, то он становится каким то утилитарным, а это ломает всю концепцию (Мб даже БЭМ, возможно ошибаюсь)

[Сергей delphinpro]

godsplane, сами себе проблемы создаёте..

Answer 2

[ThunderCat]

Редко когда приходится настолько сильно заморачиваться. Особенно с блоками. Очевидно что основное отличие слайдера 1 от 2 - количество "строк", "slider-two-line" например. Так же можно именовать по паренту, типа "slider-in-header" "slider-in-news".

Comments

[godsplane]

А если слайдеров будет 3+ ? Менять класс каждый раз?
Второй вариант сработал бы если бы эти слайдеры были в блоке каком то,но у них совершенно нет контекста.

Answer 3

[mayton2019]

Я где-то читал что астрономы уже давно не дают названия планетам и звездам. Закончились у них названия. Они их нумеруют. Может быть в какой-то степени это оправдано. Если для блоков веб-дизайна нет названий то возможно им стоит давать хотя-бы номера из sequence. Или если есть указание на относительную ориентацию (север-юг или слева внизу) то можно добавлять там какой-то символ. Вот. А если у автора возникнет именно задача тесной работы со слайдером - то тогда он его просто переименует в slider и будет работать. Похоже конечно на обфускацию больше чем на конвенцию по именам. Но может быть имена не так уж важны в данном процессе.

Answer 4

[Светлана Козлова]

Называйте ассоциативно)

Например для слайдеров

Answer 5

[NeKt0]

Первый слайдер я бы назвал slider__meetings, а второй - slider__nature