Соглашение по именованию
Имя БЭМ-сущности уникально. Во всех технологиях (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
- Имена записываются латиницей.
- Имя блока или элемента перед модификатором не указывается.
Такая схема именования ограничивает использование миксов, так как не дает возможности определить, к какому блоку или элементу относится модификатор.
Ваша схема именования
Можно создать собственную схему именования БЭМ-сущностей. Важно, чтобы разделители в новой схеме давали возможность на программном уровне отделять блоки от элементов и модификаторов.
CSS-класс для элементов в Zero block Tilda
Пожалуйста, внимательно и пошагово выполняйте инструкцию, во избежание ошибок!
В этой статье я покажу несколько способов добавления css класса элементам в тильда.
Данный пример простой, просто нужно скопировать код на страницу, а ссылку из скрипта вставить в кнопку.
Кнопка отправляет форму, которая находится в 1-м зеро блоке с ней.
Пример 1
Первым рассмотрим стандартный способ, он работает в Zero block
Инструкция
- Кликаем в Zero блоке на любой элемент правой кнопкой мыши (это вызовет контекстное меню, как на изображении №1)
- Выбираем пункт “Add CSS Class Name”
- В открывшемся окне настроек справа, выбираем поле “CSS CLASS”
- Пишем своё значение
CSS класс указывать без точки, как показано на изображении №2.
Данным способом можно присвоить 1 класс.
Пример 2
Второй способ несложный, добавим класс с помощью скрипта, так же к элементу в Zero блоке.
Инструкция
- Выполняем действие из примера №1 (присвойте элементу класс стандартным способом, например css-class-main
- Создаём блок T123 и добавляем в него код
- В первую часть (где указан css-class-main) впишите своё значение из п.1, во вторую часть (где указан new-class впишите класс, который хотите добавить этому элементу.
Если необходимо присвоить несколько классов, то просто впишите их через пробел, без запятых и точек, например new-class new-class-second
Помните, что элементы zero блока создают дочерний элемент с классом tn-atom. Поэтому, когда вы пишите стили для них, используйте конструкцию вида .new-class .tn-atom .
Пример 3
В третьем примере мы добавим свой класс элементу из стандартного блока, для этого нам нужно будет воспользоваться инспектором кода в браузере.
Я написал стили для данной кнопки, кликните по ней и они применятся.
Инструкция
- На опубликованной странице открываете инспектор кода
- Выбираете на странице элемент, которому хотите присвоить css класс, как на изображении №1
- Копируете его класс (изображение №2, класс кнопки .t142__submit)
- Добавляете его в первую часть скрипта
Код примера
Селекторы по классу
В HTML документе, селекторы по CSS классу находят элементы с нужным классом. Атрибут класса определяется как разделённый пробелами список элементов, и один из этих пунктов должен точно соответствовать имени класса, приведённому в селекторе.
Синтаксис
.classname
Это эквивалентно следующему селектор по атрибуту :
[class~=classname]
Пример
CSS
span.classy background-color: DodgerBlue; >
HTML
span class="classy">Здесь span с каким-то текстом.span> span>А тут другой span.span>
Спецификации
| Specification |
|---|
| Selectors Level 4 # class-html |
Совместимость с браузерами
BCD tables only load in the browser
Часто задаваемые вопросы
Найти ID блока очень просто — зайдите в настройки блока и промотайте вниз. В последней строке и будет ID конкретного блока. Выглядит он примерно так: #rec123456789 .
Также можно найти ID через просмотр HTML-кода страницы. Подробнее об этом смотрите в видео выше.
Как найти ID блока
- Щёлкните правой кнопкой мыши на элементе.
- Выберите «Показать код» (или «Проверить объект» — в разных браузерах по-разному).
- Скопируйте первый из классов.
Как найти class элемента
P. S. Если у вас в контекстном меню не отображается пункт «Проверить код», зайдите в настройки браузера и включите меню «Разработка».
Как включить меню «Разработка» в Safari
Как добавить class целому блоку?
- Заходим в настройки блока.
- Проматываем все настройки вниз.
- Над ID блока видим надпись «Добавить CSS Class Name».
- Жмакаем по ней.
- Вписываем свой класс, начиная с «uc-» .
Как добавить class целому блоку
Как добавить class элементу в Zero-блоке?
- Добавьте любой элемент в Zero-блок.
- Нажмите на него правой кнопкой мыши.
- В появившемся контекстном меню выберите «Add CSS Class Name».
Нажмите правой кнопкой мыши на элемент в Zero-блоке и выберите «Add CSS Clas Name»
Можете называть класс как захотите, но лучше не начинать с «t-» или «tn-», т.к. под такое начало зарезервированы классы тильды. И, даже, если сейчас такого класса нет, не факт, что он не появится в будущем.
В настройках элемента появится новый раздел. Впишите сюда название класса
Не пугайтесь, если вы удалите имя класса для текущего элемента, и в настройках пропадёт соответствующий раздел. Снова добавить класс можно будет точно также через контекстное меню.
Почему блоки T123 со скриптами лучше всего размещать в футере?
Браузер «читает» вашу страницу сверху вниз. Соответственно, если он видит в скрипте элемент (например, какой-то блок, к которому вы обращаетесь в скрипте), который браузер ещё не видел на странице, скрипт не выполнится, т.к. браузер уже хочет выполнить скрипт, но ещё не знает о каком элементе идёт речь.
Поэтому лучше всего размещать скрипт под элементами, с которыми он взаимодействует или вообще в футере сайта. Первый вариант удобнее, т.к. пользуясь таким правилом, вы будете помнить, что скрипт относится к блоку (-ам) над ним. Однако, размещая скрипт в футере вы точно избежите проблем, которые могут возникнуть.
Где хранить изображения и как получить на них ссылки
Есть один лайфхак. Если вы не хотите пользоваться специализированными сервисами, то прозе всего загрузить изображения в любой блок с изображениями на Тильде. Это может быть как блок с одним изображением (IM01), так и любая галерея.
Заходите в «Контент», загружаете нужные изображения, сохраняете блок, после чего снова нажимаете «Контент», копируете все ссылки (щёлкаете правой кнопкой мыши по ссылке и выбираете «Скопировать адрес ссылки»). После чего смело удаляете блок. С вашими изображениями ничего не случится, они будут храниться на Тильде.
Как скопировать N ссылок на изображения?
Если вам для какой-то задачи нужно залить на Тильду этим методом очень много изображений и скопировать все ссылки на них, то не пугайтесь, вам не придётся вручную копировать каждую ссылку. Сделать это очень просто:
1. Создайте новую страницу на Тильде.
2. Добавьте галерею GL01 и загрузите туда изображения.
3. Откройте консоль разработчика.
4. Вставьте туда следующий текст и нажмите Enter:
var tGalleryImages = document.querySelectorAll('.gallery-imgs-class'); var linksArray = new Array(); tGalleryImages.forEach(img => < linksArray.push(img.querySelector('table a').href) >); copy(linksArray)