diff --git a/faq/faq.ru.md b/faq/faq.ru.md index db7f8f53f..36133b509 100644 --- a/faq/faq.ru.md +++ b/faq/faq.ru.md @@ -4,44 +4,44 @@ ## Почему БЭМ? -* [В чем отличие БЭМ от OOCSS, AMCSS, SMACSS, SUITCSS?](#В-чем-отличие-БЭМ-от-oocss-amcss-smacss-suitcss) -* [В чем разница между БЭМ и Web Components?](#В-чем-разница-между-БЭМ-и-web-components) -* [В чем разница между БЭМ и Bootstrap?](#В-чем-разница-между-БЭМ-и-bootstrap) -* [Полезен ли БЭМ в маленьких проектах?](#Полезен-ли-БЭМ-в-маленьких-проектах) +* [В чем отличие БЭМ от OOCSS, AMCSS, SMACSS, SUITCSS?](#в-чем-отличие-БЭМ-от-oocss-amcss-smacss-suitcss) +* [В чем разница между БЭМ и Web Components?](#в-чем-разница-между-БЭМ-и-web-components) +* [В чем разница между БЭМ и Bootstrap?](#в-чем-разница-между-БЭМ-и-bootstrap) +* [Полезен ли БЭМ в маленьких проектах?](#полезен-ли-БЭМ-в-маленьких-проектах) ## Блоки и элементы -* [Когда создавать блок, когда — элемент?](#Когда-создавать-блок-когда--элемент) -* [Как изменить внешний вид блока?](#Как-изменить-внешний-вид-блока) -* [Зачем в именах модификаторов и элементов указывать имя блока?](#Зачем-в-именах-модификаторов-и-элементов-указывать-имя-блока) -* [Зачем создавать отдельные директории и файлы для каждого блока и технологии?](#Зачем-создавать-отдельные-директории-и-файлы-для-каждого-блока-и-технологии) -* [Наследуют ли элементы блока его CSS-свойства?](#Наследуют-ли-элементы-блока-его-css-свойства) -* [Почему не стоит создавать блоки-обертки?](#Почему-не-стоит-создавать-блоки-обертки) -* [Почему не стоит создавать элементы элементов (block\__elem1\__elem2)?](#Почему-не-стоит-создавать-элементы-элементов-block__elem1__elem2) +* [Когда создавать блок, когда — элемент?](#когда-создавать-блок-когда--элемент) +* [Как изменить внешний вид блока?](#как-изменить-внешний-вид-блока) +* [Зачем в именах модификаторов и элементов указывать имя блока?](#зачем-в-именах-модификаторов-и-элементов-указывать-имя-блока) +* [Зачем создавать отдельные директории и файлы для каждого блока и технологии?](#зачем-создавать-отдельные-директории-и-файлы-для-каждого-блока-и-технологии) +* [Наследуют ли элементы блока его CSS-свойства?](#наследуют-ли-элементы-блока-его-css-свойства) +* [Почему не стоит создавать блоки-обертки?](#почему-не-стоит-создавать-блоки-обертки) +* [Почему не стоит создавать элементы элементов (block\__elem1\__elem2)?](#почему-не-стоит-создавать-элементы-элементов-block__elem1__elem2) ## Модификаторы и миксы -* [Когда создавать модификатор, когда — микс?](#Когда-создавать-модификатор-когда--микс) -* [Когда создавать булевый модификатор, когда — модификатор «ключ-значение»?](#Когда-создавать-булевый-модификатор-когда--модификатор-ключ-значение) -* [Как выбрать имя модификатора?](#Как-выбрать-имя-модификатора) -* [Как сделать глобальные модификаторы для блоков?](#Как-сделать-глобальные-модификаторы-для-блоков) -* [Почему нельзя писать имя модификатора блока в имени элемента (block_mod__elem)?](#Почему-нельзя-писать-имя-модификатора-блока-в-имени-элемента-block_mod__elem) +* [Когда создавать модификатор, когда — микс?](#когда-создавать-модификатор-когда--микс) +* [Когда создавать булевый модификатор, когда — модификатор «ключ-значение»?](#когда-создавать-булевый-модификатор-когда--модификатор-ключ-значение) +* [Как выбрать имя модификатора?](#как-выбрать-имя-модификатора) +* [Как сделать глобальные модификаторы для блоков?](#как-сделать-глобальные-модификаторы-для-блоков) +* [Почему нельзя писать имя модификатора блока в имени элемента (block_mod__elem)?](#почему-нельзя-писать-имя-модификатора-блока-в-имени-элемента-block_mod__elem) ## CSS -* [Как адаптировать сайт к различным устройствам?](#Как-адаптировать-сайт-к-различным-устройствам) -* [Можно ли совмещать теги и классы в селекторе?](#Можно-ли-совмещать-теги-и-классы-в-селекторе) -* [Можно ли использовать вложенные селекторы?](#Можно-ли-использовать-вложенные-селекторы) -* [Можно ли использовать комбинированные селекторы?](#Можно-ли-использовать-комбинированные-селекторы) -* [Можно ли использовать селекторы по пользовательским тегам?](#Можно-ли-использовать-селекторы-по-пользовательским-тегам) -* [Почему не стоит делать общий сброс стилей (reset)?](#Почему-не-стоит-делать-общий-сброс-стилей-reset) -* [Почему не стоит писать block_mod вместо block block_mod?](#Почему-не-стоит-писать-block_mod-вместо-block-block_mod) -* [В каких случаях следует создавать вспомогательные блоки?](#В-каких-случаях-следует-создавать-вспомогательные-блоки) -* [Зачем внешнюю геометрию и позиционирование задавать через родительский блок?](#Зачем-внешнюю-геометрию-и-позиционирование-задавать-через-родительский-блок) +* [Как адаптировать сайт к различным устройствам?](#как-адаптировать-сайт-к-различным-устройствам) +* [Можно ли совмещать теги и классы в селекторе?](#можно-ли-совмещать-теги-и-классы-в-селекторе) +* [Можно ли использовать вложенные селекторы?](#можно-ли-использовать-вложенные-селекторы) +* [Можно ли использовать комбинированные селекторы?](#можно-ли-использовать-комбинированные-селекторы) +* [Можно ли использовать селекторы по пользовательским тегам?](#можно-ли-использовать-селекторы-по-пользовательским-тегам) +* [Почему не стоит делать общий сброс стилей (reset)?](#почему-не-стоит-делать-общий-сброс-стилей-reset) +* [Почему не стоит писать block_mod вместо block block_mod?](#почему-не-стоит-писать-block_mod-вместо-block-block_mod) +* [В каких случаях следует создавать вспомогательные блоки?](#в-каких-случаях-следует-создавать-вспомогательные-блоки) +* [Зачем внешнюю геометрию и позиционирование задавать через родительский блок?](#зачем-внешнюю-геометрию-и-позиционирование-задавать-через-родительский-блок) ## JavaScript -* [Зачем нужен i-bem.js, если есть jQuery?](#Зачем-нужен-i-bemjs-если-есть-jquery) +* [Зачем нужен i-bem.js, если есть jQuery?](#зачем-нужен-i-bemjs-если-есть-jquery) ## У меня другой вопрос @@ -65,7 +65,7 @@ **Инкапсуляция** * В Web Components реализована через Shadow DOM. -* В БЭМ — с помощью [элементов](../method/key-concepts/key-concepts.ru.md#Элемент) блока. +* В БЭМ — с помощью [элементов](../method/key-concepts/key-concepts.ru.md#элемент) блока. **Работа шаблонов** @@ -82,9 +82,9 @@ **Вместо Custom Elements — абстракция над DOM-деревом** * В Web Components используются [Custom Elements](https://www.w3.org/TR/custom-elements/). Такой подход позволяет разместить на одном DOM-узле только один компонент. -* В БЭМ используется [БЭМ-дерево](../method/key-concepts/key-concepts.ru.md#БЭМ-дерево). Такой подход позволяет размещать на одном DOM-узле несколько компонентов ([БЭМ-сущностей](../method/key-concepts/key-concepts.ru.md#БЭМ-сущность)). +* В БЭМ используется [БЭМ-дерево](../method/key-concepts/key-concepts.ru.md#бэм-дерево). Такой подход позволяет размещать на одном DOM-узле несколько компонентов ([БЭМ-сущностей](../method/key-concepts/key-concepts.ru.md#бэм-сущность)). - > Подробнее читайте в разделе про [миксы](../method/key-concepts/key-concepts.ru.md#Микс). + > Подробнее читайте в разделе про [миксы](../method/key-concepts/key-concepts.ru.md#микс). ## Полезен ли БЭМ в маленьких проектах? @@ -92,13 +92,13 @@ * Повторно использовать верстку * Небольшие однотипные проекты могут иметь похожую структуру. Например, посадочные страницы (landing) — разные снаружи, одинаковые внутри. Для их создания можно использовать готовые шаблоны. - * В пределах одной страницы используются одинаковые [блоки](../method/key-concepts/key-concepts.ru.md#Блок): несколько кнопок, выпадающих списков или меню. Их можно взять из готовой библиотеки или реализовать свою библиотеку и использовать во всех проектах. + * В пределах одной страницы используются одинаковые [блоки](../method/key-concepts/key-concepts.ru.md#блок): несколько кнопок, выпадающих списков или меню. Их можно взять из готовой библиотеки или реализовать свою библиотеку и использовать во всех проектах. * Быстро прототипировать верстку * Прототип сайта создается из блоков. Вместо верстки в БЭМ-проекте вы сразу проектируете интерфейс из готовых блоков. * Ускорить разработку - * [Уровни переопределения](../method/key-concepts/key-concepts.ru.md#Уровень-переопределения) позволяют подключать библиотеки и доопределять блоки, не зависеть от обновлений библиотеки. + * [Уровни переопределения](../method/key-concepts/key-concepts.ru.md#уровень-переопределения) позволяют подключать библиотеки и доопределять блоки, не зависеть от обновлений библиотеки. * БЭМ-проект можно быстро начать с шаблонного проекта [project-stub](https://github.com/bem/project-stub) или [bem-express](https://github.com/bem/bem-express). * Не зависеть от конкретного разработчика @@ -129,7 +129,7 @@ ## Когда создавать блок, когда — элемент? -Методология БЭМ не устанавливает строгих правил создания блоков и элементов. Многое зависит от конкретных реализаций и личных предпочтений разработчика. Выбирайте то, что подходит именно вам, учитывая [рекомендации](../method/quick-start/quick-start.ru.md#Когда-создавать-блок-когда--элемент). +Методология БЭМ не устанавливает строгих правил создания блоков и элементов. Многое зависит от конкретных реализаций и личных предпочтений разработчика. Выбирайте то, что подходит именно вам, учитывая [рекомендации](../method/quick-start/quick-start.ru.md#когда-создавать-блок-когда--элемент). ## Как изменить внешний вид блока? @@ -143,7 +143,7 @@ Если блок имеет специфичное оформление только для данного окружения и не будет переиспользован на проекте. -> Подробнее про применение миксов и модификаторов читайте в разделе [Когда создавать модификатор, когда — микс?](#Когда-создавать-модификатор-когда--микс). +> Подробнее про применение миксов и модификаторов читайте в разделе [Когда создавать модификатор, когда — микс?](#когда-создавать-модификатор-когда--микс). ## Зачем в именах модификаторов и элементов указывать имя блока? @@ -204,7 +204,7 @@ Наличие элементов элементов ограничивает возможность изменять внутреннюю структуру блока. Элементы нельзя поменять местами, удалить или добавить без корректировки существующего кода. -> Подробнее читайте в разделе [Быстрый старт](../method/quick-start/quick-start.ru.md#Принципы-работы-с-элементами). +> Подробнее читайте в разделе [Быстрый старт](../method/quick-start/quick-start.ru.md#принципы-работы-с-элементами). ## Когда создавать модификатор, когда — микс? @@ -221,7 +221,7 @@ Например, в большинстве случаев создается микс, если: * реализуется определенная бизнес-логика проекта; -* задается [внешняя геометрия](../method/bem-for-css/bem-for-css.ru.md#Внешняя-геометрия-и-позиционирование) для данного окружения. +* задается [внешняя геометрия](../method/bem-for-css/bem-for-css.ru.md#внешняя-геометрия-и-позиционирование) для данного окружения. ## Когда создавать булевый модификатор, когда — модификатор «ключ-значение»? @@ -268,9 +268,9 @@ В БЭМ отсутствует понятие глобальных модификаторов, так как имя любого модификатора содержит имя блока или элемента. -Если требуется вынести CSS-свойство за пределы одного блока и применять его к разным БЭМ-сущностям в проекте, необходимо создавать отдельный блок, реализованный в технологии CSS. После чего совместить реализацию разных блоков с помощью [миксов](../method/key-concepts/key-concepts.ru.md#Микс). +Если требуется вынести CSS-свойство за пределы одного блока и применять его к разным БЭМ-сущностям в проекте, необходимо создавать отдельный блок, реализованный в технологии CSS. После чего совместить реализацию разных блоков с помощью [миксов](../method/key-concepts/key-concepts.ru.md#микс). -> Подробнее читайте в разделе [Стилизация групп блоков](../method/bem-for-css/bem-for-css.ru.md#Стилизация-групп-блоков). +> Подробнее читайте в разделе [Стилизация групп блоков](../method/bem-for-css/bem-for-css.ru.md#стилизация-групп-блоков). ## Почему нельзя писать имя модификатора блока в имени элемента (block_mod__elem)? @@ -295,7 +295,7 @@ Существует несколько способов изменять разметку страницы на основе ширины окна браузера: * [используя Media Queries](#media-queries); -* [переключая модификаторы](#Переключение-модификатора). +* [переключая модификаторы](#переключение-модификатора). В обоих случаях необходимо определить контрольные точки (breakpoints), условия, при которых раскладка сайта меняется с одной на другую. @@ -358,25 +358,25 @@ button_position_right.css: Изменение CSS-классов на DOM-узле происходит при помощи JavaScript. -> Подробнее читайте в разделе [Переключение модификаторов](https://ru.bem.info/platform/tutorials/i-bem/modifiers/#Переключение-toggle-модификатора). +> Подробнее читайте в разделе [Переключение модификаторов](https://ru.bem.info/platform/tutorials/i-bem/modifiers/#переключение-toggle-модификатора). ## Можно ли совмещать теги и классы в селекторе? Совмещение тега и класса в селекторе повышает специфичность CSS-правил. Методология БЭМ не рекомендует совмещать теги и классы в селекторе. -> Подробнее читайте в разделе [Совмещение тега и класса в селекторе](../method/bem-for-css/bem-for-css.ru.md#Совмещение-тега-и-класса-в-селекторе). +> Подробнее читайте в разделе [Совмещение тега и класса в селекторе](../method/bem-for-css/bem-for-css.ru.md#совмещение-тега-и-класса-в-селекторе). ## Можно ли использовать вложенные селекторы? Вложенные селекторы увеличивают связанность кода и делают его повторное использование невозможным. Методология БЭМ допускает использование таких селекторов, но рекомендует свести их к минимуму. -> Подробнее читайте в разделе [Вложенные селекторы](../method/bem-for-css/bem-for-css.ru.md#Вложенные-селекторы). +> Подробнее читайте в разделе [Вложенные селекторы](../method/bem-for-css/bem-for-css.ru.md#вложенные-селекторы). ## Можно ли использовать комбинированные селекторы? Комбинированные селекторы имеют более высокую специфичность CSS-правил, чем одиночные. Успешность переопределения таких селекторов сильно привязана к порядку их объявления. Методология БЭМ не рекомендует использовать комбинированные селекторы. -> Подробнее читайте в разделе [Комбинированные селекторы](../method/bem-for-css/bem-for-css.ru.md#Комбинированные-селекторы). +> Подробнее читайте в разделе [Комбинированные селекторы](../method/bem-for-css/bem-for-css.ru.md#комбинированные-селекторы). ## Можно ли использовать селекторы по пользовательским тегам? @@ -405,14 +405,14 @@ icon-twitter {} В таком подходе существует ряд ограничений: -* невозможно использовать [миксы](../method/key-concepts/key-concepts.ru.md#Микс); +* невозможно использовать [миксы](../method/key-concepts/key-concepts.ru.md#микс); * не любой блок можно выразить пользовательским HTML-элементом. Например, для всех ссылок необходим тег ``, а для полей — ``. ## Почему не стоит делать общий сброс стилей (reset)? На блоки не должны влиять CSS-правила, созданные для всей страницы. Это нарушает их независимость и затрудняет повторное использование. -Общий сброс стилей по сути реализуется с помощью [глобальных CSS-правил](#Как-сделать-глобальные-модификаторы-для-блоков), которые в большинстве случаев пишутся к селекторам на тег, что нежелательно делать в БЭМ-проекте. +Общий сброс стилей по сути реализуется с помощью [глобальных CSS-правил](#как-сделать-глобальные-модификаторы-для-блоков), которые в большинстве случаев пишутся к селекторам на тег, что нежелательно делать в БЭМ-проекте. ## Почему не стоит писать block_mod вместо block block_mod? @@ -432,7 +432,7 @@ icon-twitter {} ## В каких случаях следует создавать вспомогательные блоки? -Методология БЭМ не устанавливает строгих правил создания блоков-хелперов. Многое зависит от конкретных реализаций и личных предпочтений разработчика. Если такой блок необходим, то можно воспользоваться [миксом](../method/key-concepts/key-concepts.ru.md#Микс). +Методология БЭМ не устанавливает строгих правил создания блоков-хелперов. Многое зависит от конкретных реализаций и личных предпочтений разработчика. Если такой блок необходим, то можно воспользоваться [миксом](../method/key-concepts/key-concepts.ru.md#микс). Примером вспомогательного блока в [bem-core](https://ru.bem.info/platform/libs/bem-core/) может служить блок `clearfix`, а в [bem-components](https://ru.bem.info/platform/libs/bem-components/) — `z-index-group`. @@ -440,7 +440,7 @@ icon-twitter {} Чтобы компонент оставался независимым, CSS-свойства, которые помешают его переиспользовать в другом окружении (например, `margin` и `position`), задают через родительский блок. -> Подробнее читайте в разделе [Внешняя геометрия и позиционирование](../method/bem-for-css/bem-for-css.ru.md#Внешняя-геометрия-и-позиционирование) +> Подробнее читайте в разделе [Внешняя геометрия и позиционирование](../method/bem-for-css/bem-for-css.ru.md#внешняя-геометрия-и-позиционирование) ## Зачем нужен i-bem.js, если есть jQuery?