Block CSS-классы (или блоки) — это концепция модульного подхода к построению структуры HTML и CSS кода, используемая в методологиях БЭМ (Блок-Элемент-Модификатор) и OOCSS (Object-Oriented CSS).
Идея блока заключается в том, что каждый компонент веб-страницы (например, меню, форма, заголовок) выделяется в отдельный блок с уникальным именем (CSS-классом). Таким образом, блоки могут быть повторно использованы в других местах на сайте, тем самым улучшая переиспользуемость кода.
Имя блока обычно отображает его смысл и назначение, т.е. определяет его функциональность, например, .menu, .header, .form, .carousel и т.д.
Пример блока в HTML и CSS Моментального поиска на Яндексе:
HTML:
<div class="search">
<input type="text" class="search__input">
<button class="search__button">Найти</button>
</div>
CSS:
.search {
display: flex;
justify-content: center;
align-items: center;
background-color: #fff;
border-radius: 4px;
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
padding: 10px;
}
.search__input {
border: none;
outline: none;
padding: 5px;
font-size: 16px;
}
.search__button {
background-color: #007bff;
color: #fff;
border: none;
border-radius: 4px;
padding: 8px 16px;
margin-left: 5px;
font-size: 16px;
cursor: pointer;
}
Здесь .search — это имя блока Моментального поиска, которое содержит два элемента (.search__input и .search__button), которые являются дочерними элементами блока Моментального поиска. Это помогает определить их функциональный контекст и минимизировать сопряженность между элементами различных блоков.
Использование блоков в HTML и CSS позволяет легко поддерживать и расширять код в будущем, что делает их идеальным выбором для создания масштабируемых веб-приложений.
