Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Поправила регистр якорей на всех страницах методологии #859

Open
wants to merge 1 commit into
base: bem-info-data
Choose a base branch
from
Open

Поправила регистр якорей на всех страницах методологии #859

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
36 changes: 18 additions & 18 deletions method/bem-for-css/bem-for-css.ru.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,23 +3,23 @@
В БЭМ-методологии CSS используется для оформления страниц и является одной из [технологий реализации блока](../key-concepts/key-concepts.ru.md#Технология-реализации).

Основные принципы работы с CSS рассматриваются в следующих разделах:
* [Селекторы](#Селекторы)
* [Селекторы классов](#Селекторы-классов)
* [Совмещение тега и класса в селекторе](#Совмещение-тега-и-класса-в-селекторе)
* [Вложенные селекторы](#Вложенные-селекторы)
* [Комбинированные селекторы](#Комбинированные-селекторы)
* [Именование](#Именование)
* [Модификаторы](#Модификаторы)
* [Миксы](#Миксы)
* [Внешняя геометрия и позиционирование](#Внешняя-геометрия-и-позиционирование)
* [Стилизация групп блоков](#Стилизация-групп-блоков)
* [Разделение кода на части](#Разделение-кода-на-части)
* [Принцип единственной ответственности](#Принцип-единственной-ответственности)
* [Принцип открытости/закрытости](#Принцип-открытостизакрытости)
* [Селекторы](#селекторы)
* [Селекторы классов](#селекторы-классов)
* [Совмещение тега и класса в селекторе](#совмещение-тега-и-класса-в-селекторе)
* [Вложенные селекторы](#вложенные-селекторы)
* [Комбинированные селекторы](#комбинированные-селекторы)
* [Именование](#именование)
* [Модификаторы](#модификаторы)
* [Миксы](#миксы)
* [Внешняя геометрия и позиционирование](#внешняя-геометрия-и-позиционирование)
* [Стилизация групп блоков](#стилизация-групп-блоков)
* [Разделение кода на части](#разделение-кода-на-части)
* [Принцип единственной ответственности](#принцип-единственной-ответственности)
* [Принцип открытости/закрытости](#принцип-открытостизакрытости)
* [DRY](#dry)
* [Композиция вместо наследования](#Композиция-вместо-наследования)
* [Разделение кода по уровням переопределения и использование сборки](#Работа-с-уровнями-переопределения)
* [Как перейти на CSS по БЭМ](#Как-перейти-на-css-по-БЭМ)
* [Композиция вместо наследования](#композиция-вместо-наследования)
* [Разделение кода по уровням переопределения и использование сборки](#работа-с-уровнями-переопределения)
* [Как перейти на CSS по БЭМ](#как-перейти-на-css-по-бэм)

## Селекторы

Expand All @@ -29,7 +29,7 @@

Позволяют указать конкретный HTML-элемент страницы, независимо от тега. Обращение к селектору класса происходит через атрибут `class`, который должен иметь каждый HTML-элемент.

Значением атрибута `class` может быть разделенный пробелами список слов. Это позволяет использовать разные [БЭМ-сущности](../key-concepts/key-concepts.ru.md#БЭМ-сущность) на одном DOM-узле.
Значением атрибута `class` может быть разделенный пробелами список слов. Это позволяет использовать разные [БЭМ-сущности](../key-concepts/key-concepts.ru.md#бэм-сущность) на одном DOM-узле.

**Пример**

Expand Down Expand Up @@ -329,7 +329,7 @@ CSS-реализация:

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

Поэтому в БЭМ для того, чтобы единообразно отформатировать целый набор HTML-элементов, используют [миксы](../key-concepts/key-concepts.ru.md#Микс).
Поэтому в БЭМ для того, чтобы единообразно отформатировать целый набор HTML-элементов, используют [миксы](../key-concepts/key-concepts.ru.md#микс).

**Пример**

Expand Down
38 changes: 19 additions & 19 deletions method/bem-for-html/bem-for-html.ru.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,14 +1,14 @@
# HTML по БЭМ

В БЭМ HTML-разметку можно создавать [вручную](#Создание-html-вручную) или [генерировать автоматически](#Автоматическая-генерация-html). Принципы организации HTML-кода в обоих случаях одинаковы:
В БЭМ HTML-разметку можно создавать [вручную](#создание-html-вручную) или [генерировать автоматически](#автоматическая-генерация-html). Принципы организации HTML-кода в обоих случаях одинаковы:

* [Привязка блоков к DOM-узлу](#Привязка-блоков-к-dom-узлу)
* [Вложенность элементов](#Вложенность-элементов)
* [Использование HTML-оберток](#Использование-html-оберток)
* [Привязка блоков к DOM-узлу](#привязка-блоков-к-dom-узлу)
* [Вложенность элементов](#вложенность-элементов)
* [Использование HTML-оберток](#использование-html-оберток)

## Привязка блоков к DOM-узлу

Разметка страницы описывается в терминах [блоков](../key-concepts/key-concepts.ru.md#Блок), [элементов](../key-concepts/key-concepts.ru.md#Элемент) и [модификаторов](../key-concepts/key-concepts.ru.md#Модификатор).
Разметка страницы описывается в терминах [блоков](../key-concepts/key-concepts.ru.md#блок), [элементов](../key-concepts/key-concepts.ru.md#элемент) и [модификаторов](../key-concepts/key-concepts.ru.md#модификатор).

Чтобы указать, что блок, элемент или модификатор находятся на DOM-узле, их имена записываются в атрибуте `class`.

Expand All @@ -20,25 +20,25 @@

### Несколько блоков на одном DOM-узле

Чтобы совместить стили и поведение нескольких [БЭМ-сущностей](../key-concepts/key-concepts.ru.md#БЭМ-сущность), необходимо разместить их на одном DOM-узле. Для этого в значении атрибута `class` указываются имена БЭМ-сущностей, разделенные пробелом. Такой подход называется [миксом](../key-concepts/key-concepts.ru.md#Микс).
Чтобы совместить стили и поведение нескольких [БЭМ-сущностей](../key-concepts/key-concepts.ru.md#бэм-сущность), необходимо разместить их на одном DOM-узле. Для этого в значении атрибута `class` указываются имена БЭМ-сущностей, разделенные пробелом. Такой подход называется [миксом](../key-concepts/key-concepts.ru.md#микс).

Микс используется, например, чтобы добавить блоку или элементу модификатор. В примере ниже к стилям блока `menu` добавлены новые стили модификатора этого блока `menu_theme_bright`:

```html
<span class="menu menu_theme_bright"></span>
```

> [Читать подробнее про миксы](../bem-for-css/bem-for-css.ru.md#Миксы)
> [Читать подробнее про миксы](../bem-for-css/bem-for-css.ru.md#миксы)

### Один блок на нескольких DOM-узлах

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

> Пример включает особенности реализации фреймворка i-bem.js. [Читать подробнее про i-bem.js](https://ru.bem.info/platform/i-bem/html-binding/#Один-js-блок-на-нескольких-html-элементах)
> Пример включает особенности реализации фреймворка i-bem.js. [Читать подробнее про i-bem.js](https://ru.bem.info/platform/i-bem/html-binding/#один-js-блок-на-нескольких-html-элементах)

## Вложенность элементов

[Правила именования](../naming-convention/naming-convention.ru.md#Правила-формирования-имен) [запрещают](../../faq/faq.ru.md#Почему-не-стоит-создавать-элементы-элементов-block__elem1__elem2) отражать иерархию в названии элемента (`block__elem1__elem2`). Но в HTML элементы можно вкладывать друг в друга. Допустима любая вложенность элементов.
[Правила именования](../naming-convention/naming-convention.ru.md#правила-формирования-имен) [запрещают](../../faq/faq.ru.md#почему-не-стоит-создавать-элементы-элементов-block__elem1__elem2) отражать иерархию в названии элемента (`block__elem1__elem2`). Но в HTML элементы можно вкладывать друг в друга. Допустима любая вложенность элементов.

В примере ниже пункты меню представлены ссылками. Такая структура блока реализуется за счет вложенности элементов:

Expand All @@ -52,11 +52,11 @@

## Использование HTML-оберток

Чтобы [расположить один блок относительно другого](#Расположение-блока-относительно-других-блоков) или [позиционировать блоки внутри другого блока](#Расположение-html-элементов-внутри-блока) в БЭМ принято использовать [миксы](../key-concepts/key-concepts.ru.md#Микс). Если решить эти задачи с помощью миксов невозможно, применяются HTML-обертки.
Чтобы [расположить один блок относительно другого](#расположение-блока-относительно-других-блоков) или [позиционировать блоки внутри другого блока](#расположение-html-элементов-внутри-блока) в БЭМ принято использовать [миксы](../key-concepts/key-concepts.ru.md#Микс). Если решить эти задачи с помощью миксов невозможно, применяются HTML-обертки.

### Расположение блока относительно других блоков

Чтобы позиционировать один блок относительно другого блока, используется [микс](../key-concepts/key-concepts.ru.md#Микс).
Чтобы позиционировать один блок относительно другого блока, используется [микс](../key-concepts/key-concepts.ru.md#микс).

В примере блоки `header` и `footer` позиционируются на странице с помощью микса с элементами блока `page`, которым заданы нужные стили. Элементы `page__header` и `page__footer` опциональные и применяются к блоку `page`, если необходимо разместить шапку (`header`) или подвал (`footer`) на странице. Блоки `page`, `header` и `footer` остаются независимыми, так как не содержат стили про взаимное позиционирование.

Expand Down Expand Up @@ -118,19 +118,19 @@ CSS-реализация:

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

Шаблоны — это технология реализации блока, результатом работы которой является HTML этого блока. С помощью шаблонов текущий HTML-элемент может быть [подменен на другой](#Переопределение-шаблона) или [дополнен новыми](#Добавление-дополнительных-html-элементов).
Шаблоны — это технология реализации блока, результатом работы которой является HTML этого блока. С помощью шаблонов текущий HTML-элемент может быть [подменен на другой](#переопределение-шаблона) или [дополнен новыми](#добавление-дополнительных-html-элементов).

> В БЭМ-платформе разработана технология для создания шаблонов — [BEMHTML](https://ru.bem.info/platform/bem-xjst/8/). Все примеры в этом разделе приведены с использованием этого шаблонизатора.

Шаблоны в БЭМ пишутся декларативно. Это позволяет применять к ним основные принципы методологии:

* [Использовать термины блоков, элементов и модификаторов](#Одни-термины-во-всех-технологиях)
* [Разделять код на части](#Разделение-кода-на-части)
* [Использовать уровни переопределения](#Использование-уровней-переопределения)
* [Использовать термины блоков, элементов и модификаторов](#одни-термины-во-всех-технологиях)
* [Разделять код на части](#разделение-кода-на-части)
* [Использовать уровни переопределения](#использование-уровней-переопределения)

### Одни термины во всех технологиях

Шаблоны описываются в терминах блоков, элементов и модификаторов. Поэтому для работы с шаблонами используется дополнительный уровень абстракции над DOM-деревом — [БЭМ-дерево](../key-concepts/key-concepts.ru.md#БЭМ-дерево). БЭМ-дерево описывает имена БЭМ-сущностей, их состояния, порядок и вложенность. На основании этих данных шаблонизатор строит дерево узлов HTML-разметки блока.
Шаблоны описываются в терминах блоков, элементов и модификаторов. Поэтому для работы с шаблонами используется дополнительный уровень абстракции над DOM-деревом — [БЭМ-дерево](../key-concepts/key-concepts.ru.md#бэм-дерево). БЭМ-дерево описывает имена БЭМ-сущностей, их состояния, порядок и вложенность. На основании этих данных шаблонизатор строит дерево узлов HTML-разметки блока.

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

Expand Down Expand Up @@ -215,10 +215,10 @@ HTML-реализация блока `menu`, результат работы ш

### Использование уровней переопределения

С помощью [уровней переопределения](../key-concepts/key-concepts.ru.md#Уровень-переопределения) можно:
С помощью [уровней переопределения](../key-concepts/key-concepts.ru.md#уровень-переопределения) можно:

* [Переопределять шаблон целиком и отдельные его части](#Переопределение-шаблона)
* [Добавлять дополнительные HTML-элементы в разметку блока](#Добавление-дополнительных-html-элементов)
* [Переопределять шаблон целиком и отдельные его части](#переопределение-шаблона)
* [Добавлять дополнительные HTML-элементы в разметку блока](#добавление-дополнительных-html-элементов)

#### Переопределение шаблона

Expand Down
Loading