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

Я иногда не могу придумать адекватные названия блокам.
Например есть блок который выглядит как просто текст на черном фоне.
Я конечно могу написать что-то вроде .text-on-black-bg , но это как то не универсально.
Тоже самое с блоком слайдером. Видов сладйеров может быть масса.
Как например вы бы назвали этот слайдер?
6358dd1cbb626947756508.png
А этот?
6358dd3fa8d63268881949.png
Я понимаю что тут дело в контексте, но в первом случае его вообще нет. И этот блок может повторяется в разных местах.
Есть какие то простые блоки, названия которым уже придумали за меня:
CTA, header, footer, features, list etc..

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

Как быть, что делать?
Может есть какой то чит о котором я не знаю.
  • Вопрос задан
  • 490 просмотров
Решения вопроса 1
delphinpro
@delphinpro
frontend developer
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 и т.п.

Фантазируйте.
Ответ написан
Пригласить эксперта
Ответы на вопрос 4
ThunderCat
@ThunderCat Куратор тега Веб-разработка
{PHP, MySql, HTML, JS, CSS} developer
Редко когда приходится настолько сильно заморачиваться. Особенно с блоками. Очевидно что основное отличие слайдера 1 от 2 - количество "строк", "slider-two-line" например. Так же можно именовать по паренту, типа "slider-in-header" "slider-in-news".
Ответ написан
mayton2019
@mayton2019
Bigdata Engineer
Я где-то читал что астрономы уже давно не дают названия планетам и звездам. Закончились у них названия. Они их нумеруют. Может быть в какой-то степени это оправдано. Если для блоков веб-дизайна нет названий то возможно им стоит давать хотя-бы номера из sequence. Или если есть указание на относительную ориентацию (север-юг или слева внизу) то можно добавлять там какой-то символ. Вот. А если у автора возникнет именно задача тесной работы со слайдером - то тогда он его просто переименует в slider и будет работать. Похоже конечно на обфускацию больше чем на конвенцию по именам. Но может быть имена не так уж важны в данном процессе.
Ответ написан
Комментировать
svob
@svob
Фрилансер, текстовик широкого профиля
Называйте ассоциативно)
Например для слайдеров
63597f254e217370739659.png
Ответ написан
Комментировать
@bubn0ff
it-шник
Первый слайдер я бы назвал slider__meetings, а второй - slider__nature
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы