Классификация и идентификация элементов в HTML и CSS и немного о БЭМ для самых маленьких

Классы (class) — это механизм, позволяющий задавать одно и то же свойство стиля для нескольких элементов веб-страницы. Идентификаторы (id) — атрибут id указывает уникальный идентификатор для элемента HTML (значение должно быть уникальным в HTML-документе). БЭМ — это методология разработки веб-интерфейсов, которая помогает структурировать и организовывать код HTML и CSS. Она основана на трех основных концепциях: блок, элемент, модификатор. HTML (HyperText Markup Language) — это язык разметки, используемый для создания структуры и содержания веб-страниц. Одним из важных аспектов в HTML является возможность задавать элементам и компонентам уникальные имена с помощью классов и идентификаторов. В этой статье мы рассмотрим, зачем они нужны, когда их использовать, и как работает методология БЭМ (Блок, Элемент, Модификатор). Классы и идентификаторы позволяют уникально идентифицировать элементы и компоненты на веб-странице. Идентификаторы (задаются через атрибут id) являются уникальными для всей страницы, тогда как классы (задаются через атрибут class) могут быть применены к нескольким элементам. Классы и идентификаторы используются для применения стилей CSS к элементам. Они помогают создавать каскадные таблицы стилей (CSS) и делать внешний вид веб-страницы более привлекательным. Классы и идентификаторы часто используются в JavaScript для обращения к элементам страницы и добавления им динамического поведения. Например, скрипты могут изменять классы элементов, основываясь на событиях или действиях пользователя. Идентификаторы (id) должны использоваться, когда нужно уникально идентифицировать элемент на странице. Например, идентификатор может быть использован для якорей внутри документа. Классы (class) применяются, когда нужно группировать несколько элементов с общими характеристиками или стилями. Классы могут быть использованы на нескольких элементах. Блок представляет собой компонент страницы, который может содержать другие элементы или модификаторы. Например, блок "button" может содержать текст и иконку. Элементы находятся внутри блока и представляют собой его составные части. Они именуются с использованием двойного подчеркивания __. Множественные элементы блока, например, элементы списка могут быть названы как -item: Модификаторы используются для изменения внешнего вида или поведения блока или элемента. Они именуются с использованием одинарного подчеркивания _. Чтобы применить стили к классам или идентификаторам, вы можете использовать селекторы. Например, чтобы стилизовать элемент с классом "button", вы можете написать: Из JavaScript вы можете получить доступ к элементам по их классам или идентификаторам с использованием методов, таких как document.querySelector() или document.getElementById(). Пример обращения из JavaScript к элементу по классу: Перейдем к примерам. Допустим, что согласно дизайн-макету у вас есть 3 прямоугольных блока с определенными размерами и цветом фона. Однако, последний элемент из данного списка имеет отличный от двух других фоновый цвет: Стоит начать с изучения макета. Мы видим, что у всех трех элементов заданы одинаковые размеры и у двух элементов из трех одинаковый цвет фона. Предположим, что и у третьего элемента изначально был красный цвет фона. Исходя из анализа макета, все три элемента можно классифицировать и задать общие стили: Задав для всех трех div класс "cards__container-item" и обратившись по данному селектору в CSS мы объявили общие стили для всех трех элементов. Внимание: задав для трех HTML-элементов одинаковый класс — в CSS нам стоит только один раз прописать сценарий для данного селектора. Это будет выглядеть так: Теперь нам необходимо выделить последний блок из данного списка. Здесь мы прибегнем к модификатору. Запомните: классы в HTML в атрибуте…

Источник: habr.com — habr.com/ru/articles/767086/