From 960b5a0d26db7704e85d328580078fc3ffccc248 Mon Sep 17 00:00:00 2001 From: Taisiya Date: Wed, 14 Dec 2022 22:31:49 +0300 Subject: [PATCH] =?UTF-8?q?=D0=9F=D0=BE=D0=BF=D1=80=D0=B0=D0=B2=D0=B8?= =?UTF-8?q?=D0=BB=D0=B0=20=D1=80=D0=B5=D0=B3=D0=B8=D1=81=D1=82=D1=80=20?= =?UTF-8?q?=D1=8F=D0=BA=D0=BE=D1=80=D0=B5=D0=B9=20=D0=BD=D0=B0=20=D0=B2?= =?UTF-8?q?=D1=81=D0=B5=D1=85=20=D1=81=D1=82=D1=80=D0=B0=D0=BD=D0=B8=D1=86?= =?UTF-8?q?=D0=B0=D1=85=20=D0=BC=D0=B5=D1=82=D0=BE=D0=B4=D0=BE=D0=BB=D0=BE?= =?UTF-8?q?=D0=B3=D0=B8=D0=B8?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- method/bem-for-css/bem-for-css.ru.md | 36 ++++++------- method/bem-for-html/bem-for-html.ru.md | 38 +++++++------- method/bem-for-js/bem-for-js.ru.md | 46 ++++++++--------- .../block-modification.ru.md | 42 ++++++++-------- method/declarations/declarations.ru.md | 18 +++---- method/filestructure/filestructure.ru.md | 8 +-- method/history/history.ru.md | 16 +++--- method/key-concepts/key-concepts.ru.md | 50 +++++++++---------- .../naming-convention/naming-convention.ru.md | 12 ++--- method/quick-start/quick-start.ru.md | 34 ++++++------- .../redefinition-levels.ru.md | 38 +++++++------- method/solved-problems/solved-problems.ru.md | 24 ++++----- 12 files changed, 181 insertions(+), 181 deletions(-) diff --git a/method/bem-for-css/bem-for-css.ru.md b/method/bem-for-css/bem-for-css.ru.md index 2ed9a094a..d22f55b7b 100644 --- a/method/bem-for-css/bem-for-css.ru.md +++ b/method/bem-for-css/bem-for-css.ru.md @@ -3,23 +3,23 @@ В БЭМ-методологии CSS используется для оформления страниц и является одной из [технологий реализации блока](../key-concepts/key-concepts.ru.md#Технология-реализации). Основные принципы работы с CSS рассматриваются в следующих разделах: -* [Селекторы](#Селекторы) - * [Селекторы классов](#Селекторы-классов) - * [Совмещение тега и класса в селекторе](#Совмещение-тега-и-класса-в-селекторе) - * [Вложенные селекторы](#Вложенные-селекторы) - * [Комбинированные селекторы](#Комбинированные-селекторы) - * [Именование](#Именование) -* [Модификаторы](#Модификаторы) -* [Миксы](#Миксы) - * [Внешняя геометрия и позиционирование](#Внешняя-геометрия-и-позиционирование) - * [Стилизация групп блоков](#Стилизация-групп-блоков) -* [Разделение кода на части](#Разделение-кода-на-части) - * [Принцип единственной ответственности](#Принцип-единственной-ответственности) - * [Принцип открытости/закрытости](#Принцип-открытостизакрытости) +* [Селекторы](#селекторы) + * [Селекторы классов](#селекторы-классов) + * [Совмещение тега и класса в селекторе](#совмещение-тега-и-класса-в-селекторе) + * [Вложенные селекторы](#вложенные-селекторы) + * [Комбинированные селекторы](#комбинированные-селекторы) + * [Именование](#именование) +* [Модификаторы](#модификаторы) +* [Миксы](#миксы) + * [Внешняя геометрия и позиционирование](#внешняя-геометрия-и-позиционирование) + * [Стилизация групп блоков](#стилизация-групп-блоков) +* [Разделение кода на части](#разделение-кода-на-части) + * [Принцип единственной ответственности](#принцип-единственной-ответственности) + * [Принцип открытости/закрытости](#принцип-открытостизакрытости) * [DRY](#dry) - * [Композиция вместо наследования](#Композиция-вместо-наследования) -* [Разделение кода по уровням переопределения и использование сборки](#Работа-с-уровнями-переопределения) -* [Как перейти на CSS по БЭМ](#Как-перейти-на-css-по-БЭМ) + * [Композиция вместо наследования](#композиция-вместо-наследования) +* [Разделение кода по уровням переопределения и использование сборки](#работа-с-уровнями-переопределения) +* [Как перейти на CSS по БЭМ](#как-перейти-на-css-по-бэм) ## Селекторы @@ -29,7 +29,7 @@ Позволяют указать конкретный HTML-элемент страницы, независимо от тега. Обращение к селектору класса происходит через атрибут `class`, который должен иметь каждый HTML-элемент. -Значением атрибута `class` может быть разделенный пробелами список слов. Это позволяет использовать разные [БЭМ-сущности](../key-concepts/key-concepts.ru.md#БЭМ-сущность) на одном DOM-узле. +Значением атрибута `class` может быть разделенный пробелами список слов. Это позволяет использовать разные [БЭМ-сущности](../key-concepts/key-concepts.ru.md#бэм-сущность) на одном DOM-узле. **Пример** @@ -329,7 +329,7 @@ CSS-реализация: Несмотря на то, что групповые селекторы позволяют быстро изменить дизайн страницы, такой подход увеличивает связанность кода. -Поэтому в БЭМ для того, чтобы единообразно отформатировать целый набор HTML-элементов, используют [миксы](../key-concepts/key-concepts.ru.md#Микс). +Поэтому в БЭМ для того, чтобы единообразно отформатировать целый набор HTML-элементов, используют [миксы](../key-concepts/key-concepts.ru.md#микс). **Пример** diff --git a/method/bem-for-html/bem-for-html.ru.md b/method/bem-for-html/bem-for-html.ru.md index 715babf1f..00417cd31 100644 --- a/method/bem-for-html/bem-for-html.ru.md +++ b/method/bem-for-html/bem-for-html.ru.md @@ -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`. @@ -20,7 +20,7 @@ ### Несколько блоков на одном 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`: @@ -28,17 +28,17 @@ ``` -> [Читать подробнее про миксы](../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 элементы можно вкладывать друг в друга. Допустима любая вложенность элементов. В примере ниже пункты меню представлены ссылками. Такая структура блока реализуется за счет вложенности элементов: @@ -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` остаются независимыми, так как не содержат стили про взаимное позиционирование. @@ -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-разметки блока. БЭМ-дерево можно выразить любым форматом, который поддерживает древовидную структуру. @@ -215,10 +215,10 @@ HTML-реализация блока `menu`, результат работы ш ### Использование уровней переопределения -С помощью [уровней переопределения](../key-concepts/key-concepts.ru.md#Уровень-переопределения) можно: +С помощью [уровней переопределения](../key-concepts/key-concepts.ru.md#уровень-переопределения) можно: -* [Переопределять шаблон целиком и отдельные его части](#Переопределение-шаблона) -* [Добавлять дополнительные HTML-элементы в разметку блока](#Добавление-дополнительных-html-элементов) +* [Переопределять шаблон целиком и отдельные его части](#переопределение-шаблона) +* [Добавлять дополнительные HTML-элементы в разметку блока](#добавление-дополнительных-html-элементов) #### Переопределение шаблона diff --git a/method/bem-for-js/bem-for-js.ru.md b/method/bem-for-js/bem-for-js.ru.md index 706378229..0a067e1f8 100644 --- a/method/bem-for-js/bem-for-js.ru.md +++ b/method/bem-for-js/bem-for-js.ru.md @@ -1,27 +1,27 @@ # JavaScript по БЭМ -В БЭМ-методологии JavaScript — это одна из [технологий реализации](../key-concepts/key-concepts.ru.md#Технология-реализации) блока. Поэтому к JavaScript наравне с CSS применяются основные принципы методологии БЭМ: +В БЭМ-методологии JavaScript — это одна из [технологий реализации](../key-concepts/key-concepts.ru.md#технология-реализации) блока. Поэтому к JavaScript наравне с CSS применяются основные принципы методологии БЭМ: -* [Единая предметная область](#Единая-предметная-область) -* [Разделение кода на части](#Разделение-кода-на-части) -* [Работа с уровнями переопределения и использование сборки](#Работа-с-уровнями-переопределения) +* [Единая предметная область](#единая-предметная-область) +* [Разделение кода на части](#разделение-кода-на-части) +* [Работа с уровнями переопределения и использование сборки](#работа-с-уровнями-переопределения) Особенности реализации JavaScript по БЭМ-методологии рассматриваются в следующих разделах: -* [Работа с блоками](#Работа-с-блоками) - * [Взаимодействие блоков](#Взаимодействие-блоков) - * [Взаимодействие блока с элементами](#Взаимодействие-блока-с-элементами) -[Работа с модификаторами](#Работа-с-модификаторами) - * [Реакция на изменение модификаторов](#Реакция-на-изменение-модификаторов) -* [Как перейти на JavaScript по БЭМ](#Как-перейти-на-javascript-по-БЭМ) +* [Работа с блоками](#работа-с-блоками) + * [Взаимодействие блоков](#взаимодействие-блоков) + * [Взаимодействие блока с элементами](#взаимодействие-блока-с-элементами) +[Работа с модификаторами](#работа-с-модификаторами) + * [Реакция на изменение модификаторов](#реакция-на-изменение-модификаторов) +* [Как перейти на JavaScript по БЭМ](#как-перейти-на-javascript-по-бэм) ## Единая предметная область Для работы с JavaScript наравне с другими технологиями используются термины блоков, элементов и модификаторов. -В БЭМ к JavaScript применяется компонентный подход, который в отличие от Web Components не требует совместимости с браузерами. Независимым компонентом является [блок](../key-concepts/key-concepts.ru.md#Блок). Аналогом Shadow Dom выступают [элементы](../key-concepts/key-concepts.ru.md#Элемент) блока, которые реализуют [принцип инкапсуляции](#Принцип-инкапсуляции). [Модификаторы](../key-concepts/key-concepts.ru.md#Модификатор) блоков и элементов отвечают за состояния. Установка/снятие модификатора изменяет поведение блока. +В БЭМ к JavaScript применяется компонентный подход, который в отличие от Web Components не требует совместимости с браузерами. Независимым компонентом является [блок](../key-concepts/key-concepts.ru.md#блок). Аналогом Shadow Dom выступают [элементы](../key-concepts/key-concepts.ru.md#элемент) блока, которые реализуют [принцип инкапсуляции](#принцип-инкапсуляции). [Модификаторы](../key-concepts/key-concepts.ru.md#модификатор) блоков и элементов отвечают за состояния. Установка/снятие модификатора изменяет поведение блока. -Таким образом в БЭМ используется абстракция над DOM-деревом — [БЭМ-дерево](../key-concepts/key-concepts.ru.md#БЭМ-дерево). +Таким образом в БЭМ используется абстракция над DOM-деревом — [БЭМ-дерево](../key-concepts/key-concepts.ru.md#бэм-дерево). Рассмотрим пример, в котором необходимо показать всплывающее окно (блок `popup`). @@ -52,14 +52,14 @@ block('button').click(function() { * естественная деградация интерфейса на клиентах с отключенным JavaScript; * прогрессивный рендеринг — возможность начинать отрисовку элементов интерфейса до окончания загрузки всех данных страницы. -В простейшем случае блок соответствует DOM-узлу один к одному. Однако DOM-узел и блок — это не всегда одно и то же. Можно разместить несколько блоков на одном DOM-узле (это называется [микс](../key-concepts/key-concepts.ru.md#Микс)), а также [реализовать один блок на нескольких DOM-узлах](). +В простейшем случае блок соответствует DOM-узлу один к одному. Однако DOM-узел и блок — это не всегда одно и то же. Можно разместить несколько блоков на одном DOM-узле (это называется [микс](../key-concepts/key-concepts.ru.md#микс)), а также [реализовать один блок на нескольких DOM-узлах](). ## Разделение кода на части В БЭМ-методологии поведение каждого блока описывается независимо. Независимость блоков в JavaScript позволяет повторно использовать блоки и реализуется за счет использования принципов: -* [инкапсуляции](#Принцип-инкапсуляции) -* [декларативности](#Принцип-декларативности) -* [наследования](#Принцип-наследования) +* [инкапсуляции](#принцип-инкапсуляции) +* [декларативности](#принцип-декларативности) +* [наследования](#принцип-наследования) Логика работы каждого блока, его опциональных элементов и модификаторов описывается в отдельных файлах. JavaScript-файлы хранятся в соответствии с [правилами организации файловой структуры](../filestructure/filestructure.ru.md) БЭМ-проекта. @@ -92,13 +92,13 @@ logo/ # Директория блока logo ### Принцип инкапсуляции -В БЭМ внутренняя реализация блока скрыта. Блок предоставляет API для [взаимодействия с другими блоками](#Взаимодействие-блоков). Таким образом достигается независимость блока, возможность его повторного использования. +В БЭМ внутренняя реализация блока скрыта. Блок предоставляет API для [взаимодействия с другими блоками](#взаимодействие-блоков). Таким образом достигается независимость блока, возможность его повторного использования. -Элементы всегда являются внутренней реализацией блока, поэтому [обращение к ним](#Взаимодействие-блока-с-его-элементами) возможно только через API самого блока. +Элементы всегда являются внутренней реализацией блока, поэтому [обращение к ним](#взаимодействие-блока-с-элементами) возможно только через API самого блока. ### Принцип декларативности -Логика работы блока описывается декларативно: как набор действий и условий, при которых эти действия необходимо выполнять. Это позволяет разделять функциональность блока на отдельные части и использовать [уровни переопределения](#Работа-с-уровнями-переопределения). +Логика работы блока описывается декларативно: как набор действий и условий, при которых эти действия необходимо выполнять. Это позволяет разделять функциональность блока на отдельные части и использовать [уровни переопределения](#работа-с-уровнями-переопределения). ### Принцип наследования @@ -106,18 +106,18 @@ logo/ # Директория блока logo Также можно создавать цепочки наследования — блок наследуется от другого, который, в свою очередь, наследуется от третьего и т.д. -> Примеры реализации доступны в документации к [i-bem.js](https://github.com/bem/bem-core/blob/v4/common.docs/i-bem-js/i-bem-js-decl.ru.md#Наследование). +> Примеры реализации доступны в документации к [i-bem.js](https://github.com/bem/bem-core/blob/v4/common.docs/i-bem-js/i-bem-js-decl.ru.md#наследование). ## Работа с уровнями переопределения -Декларативное описание работы блока обеспечивает возможность использовать [уровни переопределения](../key-concepts/key-concepts.ru.md#Уровень-переопределения) для JavaScript наравне с CSS: +Декларативное описание работы блока обеспечивает возможность использовать [уровни переопределения](../key-concepts/key-concepts.ru.md#уровень-переопределения) для JavaScript наравне с CSS: * реализовывать новое поведение блока на другом уровне переопределения, сохраняя предыдущее, наследовать и дополнять его (делать super call); * полностью перекрывать поведение блока (переопределять); * добавлять блоки с новым поведением в проект. С помощью уровней переопределения можно создать универсальную JavaScript-библиотеку блоков, изменять ее на проектном уровне и включать в проект только необходимое поведение блоков. -> [Подробнее](../redefinition-levels/redefinition-levels.ru.md#Подключение-сторонней-библиотеки) о подключении библиотеки в проект. +> [Подробнее](../redefinition-levels/redefinition-levels.ru.md#обновление-подключенных-библиотек-блоков) о подключении библиотеки в проект. Рассмотрим пример формы отправки сообщения. @@ -215,7 +215,7 @@ block('button').onSetMod({ Такой подход дает возможность: * Определять каждому состоянию свой внешний вид, добавив стили модификатору. -* Изменять или полностью перекрывать поведение блока с помощью [уровней переопределения](#Работа-с-уровнями-переопределения). +* Изменять или полностью перекрывать поведение блока с помощью [уровней переопределения](#работа-с-уровнями-переопределения). ## Как перейти на JavaScript по БЭМ diff --git a/method/block-modification/block-modification.ru.md b/method/block-modification/block-modification.ru.md index 04dba705a..4eae4e3cc 100644 --- a/method/block-modification/block-modification.ru.md +++ b/method/block-modification/block-modification.ru.md @@ -1,11 +1,11 @@ # Способы изменения блока -[Блоки](../key-concepts/key-concepts.ru.md#Блок) — это универсальные, повторно используемые компоненты страницы. Одни и те же блоки используются в разных проектах. Чтобы проекты не были одинаковыми, блоки можно изменять различными способами: +[Блоки](../key-concepts/key-concepts.ru.md#блок) — это универсальные, повторно используемые компоненты страницы. Одни и те же блоки используются в разных проектах. Чтобы проекты не были одинаковыми, блоки можно изменять различными способами: -* [Модификатором](#Изменение-блока-модификатором) -* [Миксом](#Изменение-блока-миксом) -* [Уровнем переопределения](#Изменение-блока-уровнем-переопределения) -* [Контекстом](#Изменение-блока-контекстом) +* [Модификатором](#изменение-блока-модификатором) +* [Миксом](#изменение-блока-миксом) +* [Уровнем переопределения](#изменение-блока-уровнем-переопределения) +* [Контекстом](#изменение-блока-контекстом) Все способы изменения блока не требуют: @@ -15,23 +15,23 @@ ## Как выбрать способ изменения блока -* [Используйте модификатор](#Изменение-блока-модификатором), чтобы изменить один конкретный экземпляр блока. Установка и снятие модификатора должны влиять только на изменяемый блок и не иметь отношения к окружающим блокам. -* [Используйте микс](#Изменение-блока-миксом): - * чтобы [позиционировать](#Позиционирование-одного-блока-в-составе-другого) один блок в составе другого блока; - * чтобы [одинаково стилизовать несколько разных блоков](#Стилизация-групп-блоков) на странице вместо применения групповых селекторов. -* [Используйте уровни переопределения](#Изменение-блока-уровнем-переопределения), чтобы одновременно изменить все одноименные блоки проекта. -* [Используйте контекст](#Изменение-блока-контекстом), чтобы определить стили для блока заранее, когда предварительно неизвестно, какое содержимое будет иметь вложенный блок. +* [Используйте модификатор](#изменение-блока-модификатором), чтобы изменить один конкретный экземпляр блока. Установка и снятие модификатора должны влиять только на изменяемый блок и не иметь отношения к окружающим блокам. +* [Используйте микс](#изменение-блока-миксом): + * чтобы [позиционировать](#позиционирование-одного-блока-в-составе-другого) один блок в составе другого блока; + * чтобы [одинаково стилизовать несколько разных блоков](#стилизация-групп-блоков) на странице вместо применения групповых селекторов. +* [Используйте уровни переопределения](#изменение-блока-уровнем-переопределения), чтобы одновременно изменить все одноименные блоки проекта. +* [Используйте контекст](#изменение-блока-контекстом), чтобы определить стили для блока заранее, когда предварительно неизвестно, какое содержимое будет иметь вложенный блок. ## Изменение блока модификатором -Изменение блока производится установкой/снятием модификатора, код которого описывает изменения. Блоку можно добавлять одновременно [неограниченное количество модификаторов](#Добавление-нескольких-модификаторов). +Изменение блока производится установкой/снятием модификатора, код которого описывает изменения. Блоку можно добавлять одновременно [неограниченное количество модификаторов](#добавление-нескольких-модификаторов). Модификатор может задавать блоку: -* [внешний вид](#Изменение-внешнего-вида-блока) -* [поведение](#Изменение-поведения-блока) -* [состояние](#Изменение-состояния-блока) -* [структуру](#Изменение-структуры-блока) +* [внешний вид](#изменение-внешнего-вида-блока) +* [поведение](#изменение-поведения-блока) +* [состояние](#изменение-состояния-блока) +* [структуру](#изменение-структуры-блока) Рассмотрим изменение блока с помощью модификатора на примере блока `popup`. @@ -76,7 +76,7 @@ HTML-реализация: Модификатор `has-tail` в значении `true` добавляет блоку `popup` новый элемент — «хвостик». Также модификатор добавляет отступы блоку, освобождая место для хвостика. -> Подробнее о том, как и когда использовать [булевый модификатор](../../faq/faq.ru.md#Когда-создавать-булевый-модификатор-когда--модификатор-ключ-значение) +> Подробнее о том, как и когда использовать [булевый модификатор](../../faq/faq.ru.md#когда-создавать-булевый-модификатор-когда--модификатор-ключ-значение) HTML-реализация: @@ -126,7 +126,7 @@ HTML-реализация: В БЭМ-методологии позиционирование блока на странице задается через родительский блок. Такой подход обеспечивает независимость блоков и возможность их повторного использования. -> Подробнее о [внешней геометрии и позиционировании](../bem-for-css/bem-for-css.ru.md#Внешняя-геометрия-и-позиционирование). +> Подробнее о [внешней геометрии и позиционировании](../bem-for-css/bem-for-css.ru.md#внешняя-геометрия-и-позиционирование). В примере рассмотрен блок `header` (шапки) из подключенной библиотеки. По умолчанию блок `header` ничего не знает о расположении вложенных в него блоков. Чтобы добавить в шапку блоки `logo`, `search` и `user`, необходимо определить отступы для каждого вложенного блока: @@ -153,7 +153,7 @@ HTML-реализация: Миксы используются, чтобы единообразно стилизовать набор разных HTML-элементов на странице. -> Подробнее о том, [почему в БЭМ не используются глобальные модификаторы](../../faq/faq.ru.md#Как-сделать-глобальные-модификаторы-для-блоков). +> Подробнее о том, [почему в БЭМ не используются глобальные модификаторы](../../faq/faq.ru.md#как-сделать-глобальные-модификаторы-для-блоков). В примере тексту внутри блоков `article` и `copyright` необходимо задать один и тот же цвет и шрифт. Для этого нужно примиксовать блок `text`, стили которого определяют цвет и шрифт текста, к блокам `article` и `copyright`. @@ -179,7 +179,7 @@ CSS-реализация: ## Изменение блока уровнем переопределения -Изменение блока производится при помощи объединения свойств блока с разных [уровней переопределения](../key-concepts/key-concepts.ru.md#Уровень-переопределения). Блоки можно [доопределять и переопределять](../redefinition-levels/redefinition-levels.ru.md#Изменение-реализации-блока). Изменения блока описываются на отдельном уровне и подключаются при сборке. +Изменение блока производится при помощи объединения свойств блока с разных [уровней переопределения](../key-concepts/key-concepts.ru.md#уровень-переопределения). Блоки можно [доопределять и переопределять](../redefinition-levels/redefinition-levels.ru.md#изменение-реализации-блока). Изменения блока описываются на отдельном уровне и подключаются при сборке. > Подробнее о [принципах работы уровней переопределения](../redefinition-levels/redefinition-levels.ru.md). @@ -217,7 +217,7 @@ project/ ![Переопределенная кнопка](https://cdn.rawgit.com/bem-site/bem-method/bem-info-data/method/redefinition-levels/redefinition-levels__button-redefined.svg) -> Больше [примеров использования уровней переопределения](../redefinition-levels/redefinition-levels.ru.md#Примеры-использования-уровней-переопределения). +> Больше [примеров использования уровней переопределения](../redefinition-levels/redefinition-levels.ru.md#примеры-использования-уровней-переопределения). ## Изменение блока контекстом diff --git a/method/declarations/declarations.ru.md b/method/declarations/declarations.ru.md index dfefb42e8..f655b9f32 100644 --- a/method/declarations/declarations.ru.md +++ b/method/declarations/declarations.ru.md @@ -1,8 +1,8 @@ # Декларации в БЭМ -Чтобы перечислить БЭМ-сущности, необходимые для построения веб-страницы (читай «частного случая [бандла](../build/build.ru.md#Результат-сборки)»), можно воспользоваться **декларацией**. +Чтобы перечислить БЭМ-сущности, необходимые для построения веб-страницы (читай «частного случая [бандла](../build/build.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#элемент) и [модификаторов](../key-concepts/key-concepts.ru.md#модификатор), которые используются на странице. Таким образом, инструмент сборки, основываясь на данных из декларации, ограничивает количество сущностей, попадающих в готовый проект. Нет необходимости подключать все блоки проекта, если можно собрать только нужные по списку. **Задача декларации** — определить, что и в каком порядке подключать в сборку. @@ -21,14 +21,14 @@ Автоматическое построение декларации возможно: -* [по описанию страницы](#Создание-декларации-по-описанию-страницы) -* [с помощью интроспекции файловой структуры](#Создание-декларации-с-помощью-интроспекции-файловой-структуры) +* [по описанию страницы](#создание-декларации-по-описанию-страницы) +* [с помощью интроспекции файловой структуры](#создание-декларации-с-помощью-интроспекции-файловой-структуры) ### Создание декларации по описанию страницы Список необходимых для сборки сущностей можно получить по классам из HTML-файла веб-страницы. -В БЭМ-проекте структура веб-страницы описывается с помощью [БЭМ-дерева](../key-concepts/key-concepts.ru.md#БЭМ-дерево). Оно может быть построено автоматически по классам из HTML-кода (содержит классы с именами всех используемых [БЭМ-сущностей](../key-concepts/key-concepts.ru.md#БЭМ-сущность)) или создано вручную. +В БЭМ-проекте структура веб-страницы описывается с помощью [БЭМ-дерева](../key-concepts/key-concepts.ru.md#бэм-дерево). Оно может быть построено автоматически по классам из HTML-кода (содержит классы с именами всех используемых [БЭМ-сущностей](../key-concepts/key-concepts.ru.md#бэм-сущность)) или создано вручную. При сборке страницы декларация формируется автоматически на основании данных из БЭМ-дерева: * Все сущности (блоки, элементы и модификаторы) попадают в декларацию в порядке, указанном в конфигурации сборки. @@ -55,13 +55,13 @@ С помощью деклараций можно управлять процессом сборки. Например, можно объединять декларации разных страниц в одну и собирать весь проект целиком, а не постранично. Декларации можно не только совмещать, но и повторно использовать, выделять общие части или различия. -Такое управление дает возможность собирать все страницы в один [бандл](../build/build.ru.md#Результат-сборки), догружать необходимые части страницы по требованию или повторно использовать уже собранные общие компоненты на разных страницах. +Такое управление дает возможность собирать все страницы в один [бандл](../build/build.ru.md#результат-сборки), догружать необходимые части страницы по требованию или повторно использовать уже собранные общие компоненты на разных страницах. ### Операции над декларациями -* [сложение](#Сложение-деклараций) — объединение множеств сущностей разных деклараций в одну; -* [вычитание](#Вычитание-деклараций) — получение разницы между множествами сущностей разных деклараций; -* [пересечение](#Пересечение-деклараций) — получение декларации на основании пересечения множеств сущностей двух других деклараций. +* [сложение](#сложение-деклараций) — объединение множеств сущностей разных деклараций в одну; +* [вычитание](#вычитание-деклараций) — получение разницы между множествами сущностей разных деклараций; +* [пересечение](#пересечение-деклараций) — получение декларации на основании пересечения множеств сущностей двух других деклараций. #### Сложение деклараций diff --git a/method/filestructure/filestructure.ru.md b/method/filestructure/filestructure.ru.md index 2ce545dcc..460e602d2 100644 --- a/method/filestructure/filestructure.ru.md +++ b/method/filestructure/filestructure.ru.md @@ -2,7 +2,7 @@ Все БЭМ-проекты имеют схожую файловую структуру. Привычное для разработчиков расположение файлов облегчает навигацию по проекту и упрощает переключение между проектами. -В БЭМ [блок](../key-concepts/key-concepts.ru.md#Блок) первичен, а [технологии](../key-concepts/key-concepts.ru.md#Технология-реализации) — вторичны. Поэтому код проекта хранится по-блочно: каждому блоку соответствует свой набор файлов, необходимых для его реализации. Такой подход ускоряет разработку и отладку кода, обеспечивает оптимальный runtime: позволяет включать в сборку только необходимые файлы, точечно вносить правки и повторно использовать код. +В БЭМ [блок](../key-concepts/key-concepts.ru.md#блок) первичен, а [технологии](../key-concepts/key-concepts.ru.md#технология-реализации) — вторичны. Поэтому код проекта хранится по-блочно: каждому блоку соответствует свой набор файлов, необходимых для его реализации. Такой подход ускоряет разработку и отладку кода, обеспечивает оптимальный runtime: позволяет включать в сборку только необходимые файлы, точечно вносить правки и повторно использовать код. В методологии БЭМ приняты несколько схем организации файловой структуры проекта: @@ -14,9 +14,9 @@ ## Принципы организации файловой структуры БЭМ-проекта -* [Проект состоит из уровней переопределения](#Проект-состоит-из-уровней-переопределения) -* [Реализация блока состоит из отдельных файлов](#Реализация-блока-состоит-из-отдельных-файлов) -* [Файлы объединяются по смыслу, а не по типу](#Файлы-объединяются-по-смыслу-а-не-по-типу) +* [Проект состоит из уровней переопределения](#проект-состоит-из-уровней-переопределения) +* [Реализация блока состоит из отдельных файлов](#реализация-блока-состоит-из-отдельных-файлов) +* [Файлы объединяются по смыслу, а не по типу](#файлы-объединяются-по-смыслу-а-не-по-типу) ### Проект состоит из уровней переопределения diff --git a/method/history/history.ru.md b/method/history/history.ru.md index 56aeb3782..167b72391 100644 --- a/method/history/history.ru.md +++ b/method/history/history.ru.md @@ -1,13 +1,13 @@ # История создания БЭМ -* [Типичная верстка в Яндексе (2005)](#Типичная-верстка-в-Яндексе-2005-года) -* [Зарождение основ методологии (2006)](#Зарождение-основ-методологии) -* [Зачатки общепортального фреймворка (2006)](#Зачатки-общепортального-фреймворка) -* [Верстка независимыми блоками (2007)](#Верстка-независимыми-блоками) -* [Общепортальный фреймворк — Лего (2008)](#Общепортальный-фреймворк--Лего) -* [Общепортальный фреймворк — Лего 1.2 (2008)](#Общепортальный-фреймворк--Лего-12-2008) -* [Лего 2.0. Появление БЭМ (2009)](#Лего-20-Появление-БЭМ) -* [БЭМ и open source (2010)](#БЭМ-и-open-source-2010) +* [Типичная верстка в Яндексе (2005)](#типичная-верстка-в-яндексе-2005-года) +* [Зарождение основ методологии (2006)](#зарождение-основ-методологии) +* [Зачатки общепортального фреймворка (2006)](#зачатки-общепортального-фреймворка) +* [Верстка независимыми блоками (2007)](#верстка-независимыми-блоками) +* [Общепортальный фреймворк — Лего (2008)](#общепортальный-фреймворк--лего) +* [Общепортальный фреймворк — Лего 1.2 (2008)](#общепортальный-фреймворк--лего-12-2008) +* [Лего 2.0. Появление БЭМ (2009)](#лего-20-появление-бэм) +* [БЭМ и open source (2010)](#бэм-и-open-source-2010) ## Типичная верстка в Яндексе 2005 года diff --git a/method/key-concepts/key-concepts.ru.md b/method/key-concepts/key-concepts.ru.md index 3120da05c..3c14ea7d3 100644 --- a/method/key-concepts/key-concepts.ru.md +++ b/method/key-concepts/key-concepts.ru.md @@ -1,25 +1,25 @@ # Определения -* [Блок](#Блок) -* [Элемент](#Элемент) -* [Модификатор](#Модификатор) -* [БЭМ-сущность](#БЭМ-сущность) -* [Микс](#Микс) -* [БЭМ-дерево](#БЭМ-дерево) -* [Реализация блока](#Реализация-блока) -* [Технология реализации блока](#Технология-реализации) -* [Переопределение блока](#Переопределение-блока) -* [Уровень переопределения](#Уровень-переопределения) +* [Блок](#блок) +* [Элемент](#элемент) +* [Модификатор](#модификатор) +* [БЭМ-сущность](#бэм-сущность) +* [Микс](#микс) +* [БЭМ-дерево](#бэм-дерево) +* [Реализация блока](#реализация-блока) +* [Технология реализации блока](#технология-реализации) +* [Переопределение блока](#переопределение-блока) +* [Уровень переопределения](#уровень-переопределения) ## Блок -Логически и функционально независимый компонент страницы, аналог компонента в Web Components. Блок инкапсулирует в себе поведение (JavaScript), шаблоны, стили (CSS) и другие [технологии реализации](#Технология-реализации). Независимость блоков обеспечивает возможность их повторного использования, а также удобство в [разработке и поддержке проекта](../solved-problems/solved-problems.ru.md). +Логически и функционально независимый компонент страницы, аналог компонента в Web Components. Блок инкапсулирует в себе поведение (JavaScript), шаблоны, стили (CSS) и другие [технологии реализации](#технология-реализации). Независимость блоков обеспечивает возможность их повторного использования, а также удобство в [разработке и поддержке проекта](../solved-problems/solved-problems.ru.md). **Возможности блоков:** -* [Вложенная структура](#Вложенная-структура) -* [Свободное перемещение](#Свободное-перемещение) -* [Повторное использование](#Повторное-использование) +* [Вложенная структура](#вложенная-структура) +* [Свободное перемещение](#свободное-перемещение) +* [Повторное использование](#повторное-использование) ### Вложенная структура @@ -53,13 +53,13 @@ ![Пункты меню](key-concepts__menu-items.png) ->[Когда создавать блок, когда элемент?](../../faq/faq.ru.md#Когда-создавать-блок-когда--элемент) +>[Когда создавать блок, когда элемент?](../../faq/faq.ru.md#когда-создавать-блок-когда--элемент) > ->[Можно ли в методологии БЭМ создавать элементы элементов?](../../faq/faq.ru.md#Почему-не-стоит-создавать-элементы-элементов-block__elem1__elem2) +>[Можно ли в методологии БЭМ создавать элементы элементов?](../../faq/faq.ru.md#почему-не-стоит-создавать-элементы-элементов-block__elem1__elem2) ## Модификатор -БЭМ-сущность, определяющая внешний вид, состояние и поведение [блока](#Блок) или [элемента](#Элемент). +БЭМ-сущность, определяющая внешний вид, состояние и поведение [блока](#блок) или [элемента](#элемент). Использование модификаторов опционально, количество — неограничено. Блоку или элементу нельзя одновременно присвоить разные значения модификатора. @@ -75,13 +75,13 @@ ## БЭМ-сущность -БЭМ-сущностями называются [блоки](#Блок), [элементы](#Элемент) и [модификаторы](#Модификатор). +БЭМ-сущностями называются [блоки](#блок), [элементы](#элемент) и [модификаторы](#модификатор). Это понятие может применяться как частное, если рассматривается отдельная БЭМ-сущность, и как собирательное для блоков, элементов и модификаторов.  ## Микс -Способ использования разных [БЭМ-сущностей](#БЭМ-сущность) на одном [DOM-узле](https://ru.wikipedia.org/wiki/Document_Object_Model). +Способ использования разных [БЭМ-сущностей](#бэм-сущность) на одном [DOM-узле](https://ru.wikipedia.org/wiki/Document_Object_Model). Миксы позволяют: @@ -195,7 +195,7 @@ BEMJSON ## Реализация блока -Набор различных [технологий](#Технология-реализации), определяющих следующие особенности БЭМ-сущности: +Набор различных [технологий](#технология-реализации), определяющих следующие особенности БЭМ-сущности: * поведение; * внешний вид; @@ -207,7 +207,7 @@ BEMJSON ## Технология реализации -Технология, которая используется для [реализации](#Реализация-блока) блока. +Технология, которая используется для [реализации](#реализация-блока) блока. Блоки могут быть реализованы в одной или нескольких технологиях, например: @@ -220,17 +220,17 @@ BEMJSON ## Переопределение блока -Изменение [реализации](#Реализация-блока) блока путем добавления ему новых особенностей на другом [уровне](#Уровень-переопределения). +Изменение [реализации](#реализация-блока) блока путем добавления ему новых особенностей на другом [уровне](#уровень-переопределения). ## Уровень переопределения -Набор БЭМ-сущностей и их частичных [реализаций](#Реализация-блока). +Набор БЭМ-сущностей и их частичных [реализаций](#реализация-блока). -Конечная реализация блока может быть разделена по разным уровням переопределения. Каждый последующий уровень добавляет или перекрывает исходную реализацию блока. Конечный результат собирается из отдельных [технологий реализации](#Технология-реализации) блока со всех уровней переопределения последовательно в заданном порядке. +Конечная реализация блока может быть разделена по разным уровням переопределения. Каждый последующий уровень добавляет или перекрывает исходную реализацию блока. Конечный результат собирается из отдельных [технологий реализации](#технология-реализации) блока со всех уровней переопределения последовательно в заданном порядке. ![Уровень переопределения](key-concepts__levels.png) -[Переопределять](#Переопределение-блока) можно любые [технологии реализации](#Технология-реализации) БЭМ-сущностей. +[Переопределять](#переопределение-блока) можно любые [технологии реализации](#технология-реализации) БЭМ-сущностей. Например, в проект на отдельный уровень подключается сторонняя библиотека, которая содержит готовые реализации блоков. Проектные блоки хранятся на другом уровне переопределения. diff --git a/method/naming-convention/naming-convention.ru.md b/method/naming-convention/naming-convention.ru.md index 5bcc934ae..51fd24d5f 100644 --- a/method/naming-convention/naming-convention.ru.md +++ b/method/naming-convention/naming-convention.ru.md @@ -22,14 +22,14 @@ * Значение модификатора отделяется от имени модификатора одним подчеркиванием (`_`). * Значение булевых модификаторов в имени не указывается. -> **Важно!** В методологии БЭМ [не существует элементов элементов](../../faq/faq.ru.md#Почему-не-стоит-создавать-элементы-элементов-block__elem1__elem2). Правила именования запрещают создавать элементы элементов, но в DOM-дереве элементы можно вкладывать друг в друга. +> **Важно!** В методологии БЭМ [не существует элементов элементов](../../faq/faq.ru.md#почему-не-стоит-создавать-элементы-элементов-block__elem1__elem2). Правила именования запрещают создавать элементы элементов, но в DOM-дереве элементы можно вкладывать друг в друга. ### Примеры В HTML БЭМ-сущности представлены атрибутом `class`. В БЭМ во всех технологиях происходит обращение к классу: -* [CSS](../bem-for-css/bem-for-css.ru.md#Селекторы) -* [JavaScript](../bem-for-js/bem-for-js.ru.md#Привязка-javascript-блоков-к-html) -* [шаблоны](../bem-for-html/bem-for-html.ru.md#Автоматическая-генерация-html) +* [CSS](../bem-for-css/bem-for-css.ru.md#селекторы) +* [JavaScript](../bem-for-js/bem-for-js.ru.md#привязка-javascript-блоков-к-html) +* [шаблоны](../bem-for-html/bem-for-html.ru.md#автоматическая-генерация-html) Примеры правил формирования имен приведены на CSS. @@ -37,7 +37,7 @@ `menu` -> [Почему префиксы в именах блока не нужны?](../history/history.ru.md#Появление-блоков) +> [Почему префиксы в именах блока не нужны?](../history/history.ru.md#появление-блоков) *HTML* @@ -155,7 +155,7 @@ * Имена записываются латиницей. * Имя блока или элемента перед модификатором не указывается. -Такая схема именования ограничивает использование [миксов](../key-concepts/key-concepts.ru.md#Микс), так как не дает возможности определить, к какому блоку или элементу относится модификатор. +Такая схема именования ограничивает использование [миксов](../key-concepts/key-concepts.ru.md#микс), так как не дает возможности определить, к какому блоку или элементу относится модификатор. ### Ваша схема именования diff --git a/method/quick-start/quick-start.ru.md b/method/quick-start/quick-start.ru.md index 928f0c090..a691b307a 100644 --- a/method/quick-start/quick-start.ru.md +++ b/method/quick-start/quick-start.ru.md @@ -7,12 +7,12 @@ ## Содержание -* [Блок](#Блок) -* [Элемент](#Элемент) -* [Когда создавать блок, когда — элемент?](#Когда-создавать-блок-когда--элемент) -* [Модификатор](#Модификатор) -* [Микс](#Микс) -* [Файловая структура](#Файловая-структура) +* [Блок](#блок) +* [Элемент](#элемент) +* [Когда создавать блок, когда — элемент?](#когда-создавать-блок-когда--элемент) +* [Модификатор](#модификатор) +* [Микс](#микс) +* [Файловая структура](#файловая-структура) ## Блок @@ -20,7 +20,7 @@ Особенности: -* [Название блока](../naming-convention/naming-convention.ru.md#Имя-блока) характеризует смысл («что это?» — «меню»: `menu`, «кнопка»: `button`), а не состояние («какой, как выглядит?» — «красный»: `red`, «большой»: `big`). +* [Название блока](../naming-convention/naming-convention.ru.md#имя-блока) характеризует смысл («что это?» — «меню»: `menu`, «кнопка»: `button`), а не состояние («какой, как выглядит?» — «красный»: `red`, «большой»: `big`). **Пример** @@ -63,7 +63,7 @@ Особенности: -* [Название элемента](../naming-convention/naming-convention.ru.md#Имя-элемента) характеризует смысл («что это?» — «пункт»: `item`, «текст»: `text`), а не состояние («какой, как выглядит?» — «красный»: `red`, «большой»: `big`). +* [Название элемента](../naming-convention/naming-convention.ru.md#имя-элемента) характеризует смысл («что это?» — «пункт»: `item`, «текст»: `text`), а не состояние («какой, как выглядит?» — «красный»: `red`, «большой»: `big`). * Структура полного имени элемента соответствует схеме: `имя-блока__имя-элемента`. Имя элемента отделяется от имени блока двумя подчеркиваниями (`__`). **Пример** @@ -81,9 +81,9 @@ ### Принципы работы с элементами -* [Вложенность](#Вложенность-1) -* [Принадлежность](#Принадлежность) -* [Необязательность](#Необязательность) +* [Вложенность](#вложенность-1) +* [Принадлежность](#принадлежность) +* [Необязательность](#необязательность) #### Вложенность @@ -126,7 +126,7 @@ ``` -Имя блока задает пространство имен, которое [гарантирует зависимость](../naming-convention/naming-convention.ru.md#Имя-элемента) элементов от блока (`block__elem`). +Имя блока задает пространство имен, которое [гарантирует зависимость](../naming-convention/naming-convention.ru.md#имя-элемента) элементов от блока (`block__elem`). Блок может иметь вложенную структуру элементов в DOM-дереве: @@ -225,7 +225,7 @@ Если фрагмент кода не может использоваться самостоятельно, без родительской сущности (блока). -Исключение составляют элементы, реализация которых для упрощения разработки требует разделения на более мелкие части — подэлементы. В БЭМ-методологии [нельзя создавать элементы элементов](#Вложенность-1). В подобном случае вместо элемента необходимо создавать служебный блок. +Исключение составляют элементы, реализация которых для упрощения разработки требует разделения на более мелкие части — подэлементы. В БЭМ-методологии [нельзя создавать элементы элементов](#вложенность-1). В подобном случае вместо элемента необходимо создавать служебный блок. ## Модификатор @@ -233,7 +233,7 @@ Cущность, определяющая внешний вид, состоян Особенности: -* [Название модификатора](../naming-convention/naming-convention.ru.md#Имя-модификатора-блока) характеризует внешний вид («какой размер?», «какая тема?» и т. п. — «размер»: `size_s`, «тема»: `theme_islands`), состояние («чем отличается от прочих?» — «отключен»: `disabled`, «фокусированный»: `focused`) и поведение («как ведет себя?», «как взаимодействует с пользователем?» — «направление»: `directions_left-top`). +* [Название модификатора](../naming-convention/naming-convention.ru.md#имя-модификатора-блока) характеризует внешний вид («какой размер?», «какая тема?» и т. п. — «размер»: `size_s`, «тема»: `theme_islands`), состояние («чем отличается от прочих?» — «отключен»: `disabled`, «фокусированный»: `focused`) и поведение («как ведет себя?», «как взаимодействует с пользователем?» — «направление»: `directions_left-top`). * Имя модификатора отделяется от имени блока или элемента одним подчеркиванием (`_`). ### Типы модификаторов @@ -321,7 +321,7 @@ Cущность, определяющая внешний вид, состоян ``` -> [Зачем в именах модификаторов и элементов указывать имя блока?](../../faq/faq.ru.md#Зачем-в-именах-модификаторов-и-элементов-указывать-имя-блока) +> [Зачем в именах модификаторов и элементов указывать имя блока?](../../faq/faq.ru.md#зачем-в-именах-модификаторов-и-элементов-указывать-имя-блока) ## Микс @@ -348,7 +348,7 @@ Cущность, определяющая внешний вид, состоян ## Файловая структура -Принятый в методологии БЭМ компонентный подход применяется и к [организации проектов в файловой структуре](../filestructure/filestructure.ru.md#Организация-файловой-структуры). Реализации блоков, элементов и модификаторов делятся на независимые файлы-технологии, что позволяет нам подключать их опционально. +Принятый в методологии БЭМ компонентный подход применяется и к [организации проектов в файловой структуре](../filestructure/filestructure.ru.md#организация-файловой-структуры). Реализации блоков, элементов и модификаторов делятся на независимые файлы-технологии, что позволяет нам подключать их опционально. Особенности: @@ -392,7 +392,7 @@ search-form/ # Директория блока `search Такая файловая структура позволяет легко поддерживать и повторно использовать код. -> Разветвленная файловая структура предполагает, что в production код будет [собираться в общие файлы проекта](../build/build.ru.md#Сборка-БЭМ-проекта). +> Разветвленная файловая структура предполагает, что в production код будет [собираться в общие файлы проекта](../build/build.ru.md#сборка-бэм-проекта). Придерживаться [рекомендуемой файловой структуры](../filestructure/filestructure.ru.md#nested) не обязательно. Вы можете использовать любую альтернативную структуру проекта, соответствующую принципам организации файловой структуры БЭМ, например: diff --git a/method/redefinition-levels/redefinition-levels.ru.md b/method/redefinition-levels/redefinition-levels.ru.md index c904bb5c7..83767f6f5 100644 --- a/method/redefinition-levels/redefinition-levels.ru.md +++ b/method/redefinition-levels/redefinition-levels.ru.md @@ -1,13 +1,13 @@ # Уровни переопределения -* [Понятие уровня переопределения](#Понятие-уровня-переопределения) -* [Задачи уровней переопределения](#Задачи-уровней-переопределения) -* [Порядок использования уровней переопределения](#Порядок-использования-уровней-переопределения) -* [Примеры](#Примеры-использования-уровней-переопределения) +* [Понятие уровня переопределения](#понятие-уровня-переопределения) +* [Задачи уровней переопределения](#задачи-уровней-переопределения) +* [Порядок использования уровней переопределения](#порядок-использования-уровней-переопределения) +* [Примеры](#примеры-использования-уровней-переопределения) ## Понятие уровня переопределения -**Уровень переопределения** — это директория в БЭМ-проекте, которая содержит файлы реализаций [блоков](../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#модификатор). Любой БЭМ-проект состоит из уровней переопределения. Минимальное количество уровней в проекте — один, максимальное – не ограничено. @@ -22,18 +22,18 @@ project/ Уровни переопределения позволяют: -* [Разделять проект на платформы](#Разделение-проекта-на-платформы) -* [Легко обновлять библиотеки блоков, подключенные в проект](#Обновление-подключенных-библиотек-блоков) -* [Использовать общие блоки для разработки разных проектов](#Разработка-проектов-в-которых-используются-общие-блоки) -* [Менять темы оформления, не затрагивая логику работы проекта](#Создание-разных-тем-оформления-проекта) -* [Проводить эксперименты в рабочем проекте](#Эксперименты-в-рабочем-проекте) +* [Разделять проект на платформы](#разделение-проекта-на-платформы) +* [Легко обновлять библиотеки блоков, подключенные в проект](#обновление-подключенных-библиотек-блоков) +* [Использовать общие блоки для разработки разных проектов](#разработка-проектов-в-которых-используются-общие-блоки) +* [Менять темы оформления, не затрагивая логику работы проекта](#создание-разных-тем-оформления-проекта) +* [Проводить эксперименты в рабочем проекте](#эксперименты-в-рабочем-проекте) ## Задачи уровней переопределения Уровни переопределения решают следующие задачи: -* [добавляют новые блоки в проект](#Добавление-блоков-в-проект) -* [изменяют существующие блоки](#Изменение-реализации-блока) +* [добавляют новые блоки в проект](#добавление-блоков-в-проект) +* [изменяют существующие блоки](#изменение-реализации-блока) ### Добавление блоков в проект @@ -177,7 +177,7 @@ project/ В одном проекте можно настраивать разные варианты сборки: определять последовательность и множество уровней для каждого отдельного случая. Например, для каждой страницы проекта можно настроить свое используемое множество уровней. -Пример показывает [разделение проекта на платформы по уровням переопределения](#Разделение-проекта-на-платформы). +Пример показывает [разделение проекта на платформы по уровням переопределения](#разделение-проекта-на-платформы). На схеме показана сборка проекта для разных платформ в зависимости от [юзер-агента](https://ru.wikipedia.org/wiki/User_Agent): @@ -186,11 +186,11 @@ project/ ## Примеры использования уровней переопределения Наиболее распространенные способы использования уровней переопределения: -* [Разделение проекта на платформы](#Разделение-проекта-на-платформы) -* [Обновление библиотеки блоков в проекте](#Обновление-подключенных-библиотек-блоков) -* [Разработка проектов, в которых используются общие блоки](#Разработка-проектов-в-которых-используются-общие-блоки) -* [Создание разных тем оформления проекта](#Создание-разных-тем-оформления-проекта) -* [Эксперименты в рабочем проекте](#Эксперименты-в-рабочем-проекте) +* [Разделение проекта на платформы](#разделение-проекта-на-платформы) +* [Обновление библиотеки блоков в проекте](#обновление-подключенных-библиотек-блоков) +* [Разработка проектов, в которых используются общие блоки](#разработка-проектов-в-которых-используются-общие-блоки) +* [Создание разных тем оформления проекта](#создание-разных-тем-оформления-проекта) +* [Эксперименты в рабочем проекте](#эксперименты-в-рабочем-проекте) ### Разделение проекта на платформы @@ -263,7 +263,7 @@ project/ button/ # реализация кнопки в библиотеке ``` -При обновлении библиотеки, переопределенное правило блока `button` (высота 24px) сохранится, так как [переопределение не затрагивает исходную реализацию блока](#Изменение-реализации-блока) и находится на другом уровне переопределения. +При обновлении библиотеки, переопределенное правило блока `button` (высота 24px) сохранится, так как [переопределение не затрагивает исходную реализацию блока](#изменение-реализации-блока) и находится на другом уровне переопределения. ### Разработка проектов, в которых используются общие блоки diff --git a/method/solved-problems/solved-problems.ru.md b/method/solved-problems/solved-problems.ru.md index 730d84da7..82c856f63 100644 --- a/method/solved-problems/solved-problems.ru.md +++ b/method/solved-problems/solved-problems.ru.md @@ -2,10 +2,10 @@ Методология БЭМ задает [правила по именованию CSS-селекторов](../naming-convention/naming-convention.ru.md), соблюдение которых решает ряд проблем веб-разработки и отвечает на следующие вопросы: -* [Как упростить код и облегчить рефакторинг](#Как-упростить-код-и-облегчить-рефакторинг) -* [Как получить самодокументируемый код](#Как-получить-самодокументируемый-код) -* [Как начать повторно использовать код и избежать взаимного влияния компонентов друг на друга](#Как-начать-повторно-использовать-код-и-избежать-взаимного-влияния-компонентов-друг-на-друга) -* [Как разместить несколько сущностей на одном DOM-узле и избежать «Copy-Paste»](#Как-разместить-несколько-сущностей-на-одном-dom-узле-и-избежать-copy-paste) +* [Как упростить код и облегчить рефакторинг](#как-упростить-код-и-облегчить-рефакторинг) +* [Как получить самодокументируемый код](#как-получить-самодокументируемый-код) +* [Как начать повторно использовать код и избежать взаимного влияния компонентов друг на друга](#как-начать-повторно-использовать-код-и-избежать-взаимного-влияния-компонентов-друг-на-друга) +* [Как разместить несколько сущностей на одном DOM-узле и избежать «Copy-Paste»](#как-разместить-несколько-сущностей-на-одном-dom-узле-и-избежать-copy-paste) ## Как упростить код и облегчить рефакторинг @@ -49,14 +49,14 @@ **Решение** -Методология БЭМ решает проблему коллизии имен при помощи [соглашения по именованию CSS-классов](../naming-convention/naming-convention.ru.md#Соглашение-по-именованию-css-селекторов), предоставляя всем компонентам и их составляющим уникальные имена. +Методология БЭМ решает проблему коллизии имен при помощи [соглашения по именованию CSS-классов](../naming-convention/naming-convention.ru.md#соглашение-по-именованию), предоставляя всем компонентам и их составляющим уникальные имена. Применение правил по именованию позволяет: -* задавать уникальные имена [БЭМ-сущностям](../key-concepts/key-concepts.ru.md#БЭМ-сущность); +* задавать уникальные имена [БЭМ-сущностям](../key-concepts/key-concepts.ru.md#бэм-сущность); * отслеживать иерархические связи в пределах блока; * упрощать восприятие кода; -* получать [самодокументируемый код](#Как-получить-самодокументируемый-код). +* получать [самодокументируемый код](#как-получить-самодокументируемый-код). Рассмотрим тот же пример навигационного меню: @@ -116,9 +116,9 @@ Используя БЭМ, можно получить HTML с именами классов, показывающих взаимодействие следующих частей кода: -* независимых [блоков](../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#модификатор) блока или элемента. Рассмотрим пример с формой поиска на сайте. Не будем обращаться к HTML, попытаемся прочитать только CSS и понять, какую часть интерфейса он описывает. @@ -332,7 +332,7 @@ CSS-стили к пункту `item` могут быть записаны ка Допустим, в разделе новостей уже есть блок `articles`, которому написаны все необходимые CSS-правила. -Смешать реализации двух разных блоков без копирования кода можно при помощи [микса](../key-concepts/key-concepts.ru.md#Микс). То есть разместить на одном DOM-узле блок `nav` и элемент `articles__nav`. +Смешать реализации двух разных блоков без копирования кода можно при помощи [микса](../key-concepts/key-concepts.ru.md#микс). То есть разместить на одном DOM-узле блок `nav` и элемент `articles__nav`. В коде это будет выглядеть так: @@ -346,4 +346,4 @@ CSS-стили к пункту `item` могут быть записаны ка Такая реализация позволит объединить функциональность блока `nav` и особенности реализации элемента `articles__nav` (внешний вид новостных статей в меню). При этом нет необходимости копировать уже имеющиеся CSS-правила. При обнаружении ошибки, правки необходимо будет внести только в одну часть кода. -> Миксовать можно не только блоки с элементами, но и другие БЭМ-сущности. Подробнее о вариантах использования миксов в БЭМ читайте в разделе [Основные понятия БЭМ](../key-concepts/key-concepts.ru.md#Микс). +> Миксовать можно не только блоки с элементами, но и другие БЭМ-сущности. Подробнее о вариантах использования миксов в БЭМ читайте в разделе [Основные понятия БЭМ](../key-concepts/key-concepts.ru.md#микс).