HTML/CSS

BEM (БЭМ)

HTML

HTML (HyperText Markup Language) – это язык разметки документов. Он применяется во всем мире. Браузер интерпретирует код HTML для отображения его на компьютере, планшете или телефоне. Верстка документов происходит при помощи специальных тегов. Если ответить проще на вопрос: «Что такое HTML документ?» - это простой текст, содержащий много тегов, который образует веб-страницу.

HTML

У любой веб страницы есть начало и конец, они обозначаются парным тегом <html></html>.

<!DOCTYPE html>
<html>
    <head>
        <title>Заголовок сайта</title>
    </head>
    <body>
        <h1>Заголовок первого уровня</h1>
        <p>Абзац</p>
    </body>
</html>

HTML

HTML документ начинается с <!DOCTYPE html> - каждая веб страница должна начинаться именно с него. Раньше было огромное количество вариантов тега DOCTYPE, но в соответствии с новой версией (HTML5), нужен только этот. Что такое DOCTYPE? Это тег, который сообщает браузеру версию HTML. Этот тег должен быть написан на первой строчке HTML документа.

Пример версии HTML 4.01
!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<!DOCTYPE html>
<html>
    <head>
        <title>Заголовок сайта</title>
    </head>
    <body>
        <h1>Заголовок первого уровня</h1>
        <p>Абзац</p>
    </body>
</html>

HTML

Тег <head> предназначен для хранения других элементов, цель которых — помочь браузеру в работе с данными. Также внутри контейнера <head> находятся метатеги, которые используются для хранения информации предназначенной для браузеров и поисковых систем. Например, механизмы поисковых систем обращаются к метатегам для получения описания сайта, ключевых слов и других данных.

Содержимое тега <head> не отображается напрямую на веб-странице, за исключением тега <title> устанавливающего заголовок окна веб-страницы.

CSS

CSS (Cascading Style Sheets) – это формальный язык, служащий для описания оформления внешнего вида документа, созданного с использованием языка разметки (HTML, XHTML, XML).

CSS обрабатывает внешний вид веб-страницы. Используя CSS, вы можете контролировать цвет текста, стиль шрифтов, расстояние между параграфами, размеры и расположение колонок, используемые фоновые изображения и цвета, макеты дизайна, варианты отображения на разных устройствах и размерах экрана. А также множество других эффектов.

CSS. Структура языка

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

Правило состоит из селектора и блока объявлений.

Подключение CSS

CSS можно связать с HTML несколькими способами:

внутри тега с помощью атрибута style. При этом нет нужды указывать селектор;
добавить тег <style> с атрибутом;
подключить внешнюю таблицу стилей: <link rel="stylesheet" href="путь до style.css" />.

CSS. Селекторы

Селектор сообщает, к какому элементу будут применены описываемые в CSS свойства стиля. В качестве селектора может выступать любой тег, которому задается форматирование (размер, цвет и т. д.).

Пример тегов:

* – любые элементы.
div – элементы с таким тегом.
#id – элемент с данным id.
.class – элементы с таким классом.
[name="value"] – селекторы на атрибут.
:visited – «псевдоклассы», остальные разные условия на элемент.

CSS. Блок объявлений

Блок объявлений состоит из пар «свойство: значение» (запись всегда черед двоеточие), размещенных в фигурных скобках. Записи заканчиваются точкой с запятой. CSS нечувствителен к табуляции, пробелам, регистру. Выбор способа записи (столбиком с отступами или просто в строчку) остается на усмотрение разработчика. Если для одного селектора прописаны разные значения для одного свойства, то приоритет отдается нижней записи.

Специфичность - это способ, с помощью которого браузеры определяют, какие значения свойств CSS наиболее соответствуют элементу и, следовательно, будут применены. Специфичность основана на правилах соответствия, состоящих из селектора CSS различных типов.

В следующем списке типы селекторов расположены по возрастанию специфичности:

