Как называть блоки в html
Перейти к содержимому

Как называть блоки в html

  • автор:

Как назвать блок?

У меня имеется header и в нем находится 2 блока, навигация (она внизу) и на верхнем плане у меня находится блок, в котором лежат номера, кнопка поддержки и иконки соц сетей. Так вот, как назвать этот блок с номерами?

Отслеживать
задан 26 янв 2023 в 21:51
5 2 2 бронзовых знака
Контакты, что ли?
26 янв 2023 в 22:00
Ну что-то типа такого
26 янв 2023 в 22:09

2 ответа 2

Сортировка: Сброс на вариант по умолчанию

Не принципиально. Хоть block_numbers Если следовать логике компонентов, то необходимо называть, от того, что там происходит. Но можно и углубиться в эту теорию, и следовать к примеру БЭМ методологии.

Отслеживать
ответ дан 26 янв 2023 в 22:01
BlackStar1991 BlackStar1991
6,250 3 3 золотых знака 22 22 серебряных знака 63 63 бронзовых знака
да, но как его назвать по бэму?
26 янв 2023 в 22:08

Я же дал ссылку на документацию. Есть видео уроки. Это совершенно не важно, в каждой команде их называют по своему. Есть Атомарное название классов, есть CSS in JS

27 янв 2023 в 9:41

Если по БЭМ-у то просто numbers или our-contacts(последнее слово в таком названии может описывать роль этого элемента,например если это список чисел то number-list), так как это отдельный, независимый блок. Для размещения(позиционирования) этого блока в другом блоке можно добавить еще один класс, например:

Так можно понять, что это блок «numbers»является дочерним элементом блока «header». Для модификации блока добавляется еще один класс «numbers_black».

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

Как правильно называть блоки div?

Может вопрос и глупый но все же. Допустим я открыл макет в psd начинаю разделять его на блоки так как не знаю англ языка начинается бред типа block 1 и.т.д. Но я знаю что это не правильно будет говнокод. Поэтому хотел бы узнать как вы называете блоки

  • Вопрос задан более трёх лет назад
  • 7779 просмотров

1 комментарий

Простой 1 комментарий

SkiperX

Алекс Глебов @SkiperX Куратор тега CSS

да да
суровые имена программистов)
у блока есть смысл все равно
преимущества, клиенты, отзывы и тд
берешь гугл переводчик и переводишь
у элементов item link group cart и тд

слов которыми обзывают элементы не так много
бем помогает не повторяться, добавляя имя блока
если мало названия блока, можно привязать к названию страницы еще, main или inner
тогда точно хватит

Подскажите как правильно называть блоки при верстке, есть ли какие то стандарты?

Author24 — интернет-сервис помощи студентам

1) Какие существуют компоненты (почва, платформы, API, SDK и т.п.)?! 2. Как правильно называть это ПО?!
Сразу 2 вoпpoca: 1) Какие существуют в наше время ещё компоненты, кроме указанных: • Microsoft .

Как правильно называть интерфейсы в Java
Здравствуйте! Как правильно именуются интерфейсы в Java. Допустим у меня есть класс Fish.

Как правильно называть некоторые термины?
Читаю статьи на разных сайтах по HTML 5 и не много запуталась. Например на Хабре font — называют.

