Как избавиться от неспособности придумать адекватное название блокам?
Я иногда не могу придумать адекватные названия блокам.
Например есть блок который выглядит как просто текст на черном фоне.
Я конечно могу написать что-то вроде .text-on-black-bg , но это как то не универсально.
Тоже самое с блоком слайдером. Видов сладйеров может быть масса.
Как например вы бы назвали этот слайдер?
А этот?
Я понимаю что тут дело в контексте, но в первом случае его вообще нет. И этот блок может повторяется в разных местах.
Есть какие то простые блоки, названия которым уже придумали за меня:
CTA, header, footer, features, list etc..
Смотря примеры на других сайтах подавляющее большинство либо как то генерят свои классы, либо используют утилитарный подход.
Как быть, что делать?
Может есть какой то чит о котором я не знаю.
Дополнительно:
Может есть какой то чит о котором я не знаю.
Накидаться веществами, а дальше само пойдёт.
- А если серьёзно, то именно за это программистам и платят. Написать рандомный код может любой, но придумать нормальные названия переменным, классам и вообще любые адекватные названия – это 90% работы программиста. Это самая сложная часть работы программиста. Так что тут поможет только практика и опыт.
- я иногда с женой советуюсь
- -Нет, ты должен придумывать нормальные названия классов!!
-Хаха container1 container2 container3 делает brrrrr -
Например есть блок который выглядит как просто текст на черном фоне.
Он что, просто текст без заголовка и смысла? У блока, в котором он лежит нет названия?
Со слайдерами аналогично, они же не просто так приляпаны на страницу, есть ведь контекст, что хотят показать этим слайдером. Фотки туров или событий или что-то ещё.
- Ankhena, Это сам по себе блок.
Заголовки есть внутри этого блока. - Изучайте HTML других сайтов и смотрите имена классов.
- godsplane,
Это сам по себе блок.
Заголовки есть внутри этого блока.Обычно по ним можно понять о чем весь этот блок и дать ему название.
Либо это не один блок, а несколько, каждый со своим заголовком.
Либо это список каких-то блоков __list
Без контекста сложно. - Считаете, эту неспособность приобретённой? Раньше её не было и вы придумывали адекватные названия? Тогда попробуйте вспомнить когда она появилась, что могло быть причиной.
А если серьёзно, то, как уже отметили выше, это приходит с опытом. Выявляйте особенности блоков (в реализации или назначении).
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 и т.п.
Фантазируйте.
Ответы:
Редко когда приходится настолько сильно заморачиваться. Особенно с блоками. Очевидно что основное отличие слайдера 1 от 2 - количество "строк", "slider-two-line" например. Так же можно именовать по паренту, типа "slider-in-header" "slider-in-news".
- А если слайдеров будет 3+ ? Менять класс каждый раз?
Второй вариант сработал бы если бы эти слайдеры были в блоке каком то,но у них совершенно нет контекста.
Я где-то читал что астрономы уже давно не дают названия планетам и звездам. Закончились у них названия. Они их нумеруют. Может быть в какой-то степени это оправдано. Если для блоков веб-дизайна нет названий то возможно им стоит давать хотя-бы номера из sequence. Или если есть указание на относительную ориентацию (север-юг или слева внизу) то можно добавлять там какой-то символ. Вот. А если у автора возникнет именно задача тесной работы со слайдером - то тогда он его просто переименует в slider и будет работать. Похоже конечно на обфускацию больше чем на конвенцию по именам. Но может быть имена не так уж важны в данном процессе.
Называйте ассоциативно)
Например для слайдеров
Первый слайдер я бы назвал slider__meetings, а второй - slider__nature
Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.
Придумывание адекватных названий для блоков является важным аспектом разработки веб-приложений, поскольку понятные и лаконичные названия улучшают читаемость кода и облегчают его поддержку в будущем. Если у вас возникают трудности с придумыванием названий для блоков, вот несколько советов, которые могут помочь вам решить эту проблему:
1. **Определите функциональность блока**: Прежде всего, необходимо четко понимать, какую функцию выполняет данный блок в вашем веб-приложении. Это поможет вам выбрать подходящее название, отражающее суть блока.
2. **Используйте семантические названия**: Старайтесь выбирать названия, которые явно указывают на содержимое или назначение блока. Например, вместо "div1" или "block2" используйте более информативные названия, например "header", "sidebar" или "footer".
3. **Избегайте слишком общих или слишком специфичных названий**: Не стоит выбирать названия, которые слишком абстрактны или слишком конкретны. Например, название "content" может быть слишком общим, а "block-with-blue-background" слишком специфичным. Старайтесь найти баланс между общим и конкретным.
4. **Используйте английский язык**: Хотя использование родного языка в названиях блоков допустимо, рекомендуется использовать английский язык, так как это делает ваш код более понятным для других разработчиков, особенно если вы работаете в международной команде.
5. **Используйте понятные сокращения или аббревиатуры**: Если блок выполняет определенную функцию, вы можете использовать сокращения или аббревиатуры, понятные всем разработчикам. Например, "nav" вместо "navigation" или "btn" вместо "button".
6. **Используйте консистентность**: Старайтесь придерживаться определенного стиля и формата придумывания названий для блоков. Это поможет сделать ваш код более читаемым и последовательным.
7. **Пользуйтесь комментариями**: Если вам сложно придумать название для блока, вы можете оставить комментарий в коде, описывающий его функциональность или назначение. Это поможет другим разработчикам быстрее понять вашу логику.
В целом, придумывание адекватных названий для блоков требует практики и опыта. Не стесняйтесь экспериментировать и пробовать различные варианты, чтобы найти наиболее подходящее название для каждого блока в вашем веб-приложении. Помните, что хорошее название блока - это первый шаг к созданию понятного и поддерживаемого кода.
Для избавления от неспособности придумать адекватное название блокам на сайте можно использовать следующие подходы:
1. Использовать ключевые слова или фразы, которые описывают содержимое блока. Например, если у вас есть блок с информацией о товарах, название может быть "Товары", "Каталог товаров" или "Список продукции".
2. Использовать стандартные названия, которые легко понятны пользователям. Например, для блока с контактной информацией можно использовать название "Контакты" или "Обратная связь".
3. Использовать иерархическую структуру названий, чтобы показать отношения между блоками. Например, если у вас есть блоки с информацией о различных услугах, вы можете назвать их "Услуги по категориям", "Услуги по типу" и т. д.
4. Использовать номера или метки для блоков, чтобы легко управлять ими. Например, вы можете назвать блоки "Блок 1", "Блок 2" и т. д., чтобы быстро идентифицировать их.
5. Придумывать названия совместно с командой или пользователями сайта. Иногда коллективный разум может привести к лучшему и более креативному результату.
Применяя эти подходы, вы сможете создать адекватные и информативные названия для блоков на вашем сайте, что сделает навигацию более удобной для пользователей.
Бэм я и так стараюсь использовать по максимуму. Но например блок regular-text может быть настолько уникальным среди всех похожих блоков, что тут не поможет модификатор, так как он будет менять буквально все.
Если смысла в блоке нет, то он становится каким то утилитарным, а это ломает всю концепцию (Мб даже БЭМ, возможно ошибаюсь)