селекторы типов элементов (например, h1) и псевдоэлементов (например, ::before).
селекторы классов (например, .example), селекторы атрибутов (например, [type="radio"]) и псевдокласов (например, :hover).
селекторы идентификаторов (например, #example).

Универсальный селектор (*), комбинаторы (+, >, ~, ' ') и отрицающий псевдокласс (:not()) не влияют на специфичность. (Однако селекторы, объявленные внутри:not(), влияют)

Стили, обьявленные в элементе (например, style="font-weight:bold"), всегда переопределяют любые правила из внешних файлов стилей и, таким образом, их специфичность можно считать наивысшей.

Когда при объявлении стиля используется модификатор !important, это объявление получает наивысший приоритет среди всех прочих объявлений. Хотя технически модификатор !important не имеет со специфичностью ничего общего, он непосредственно на неё влияет. Поскольку !important усложняет отладку, нарушая естественное каскадирование ваших стилей, он не приветствуется и следует избегать его использования. Если к элементу применимы два взаимоисключающих стиля с модификатором !important, то применен будет стиль с большей специфичностью.

Примеры

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

Блок

Функционально независимый компонент страницы, который может быть повторно использован. В HTML блоки представлены атрибутом class.

Особенности:

Название блока характеризует смысл («что это?» — «меню»: menu, «кнопка»: button), а не состояние («какой, как выглядит?» — «красный»: red, «большой»: big).

Блок не должен влиять на свое окружение, т. е. блоку не следует задавать внешнюю геометрию (в виде отступов, границ, влияющих на размеры) и позиционирование.
В CSS по БЭМ также не рекомендуется использовать селекторы по тегам или id.
Блоки можно вкладывать друг в друга.
Допустима любая вложенность блоков.

Элемент

Составная часть блока, которая не может использоваться в отрыве от него.

Особенности:

Название элемента характеризует смысл («что это?» — «пункт»: item, «текст»: text), а не состояние («какой, как выглядит?» — «красный»: red, «большой»: big).
Структура полного имени элемента соответствует схеме: имя-блока__имя-элемента. Имя элемента отделяется от имени блока двумя подчеркиваниями (__).
Элементы можно вкладывать друг в друга.
Допустима любая вложенность элементов. Элемент — всегда часть блока, а не другого элемента.

Элемент

Это означает, что в названии элементов нельзя прописывать иерархию вида block__elem1__elem2.

Элемент — всегда часть блока и не должен использоваться отдельно от него.

Элемент

Элемент — необязательный компонент блока. Не у всех блоков должны быть элементы.

Элемент

Создавайте блок

Если фрагмент кода может использоваться повторно и не зависит от реализации других компонентов страницы.

Создавайте элемент

Если фрагмент кода не может использоваться самостоятельно, без родительской сущности (блока).

Модификатор

Cущность, определяющая внешний вид, состояние или поведение блока либо элемента.

Особенности:

Название модификатора характеризует внешний вид («какой размер?», «какая тема?» и т. п. — «размер»: size_s, «тема»: theme_islands), состояние («чем отличается от прочих?» — «отключен»: disabled, «фокусированный»: focused) и поведение («как ведет себя?», «как взаимодействует с пользователем?» — «направление»: directions_left-top).
Имя модификатора отделяется от имени блока или элемента одним подчеркиванием (_) или (--).

Модификатор

булевый

Структура полного имени модификатора соответствует схеме:

имя-блока_имя-модификатора;
имя-блока__имя-элемента_имя-модификатора.

Модификатор

ключ-значение

Структура полного имени модификатора соответствует схеме:

имя-блока_имя-модификатора_значение-модификатора;
имя-блока__имя-элемента_имя-модификатора_значение-модификатора.

Модификатор

Модификатор нельзя использовать самостоятельно

Микс

совмещать поведение и стили нескольких сущностей без дублирования кода;
создавать семантически новые компоненты интерфейса на основе имеющихся.

HTML/CSS

HTML

HTML

HTML

HTML

CSS

CSS. Структура языка

Подключение CSS

CSS. Селекторы

CSS. Блок объявлений

Примеры

Примеры

Примеры

Примеры

Примеры

Примеры

Блок

Элемент

Элемент

Элемент

Элемент

Элемент

Создавайте блок

Создавайте элемент

Модификатор

Модификатор

Модификатор

Модификатор

Микс

HTML/CSS

More from pavel_efimov