Р
Size: a a a
2019 May 11
AP
тогда как временный вариант буду использовать key-value модфикатор и повешу TODO для дальнейшей переделки с дизайнером
AP
Возможно подправлю верстку по ходу дела и все встанет на свои места
Р
Не видя дизайн трудно давать советы — БЭМ универсален, но может трактоваться по-разному.
Могу лишь посоветоватьвести разработку с двух сторон:
1) внешнее разделение на блоки и элементы «трактуется» данными, которые приходят «снаружи»
2) Изнутри используется переиспользуемые компоненты. Хороший списко уже готовых таких низкоуровневых компонент — bem-components (и bem-core — ещё более низкоуровневые).
Могу лишь посоветоватьвести разработку с двух сторон:
1) внешнее разделение на блоки и элементы «трактуется» данными, которые приходят «снаружи»
2) Изнутри используется переиспользуемые компоненты. Хороший списко уже готовых таких низкоуровневых компонент — bem-components (и bem-core — ещё более низкоуровневые).
AP
Роман, спасибо за помощь. Попробую что-нибудь придумать =)
2019 May 12
D
Коллеги, привет. Ситуация: есть section, в нем div`ы которые будут спозиционированы на flex. Хочу создать обертку для этих дивов со св-ом flex. Вопрос: эта обертка по смыслу часть section (section__flexbox-wrapper) ? Или такие wrapper`ы вспомогательные именуем как отдельный блок? Часто с такой ситуацией встречаюсь. Спасибо.
MK
На самом деле блоки отвечающие за композицию, скелет и позиционирование интефейсных сущностей всегда можно вынести в отдельные блоки и затем миксовать их к узлам смысловых сущностей (или их оборачивать).
В whitepaper подобные штуки вынесенны на два слоя: Pattern и Layout:
— http://whitepaper.tools/doc.html#/patterns
— http://whitepaper.tools/doc.html#/layout
Это удобно когда ты понимаешь, что одни и те же принцыпы сквозят через весь интерфейс. Это помогает избежать дублирование стилей.
В whitepaper подобные штуки вынесенны на два слоя: Pattern и Layout:
— http://whitepaper.tools/doc.html#/patterns
— http://whitepaper.tools/doc.html#/layout
Это удобно когда ты понимаешь, что одни и те же принцыпы сквозят через весь интерфейс. Это помогает избежать дублирование стилей.
D
На самом деле блоки отвечающие за композицию, скелет и позиционирование интефейсных сущностей всегда можно вынести в отдельные блоки и затем миксовать их к узлам смысловых сущностей (или их оборачивать).
В whitepaper подобные штуки вынесенны на два слоя: Pattern и Layout:
— http://whitepaper.tools/doc.html#/patterns
— http://whitepaper.tools/doc.html#/layout
Это удобно когда ты понимаешь, что одни и те же принцыпы сквозят через весь интерфейс. Это помогает избежать дублирование стилей.
В whitepaper подобные штуки вынесенны на два слоя: Pattern и Layout:
— http://whitepaper.tools/doc.html#/patterns
— http://whitepaper.tools/doc.html#/layout
Это удобно когда ты понимаешь, что одни и те же принцыпы сквозят через весь интерфейс. Это помогает избежать дублирование стилей.
отлично, спасибо большое!
D
Еще вопрос в продолжение. В документации по БЭМ написано: "внешний вид блока может меняться в зависимости от примененного модификатора." Это правило распространяется не только на блоки но и на элементы, верно? Те два полностью одинаковых h2 у кот только цвета разные могут выглядеть так:
section__title section__title_color_light
section__title section__title_color_dark
Я правильно понимаю?
section__title section__title_color_light
section__title section__title_color_dark
Я правильно понимаю?
AA
Еще вопрос в продолжение. В документации по БЭМ написано: "внешний вид блока может меняться в зависимости от примененного модификатора." Это правило распространяется не только на блоки но и на элементы, верно? Те два полностью одинаковых h2 у кот только цвета разные могут выглядеть так:
section__title section__title_color_light
section__title section__title_color_dark
Я правильно понимаю?
section__title section__title_color_light
section__title section__title_color_dark
Я правильно понимаю?
Да, модификаторы применяются и к блокам, и к элементам
D
Да, модификаторы применяются и к блокам, и к элементам
те моя запись h2 верная ?
AA
те моя запись h2 верная ?
Я честно говоря не помню, как правильно модифкатор _color_light называется и используется (в котором есть имя свойства и значение свойства), но в целом да
AA
Можно просто использовать .section__title_light
D
Я честно говоря не помню, как правильно модифкатор _color_light называется и используется (в котором есть имя свойства и значение свойства), но в целом да
спасибо, это детали, я посмотрю. Интересует подход
D
Можно просто использовать .section__title_light
да кстати, это ведь булевый вариант...светлый / темный. Спасибо!
MK
Так как в основе любого интерфейса лежит типографика, можно пойти ещё дальше и для более лёгкого жонглирования внешним видом текста сделать блок .text c пачкой модификаторов на цвет, размер, жирность, регистр, …
Его так же можно складывать внутрь элементов смыслового блоки или примиксовывать в нужных модификацияк к его элементам.
http://whitepaper.tools/doc.html#/content-text
Его так же можно складывать внутрь элементов смыслового блоки или примиксовывать в нужных модификацияк к его элементам.
http://whitepaper.tools/doc.html#/content-text
D
Так как в основе любого интерфейса лежит типографика, можно пойти ещё дальше и для более лёгкого жонглирования внешним видом текста сделать блок .text c пачкой модификаторов на цвет, размер, жирность, регистр, …
Его так же можно складывать внутрь элементов смыслового блоки или примиксовывать в нужных модификацияк к его элементам.
http://whitepaper.tools/doc.html#/content-text
Его так же можно складывать внутрь элементов смыслового блоки или примиксовывать в нужных модификацияк к его элементам.
http://whitepaper.tools/doc.html#/content-text
спасибо 🙏🏻