Во время презентации встал вопрос, как с помощью БЭМа реализовать пример со следующими входными данными:
кнопка <button class="button"><span class="button__text"></span></button>
шапка <header class="header> <button class="header__button button"><span class="button__text"></span></button> </header>
задача: необходимо видоизменить span в шапке, например, сделать его курсивом или жирным.
БЭМ решает задачу с семантической точки зрения. Первый вопрос, зачем нам изменять span? если при перемещении в заголовок меняется состояние кнопки, то мы добавляем модификатор, и решение выглядит следующим образом: <header class="header> <button class="header__button button"><span class="button__text button__text_state_active"></span></button> </header>,
где .button__text_state_active { font-weight: bold }
Если при перемещении span становится по смыслу частью шапки, то span должен стать элементом шапки, и решение выглядит следующим образом: <header class="header> <button class="header__button button"><span class="button__text header__text"></span></button> </header>,
где .header__text { font-weight: bold }
Last edit: Roman Zakharov 2018-10-12
If you would like to refer to this comment somewhere else in this project, copy and paste the following link:
Ром, насколько я понимаю, суть вопроса была не в этом конкретном примере со span.
Хотелось в принципе понять, как работать с множественной вложенностью блоков.
Например, показать, как элемент, когда он своём развитии уже начинает тянуть на блок, оформляется как новый блок.
If you would like to refer to this comment somewhere else in this project, copy and paste the following link:
Ром, вопрос был не только в том, когда что создавать, а главным образом в том, чтобы понять, наверное, лучше на хорошем примере, как работать с множественной вложенностью блоков.
Например, когда есть страница, на ней блок "документ", у него есть вложенный элемент "глава", который, в свою очередь, сам является блоком, в который входит блок-элемент "раздел", который содержит блок-элемент "подраздел", и.т.д.
Как при этом организуется именование, "наследование" стилей, организация файловой структуры и т.п.
Мне-то уже это в общих чертах понятно, я тут выступаю за доработку презентации, это пригодится потомкам ;)
Last edit: Alexander Lapygin 2018-10-13
If you would like to refer to this comment somewhere else in this project, copy and paste the following link:
Надеюсь, что мой предыдущий ответ и пример из соответсвующего раздела (https://sourceforge.net/p/javaenterpriseplatform/discussion/design/thread/e24791f037/) отвечает на данные вопросы.
If you would like to refer to this comment somewhere else in this project, copy and paste the following link:
Во время презентации встал вопрос, как с помощью БЭМа реализовать пример со следующими входными данными:
кнопка
<button class="button"><span class="button__text"></span></button>шапка
<header class="header><button class="header__button button"><span class="button__text"></span></button></header>задача: необходимо видоизменить span в шапке, например, сделать его курсивом или жирным.
БЭМ решает задачу с семантической точки зрения. Первый вопрос, зачем нам изменять span? если при перемещении в заголовок меняется состояние кнопки, то мы добавляем модификатор, и решение выглядит следующим образом:
<header class="header><button class="header__button button"><span class="button__text button__text_state_active"></span></button></header>,где .button__text_state_active { font-weight: bold }
Если при перемещении span становится по смыслу частью шапки, то span должен стать элементом шапки, и решение выглядит следующим образом:
<header class="header><button class="header__button button"><span class="button__text header__text"></span></button></header>,где .header__text { font-weight: bold }
Last edit: Roman Zakharov 2018-10-12
Ром, насколько я понимаю, суть вопроса была не в этом конкретном примере со span.
Хотелось в принципе понять, как работать с множественной вложенностью блоков.
Например, показать, как элемент, когда он своём развитии уже начинает тянуть на блок, оформляется как новый блок.
Лучше, чем в доке, не ответить - https://ru.bem.info/methodology/quick-start/#%D0%9A%D0%BE%D0%B3%D0%B4%D0%B0-%D1%81%D0%BE%D0%B7%D0%B4%D0%B0%D0%B2%D0%B0%D1%82%D1%8C-%D0%B1%D0%BB%D0%BE%D0%BA-%D0%BA%D0%BE%D0%B3%D0%B4%D0%B0--%D1%8D%D0%BB%D0%B5%D0%BC%D0%B5%D0%BD%D1%82
Создавайте блок
Если фрагмент кода может использоваться повторно и не зависит от реализации других компонентов страницы.
Создавайте элемент
Если фрагмент кода не может использоваться самостоятельно, без родительской сущности (блока).
Ром, вопрос был не только в том, когда что создавать, а главным образом в том, чтобы понять, наверное, лучше на хорошем примере, как работать с множественной вложенностью блоков.
Например, когда есть страница, на ней блок "документ", у него есть вложенный элемент "глава", который, в свою очередь, сам является блоком, в который входит блок-элемент "раздел", который содержит блок-элемент "подраздел", и.т.д.
Как при этом организуется именование, "наследование" стилей, организация файловой структуры и т.п.
Мне-то уже это в общих чертах понятно, я тут выступаю за доработку презентации, это пригодится потомкам ;)
Last edit: Alexander Lapygin 2018-10-13
Надеюсь, что мой предыдущий ответ и пример из соответсвующего раздела (https://sourceforge.net/p/javaenterpriseplatform/discussion/design/thread/e24791f037/) отвечает на данные вопросы.
Ром, по-моему, ты ничего не говорил об уровнях переопределения в БЭМ. Считаешь это несущественной возможностью ?