Регистрация: 24.03.2016
Сообщений: 14
Denis Landar,

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197
Основные .wrapper - /*обвертка сайта*/ .hedader - /*верхняя часть сайта*/ .sidebar - /*сайдбар (левая или правая часть сайта)*/ .content - /*тело сайта (центральная часть)*/ .footer - /*нижнаяя часть сайта*/ Название блока (обвертка) .bl .block .box .wrap .inner .container .main Секции блока .head, .header - /*верхняя часть блока например заголовок*/ .cnt, .content, .body - /*тело блока например текс с картинкой*/ .footer - /*нижняя часть блока к примеру дата добавления, категория и т.д.*/ Колонки .column, .col - /*колонка*/ Списки .list .item Позиционные классы .top /* элемент сверху**/ .left /* элемент слева*float:left */ .right /* элемент справа*float:right */ .bottom /* элемент внизу**/ .center /* элемент отцвентрирован* margin:0 auto; */ .fixed - /*фиксированный элемент postion:fixed */ Переходы .next - /*следующий*/ .prev - /*предыдущий*/ .last - /*последний*/ .first - /*первый*/ .back - /*назад*/ .ahead - /*вперед*/ Чисельные .one .thwo .three .four .five Размеры .xs, .tiny - /*очень маленький*/ .s, .small - /*маленький*/ .md, .medium - /*средний */ .lg, .large, .big - /*большой */ .xl, .extra-large - /*очень большой*/ Цвета .danger - /*цвет опасности*/ .default - /*стандартный цвет*/ .warning, .error - /*цве ошибки*/ .success - /*цвет успеха (к примеру верно введн код подтвержления)*/ .primary - /*основной цвет */ Кнопки .button, .btn - /*кнопка*/ .loading - /*загрузка*/ .close - /*закрыть*/ .open - /*открыть*/ .touch - /*клик*/ .edit - /*редактировать*/ .more - /*больше*/ .remove - /*удалить*/ .logout - /*выход*/ .select - /*выбрать*/ .divider - /*выпадающийся список меню*/ .caret, .arrow - /*стрелочка*/ .up - /* Вверх**/ .down - /* Вниз**/ .delete - /* удалить**/ .reply - /*ответить*/ Персона .profile - /*профиль*/ .person - /*человек*/ .ava, .avatar - /*аватарка, картинка*/ .name - /*имя*/ .description - /*описание*/ .address - /*адресс*/ .nickname - /*ник*/ .birthday - /*дата рождения*/ .sex - /*пол*/ .author - /* автор**/ Заголовки .title - /*заголовок*/ .short-title - /*скороченный заголовок*/ .full-title - /*полный заголовок*/ Ссылки .link - /*ссылка*/ Текст .text, .txt, .paragraph - /*текст*/ .info, .information - /*информация*/ Картинки .image, .img - /*картинка*/ .icon, .ic - /*иконка*/ .bg - /*фоновая картинки или цвет*/ Формы .search, .form-search - /*поиск по сайту*/ .input - /*текстовый элемент*/ .form - /*форма*/ .form-group - /*группа элементов формы*/ .help-block - /*текст подсказки*/ .label - /*название элемента формы*/ Катагории .type - /*тип*/ .cat, .category - /*катигория*/ .subcat, .subcategory - /*подкатегория*/ .section - /*раздел*/ .subsection - /*подраздел*/ Видео .video .play - /*пуск*/ .stop - /*стоп*/ .pause - /*пауза*/ Социальные сети .social - /* социальные сети**/ .vk - /*вконтакте*/ .fb - /*фейсбук*/ .twit - /*твиттер*/ .inst - /*инстаграм */ Активные классы .none - /*скрытый элемент*/ .disabled - /*заблокированный*/ .active, .current - /*активный */ .selected - /*выбраный*/ .visible - /*видный элемент*/ .focus - /*нажатый*/ Временные классы .time - /*время*/ .date - /*дата*/ .day - /*день*/ .month - /*месяц*/ .year - /*год*/ Очистка .clear, .clearfix, .clr - /*очистка*/ Разделители .separator, .divide - /*разделитель вертикальный для слов */ .br, .line - /*разделитель горизонтальный для блоков*/ Остоньлые названия .logo - /*лого сайта*/ .new - /*новинка*/ .sale - /*распродажа*/ .feedback - /*обратная связь*/ .support - /*помощь */ .group - /*группа*/ .module - /*модуль*/ .posters - /*пост*/ .form - /*форма*/ .tabs - /*вкладки*/ .slider - /*слайдер*/ .news - /*новости*/ .table - /*таблица*/ .full - /*полный*/ .breadcrumbs - /*Хлебные крошки*/ .pagination, .pager - /*Нумерация страниц*/ .navbar, .nav, .menu, .navigation - /*Навигация (меню)*/ .dropdown - /*выпадающейся меню */ .comment - /*комментарий*/ .subscription - /* Подписка**/ .special - /* особенный элемент**/ .standard - /* стандартный элемент**/ .screens - /* Скрины**/ .rate - /* рейтинг**/ .online - /* онлайн**/ .panel - /* панель**/ .popup - /* попап**/ .version - /* версия**/ .page - /* страница**/ .banners - /* баннер**/ .map - /* Карта**/ .more - /*еще, подробнее*/ .tags - /* тег**/ .price - /* цена**/

Соглашение по именованию

Имя БЭМ-сущности уникально. Во всех технологиях (CSS, JavaScript, HTML) одна и та же БЭМ-сущность всегда называется одинаково. Основная идея соглашения по именованию — вложить смысл в имена и сделать их максимально информативными для разработчика.

Можно сравнить одно и тоже имя CSS-селектора, написанное разными способами:

  • menuitemvisible
  • menu-item-visible
  • menuItemVisible

Чтобы понять смысл первого имени, нужно вчитаться в каждое слово. В последних двух примерах имя явно разделяется на логические части. Но ни одно из имен пока не помогает точно определить, что menu — это блок, item — элемент, а visible — модификатор. Чтобы имена сущностей были однозначными и понятными, в БЭМ были разработаны правила формирования имен БЭМ-сущностей.

Правила формирования имен

  • Имена записываются латиницей в нижнем регистре.
  • Для разделения слов в именах используется дефис ( — ).
  • Имя блока задает пространство имен для его элементов и модификаторов.
  • Имя элемента отделяется от имени блока двумя подчеркиваниями ( __ ).
  • Имя модификатора отделяется от имени блока или элемента одним подчеркиванием ( _ ).
  • Значение модификатора отделяется от имени модификатора одним подчеркиванием ( _ ).
  • Значение булевых модификаторов в имени не указывается.

Важно! В методологии БЭМ не существует элементов элементов. Правила именования запрещают создавать элементы элементов, но в DOM-дереве элементы можно вкладывать друг в друга.

Примеры

В HTML БЭМ-сущности представлены атрибутом class . В БЭМ во всех технологиях происходит обращение к классу:

Примеры правил формирования имен приведены на CSS.

Имя блока
div class="menu">. div> 
.menu < color: red; >
Имя элемента

Важно! Имена одинаковых элементов одного и того же блока совпадают. Например, все пункты в блоке меню называются menu__item .

div class="menu"> . span class="menu__item"> span> div> 
.menu__item < color: red; >
Имя модификатора блока

menu_theme_islands

div class="menu menu_hidden">. div> div class="menu menu_theme_islands">. div> 
.menu_hidden < display: none; > .menu_theme_islands < color: green; >
Имя модификатора элемента

menu__item_type_radio

div class="menu"> . span class="menu__item menu__item_visible menu__item_type_radio">. span> div> 
.menu__item_visible <> .menu__item_type_radio < color: blue; >

Альтернативные схемы именования

Описанные выше правила формирования имен — это классическая схема именования БЭМ-сущностей. Все инструменты БЭМ по умолчанию настроены на классическую схему.

Существуют альтернативные схемы именования, которые активно используются в БЭМ-сообществе. Чтобы во всех технологиях применять одинаковые имена, созданные по альтернативным схемам, используйте инструмент bem-naming. По умолчанию bem-naming содержит настройки соглашения по именованию, предложенного методологией, но позволяет добавлять правила для применения альтернативных схем.

Стиль Two Dashes

  • Имена записываются латиницей в нижнем регистре.
  • Для разделения слов в именах БЭМ-сущностей используется дефис ( — ).
  • Имя элемента отделяется от имени блока двумя подчеркиваниями ( __ ).
  • Булевые модификаторы отделяются от имения блока или элемента двумя дефисами ( — ).
  • Значение модификатора отделяется от его имени двумя дефисами ( — ).

Важно! Двойной дефис внутри комментария ( — ) может вызвать ошибки при валидации HTML-документа.

Стиль CamelCase

  • Имена записываются латиницей.
  • Каждое слово внутри имени пишется с заглавной буквы.
  • Разделители элементов и модификаторов совпадают с классической схемой.

Стиль React

  • Имена записываются латиницей.
  • Имена блоков и элементов пишутся с заглавной буквы. Имена модификаторов — со строчной.
  • Каждое слово внутри имени пишется с заглавной буквы.
  • Имя элемента отделяется от имени блока одним дефисом ( — ).
  • Разделители имени и значения модификаторов совпадают с классической схемой.

Стиль No-namespace

  • Имена записываются латиницей.
  • Имя блока или элемента перед модификатором не указывается.

Такая схема именования ограничивает использование миксов, так как не дает возможности определить, к какому блоку или элементу относится модификатор.

Ваша схема именования

Можно создать собственную схему именования БЭМ-сущностей. Важно, чтобы разделители в новой схеме давали возможность на программном уровне отделять блоки от элементов и модификаторов.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *