До TechTrain осталось чуть больше недели, а мы во всю готовимся к БЭМ-дебатам. Приходите на площадку поболеть за участников или выступите в одном из раундов. Чтобы принять участие, свяжитесь с нами любым удобным способом.
Доброго. Только начал осваивать БЭМ. Подскажите, что в данном случае не так, и как следовало бы правильно сделать?
<header class="header">
<div class="header__text">
<p class="text-head"> Заголовок </p>
<ul class="text-main">
<li class="text-main__item"> Пункт 1 </li>
<li class="text-main__item"> Пункт 2 </li>
<li class="text-main__item"> Пункт 3 </li>
<li class="text-main__item"> Пункт 4 </li>
</ul>
</div>
<div class="header__logo">
<img src="#" alt="" class="logo">
</div>
</header>
Приветствую. Господа подскажите мне как gulp-bem-bundle-builder прокинуть свой naming. Просто обидно. Всё настроил, везде naming мой работает, собираю html, bemjson.js. Везде всё типтоп, а вот собрать бандл по итогу нельзя нормально ибо builder использует стандартный нейминг. Я то уже склоняюсь на стандартный перейти, но это же не дело, всё таки как-то то можно его заставить собирать с моим неймингом.
Если что
function style(path) {
builder = bundleBuilder({
levels: [
'src/common.block',
'src/' + path + '.block'
]
});
return src(['./src/' + path + '.bundles/deps.bemjson.js'])
.pipe(builder({
css: bundle => bundle.src('css').pipe($.concat('style.css')),
}))
.pipe(dest('dist/' + path + '/css'));
}
содержимое .bemrc
module.exports = {
root: true,
levels: [
{
path: 'src/',
naming: {
delims: {
elem: '__',
mod: { name: '--', val: '_' }
},
wordPattern: '[a-zA-Z0-9]+'
}
}
],
modules: {
'bem-tools': {
plugins: {
create: {
levels: {
"src/*.block": {
techs: ['css', 'deps.js'],
templateFolder: '.bem/templates',
templates: {
'js-modules': '.bem/templates/js',
'pug-modules': '.bem/templates/pug'
},
techsTemplates: {
js: 'js-modules',
pug: 'pug-modules'
}
}
}
}
}
}
}
}
C содержимым deps.bemjson.js всё в порядке, если моды создаю используя классический нейминг он собирает.
24-25 августа в Санкт-Петербурге пройдёт большой IT-фестиваль TechTrain 2019 для всех, кто любит IT-инженерию, технологии и разработку ПО. Мы не стоим в стороне и везём на фестиваль стенд и доклад Алексея Хохулина «State of BEM 2019. Эволюция большого фронтенда». Кстати, на стенде мы организуем БЭМ-дебаты, если вы хотите принять участие, напишите нам в личные сообщения — расскажем детали.
Stayed BEMed с нами на TechTrain.
Здравствуйте!
Такой вопрос.
Например создаем секцию с классом intro:
< section class="intro">
Как правильно задать класс заголовка в этой секции:
1) < h1 class="intro_title">
2)< h1 class="intro intro_title">
3) < h1 class="title">
Вы просили и мы сделаем!
19 июля в 18:30 в питерском офисе Яндекса пройдет БЭМап — митап по БЭМ.
Мы начнем с самых азов, расскажем зачем БЭМ в 2019 и куда он движется. Познакомим с основанной на БЭМ дизайн-системой whitepapper, позволяющей верстать без написания CSS. Поговорим, как применять идеи БЭМ в проекте на React с использованием пакетов.
И, конечно, ответим на все ваши вопросы.
Ноутбук приносить не обязательно. После встречи мы опубликуем все материалы, ссылки и видео.
Встречи по БЭМ всегда бесплатны, но нужно зарегистрироваться заранее: количество мест ограничено.
Stay BEMed!
Можете сказать правильно я сделал или нет ? ``
<head>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="media.css">
<meta name="keywords" content="Жизнь,работа,новости">
<meta name="description" content="MyLife - Это прекрасная жизнь, чтобы иди дальше....">
<title> Сайт </title>
</head>
<body>
<header>
<div class="container">
<div class="menu">
<div class="block-logo">
<img class="block-logo__image"src="Image/Logo.png">
</div>
<div class="block-button">
<a class="block-button__text" href="#">work</a>
<a class="block-button__text" href="#">news</a>
<a class="block-button__text" href="#">about me</a>
</div>
</div>
<h1 class="name">Slice of my life.</h1>
<div class="block-schroll">
<img class="block-schroll__img" src="Image/Mouse.png">
<p class="block-schroll__text">Schroll to see more</p>
</div>
</div>
</header>
</body>
``
Доброго времени суток. Правильная ли форма с точки зрения БЭМ? Больше всего вопросов вызвало присваивание классов элементам fieldset и label
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="merged/merge.min.css"/>
</head>
<body>
<div class="header">
<span class="logo">
<img src="" alt="" />
</span>
</div>
<div class="main">
<form class="auth-form" enctype="application/x-www-form-urlencoded" method="post">
<fieldset class="auth-form__fieldset">
<label class="auth-form__label">Логин</label>
<input type="text" class="auth-form__input_text"/>
</fieldset>
</form>
</div>
</body>
</html>
Привет!
Мы рады пригласить вас на очередной BEMup — митап по БЭМ, который пройдет в Москве 14 июня в 19:00. Эту встречу мы посвятим применению методологии БЭМ на React-проектах.
В программе:
— обзор @bem-react/classname — самого минималистичного пакета для генерации имен CSS-классов по БЭМ с поддержкой TypeScript. — статические и динамические модификаторы с помощью @bem-react/core. Рассмотрим правильные способы композиции, способы расширения компонентов и другие тонкости использования. — управление зависимостями благодаря @bem-react/di: зачем компонентам реестры, как правильно организовать эксперименты на проекте, нужно ли класть все зависимости в реестр, организация кода под разные платформы, разделение кода в модификаторах и блоках.
И, конечно же, ответим на все ваши вопросы!
Ноутбук приносить необязательно. После встречи мы опубликуем все материалы, ссылки и видео.
Встречи по БЭМ бесплатны, но нужно зарегистрироваться заранее: количество мест ограничено.
Stay BEMed!
Друзья, начинаем регистрацию на очередной BEMup — митап по БЭМ, который пройдет в Москве 24 мая в 19:00.
На эту встречу мы пригласили дизайнеров рассказать про создание дизайн-системы на основе http://whitepaper.tools.
Регистрируйтесь скорее, количество мест ограничено! https://events.yandex.ru/events/bemup/24-may-2019/
Здравствуйте, подскажите пожалуйста, я создаю проект на framework laravel и хочу использовать файловую структуру БЭМ для моих стилей (scss), соответственно в html разметке у меня блоки и элементы именованы по правилам как в документации.
Вопрос в том что считается ли такая ситуация правильной когда у меня допустим в папке для элемента находиться только один файл ? Потому что js файлы, мне всё таки удобнее было бы хранить в другом месте, не разбивать их как стили.
К примеру:
/header
__logo
header__logo.scss
__menu
__search
Получается что у меня вот в папке __logo будет только один файл. Да и вообще во многих папка может быть только один файл. К примеру если я захочу добавить модификатор какой то к logo
получится такое:
/header
__logo
_center
_header__logo_center.scss
header__logo.scss
__menu
__search
В папке _center один файл только. Заранее благодарю за ответ.
Пример:
<div class="block-name">
<div class="block-name__item">
<div class="block-name">
<div class="block-name__item">
etc.
</div>
</div>
</div>
</div>
<div class="popup popup_A">
<div class="popup__container">
<div class="popup__header">
<div>Знакомства</div>
<div class="popup__close">x</div>
</div>
<div class="popup__content enabled-notification">
<div class="enabled-notification__title">Включить уведомления</div>
<div class="notification">
<div>
<div class="notification__title">Новое сообщение</div>
<div class="notification__desc">Ирина: Привет! Встретимся сегодня у фонтана в парке</div>
</div>
<div class="notification__icon">
<svg xmlns="http://www.w3.org/2000/svg"></svg>
</div>
</div>
<div class="enabled-notification__text">
Вы разрешаете нам отправлять уведомления о новых сообщениях, комментариях на ваши заметки и т.д.?
</div>
</div>
<div class="popup__footer popup_A__footer">
<button class="btn btn_color_grey popup_A__btn">Нет, спасибо</button>
<div class="divider"></div>
<button class="btn btn_color_blue popup_A__btn">Включить</button>
</div>
</div>
</div>
Блок "popup" ре-используемый, может содержать различный контент. Блок "enabled-notification" уникальный и не будет ре-использоваться. Блок "notification" ре-используемый, может содержать различный контент, в рамках определённых элементов.
Для модификации кнопок (нужно было сделать ширину в 50%), используем микс с модификатором popup_A. В обычном состоянии у "popup" есть только одна кнопка.
.popup_A__footer{
display: flex;
justify-content: space-between;
}
.popup_A__btn{
width: 50%;
}
Ещё есть вопрос по использованию "пустых" тегов-элементов (без классов), допустимо ли это?
<div class="notification">
<div>
<div class="notification__title">Новое сообщение</div>
<div class="notification__desc">Ирина: Привет! Встретимся сегодня у фонтана в парке</div>
</div>
<div class="notification__icon">
<svg xmlns="http://www.w3.org/2000/svg"></svg>
</div>
</div>
Допустим у меня есть блок .article:
<div class="article">
<h1 class="article__heading"></h1>
<img class="artilce__image">
<p class="article__text"></p>
</div>
Я хочу видоизменить его внутри блока .frontpage, при этом сохранив привязку к .article. Для этого я использую микс только к .article:
.frontpage{
&__article{
.article{
&__heading{}
&__image{}
&__text{}
}
}
}
Такой подход (в отличии от миксования к каждому изменному блоку) позволяет мне не засорять пространство имен (никаких .frontpage__article-heading), и вроде бы не ломает модульность.
Соответствует ли он методологии?
Привет. Есть вот такой футер:
который можно разделить на два больших элемента:
И получается такая структура:
footer
footer__wrapper
footer__item footer__item_columns
footer__item footer__item_info
Это правильная структура и названия?
И еще внутри есть такие колонки:
И как лучше всего сделать колонки? Сделать их блоками или элемантами? Как тогда лучше обозвать их? Была идея navbar-column, но в колонке может не быть navbar(последняя колонка). Или сделать это элементами футера? Но тогда слишком много зависимости от футера будет и плюс хочется использовать класс wrapper для колонки примерно так:
noname-column
noname-column__wrapper
noname-column__header
noname-column__content
<div class="infg">
<div class="infg__item">
<div class="infg-icon">
<img src="/images/implant.svg" class="infg__icon" alt="">
</div>
<div class="infg__desc">
<div class="infg__title"></div>
<div class="infg__text"></div>
</div>
</div>
</div>
Вопрос: правильно ли я сделал именование классов согласно БЭМ? Как будет правильно назвать класс 'infg-icon' который находиться в div`?
Блоки и темы оформления.
Уже давно пытаюсь избавиться от боли модификатора _theme у блоков.
У нас 2 темы блока button - публичная и админка, около 2K строк стилей в сумме.
Имхо, блок должен быть максимально реиспользуемым и не тянуть ненужный код. Сейчас под тему запихиваются ВСЕ комбинации модификаторов блока, даже если они не нужны на странице. Это боль в поддержке.
Очень близки идеи http://whitepaper.tools/. В целом работаю тоже в этом направлении.
На данный момент пришёл к использованию 2-х видов переменных.
1. Глобальные/Контекстные (что реализовано в whitepaper)
Задаются через блок theme и модификаторы theme_color_* theme_size_* и т.д.
Провайдят контекст переменных вниз по дереву.
.Theme_color_light {
--color-bg: #f7f7f7;
--coloron-bg: #222;
--color-primary: #222;
--coloron-primary: #fff;
--color-secondary: #777;
--coloron-secondary: #ddd;
--color-surface: #fff;
--coloron-surface: #222;
--color-error: #d00;
--coloron-error: #fff;
--color-success: #090;
--coloron-success: #fff;
}
2. Локальные (Уровень блока)
Задаются с указанием префикса имени блока. Такой способ явно ограничивает пространство имён переменных, чтобы случайно не сломать что-то внутри дерева. И позволяет легко изменять их через модификаторы.
Если спроецировать на мир React, то контекстные переменные - это пропсы, локальные - стейт :)
.Button {
--Button-bg: var(--color-bg);
--Button-border: var(--color-secondary);
--Button-color: var(--color-primary);
--Button-shadow: var(--color-bg);
--Button-fontSize: 1rem;
background: var(--Button-bg);
border: 1px solid var(--Button-bg);
color: var(--Button-color);
padding: 1em 2em;
font-size: var(--Button-fontSize);
transition: .3s;
border-radius: 3px;
}
.Button:hover {
background: var(--Button-color);
color: var(--Button-bg);
cursor: pointer;
box-shadow: 0 10px 20px var(--Button-shadow);
}
.Button_disabled,
.Button_disabled:hover {
background: #ddd;
border-color: #ddd;
color: #999;
cursor: default;
box-shadow: none;
}
Блок получает переменные из контекста и преобразует их в локальные для дальнейшего использования в своих стилях.
3. Модификаторы
Дальше через модификаторы жонглируем уже локальными переменными блока.
.Button_color_action {
--Button-bg: var(--color-action, #00a);
--Button-color: var(--coloron-action, #fff);
}
.Button_color_error {
--Button-bg: var(--color-error, #f00);
--Button-color: var(--coloron-error, #fff);
}
.Button_color_success {
--Button-bg: var(--color-success, #090);
--Button-color: var(--coloron-success, #fff);
}
Данный подход позволяет избавиться от длинных селекторов в css.
Например если мы не хотим использовать локальные переменные, то нужно писать классы таким образом
.Button_color_success {
background: var(--coloron-success, #fff);
color: var(--color-success, #090);
}
.Button_color_success.Button:hover {
background: var(--color-success, #090);
color: var(--coloron-success, #fff);
}
И это только 2 состояние, а там ещё N состояний, включая вложенные элементы...
Локальные переменные, конечно не серебренная пуля и каскады писать придётся. Но как решение вполне может помочь добиться лаконичных селекторов.
4. Именование цветов
После долгих ресёрчей толком не нашёл способа лаконично и предсказуемо описывать переменные. Наиболее лаконичным стилем нашёл подход из Material Design https://material.io/design/color/
В кратце, есть какой-то цвет и для него создаётся рекомендуемый контрастный цвет.
:root {
--color-primary: #000;
--coloron-primary: #fff;
}
В качестве дополнительного задания контраста есть идеи использовать доп. параметр -low, -hight
:root {
--color-primary: #000;
--coloron-primary: #dddddd ; /* например для текста на фоне с цветом primary */
--coloron-primary-hight: #ffffff; /* сильноконтрастный цвет */
--coloron-primary-low: #777777; /* слабоконтрастный цвет */
}
В целом такое именование позволяет добиться предсказуемых результатов при создании темы.
Правда это тоже не является серебренной пулей, т.к. где-то могут не использоваться рекомендуемые переменные.
.Block {
background: var(--color-surface);
color: var(--color-error);
}
И не известно на сколько в новой теме surface и error будут контрастны друг к другу.
upd Пересмотрел ещё раз whitepapper https://github.com/whitepapertools/whitepaper-portal/tree/a6bb170522b470560e3572856cf11b1929e1469a/common.blocks/theme
Идёт разбитие цветовой темы на 2 вида. 1 базовые цвета страницы, 2 контролы (кнопки, чекбоксы, инпуты и т.д.).
Данный подход позволяет наиболее однозначно разрабатывать цвета для темы и тестировать их в "вакуме", что очень удобно. Тема не рассчитывается на все цвета радуги. Если нужно много вариаций, то стоит сделать несколько тем, что и плюс и минус.
Плюсы:
- Однозначность использования цветов
- Возможность разрабатывать тему "в вакуме"
Минусы:
- Нужно использовать несколько миксов темы на странице для нескольких комбинаций цветовых решений.
5. Старые браузеры
Любимый IE... Хоть поддержка по caniuse уже > 90% https://caniuse.com/#search=css-variables он ещё живёт...
Как один из подходов решения этого вопроса есть компромиссный вариант - делать версию с одной темой. Все переменные темы дублировать в :root и через postcss ставить статичные значения.
Этот сегмент получит сильно урезанный вариант оформления... Если это сильно критично то от локальных переменных придётся отказаться и делать стилизацию через каскады.
Либо использовать подходы с css-in-js... Но они не лишены недостатков.
6. Дизайнеры, разработчики и система
Тут конечно есть конфликт интересов... Но имхо, у дизайнера должна быть система, по которой он работает и она должна быть логичной (например http://whitepaper.tools/)
П.Н. Небольшая демка "на коленке" Буду благодарен, если поделитесь своей системой стилизации блоков и именованием переменных.
К примеру есть блок Collapse, у него существует два элемента: Collapse__part & Collapse__item.
На момент инициализации блока хочу разбить его контент таким образом:
//- Из такой структуры (так определено в bemjson)
<div class="collapse">
<div class="work collapse__item">...</div>
<div class="work collapse__item">...</div>
<div class="work collapse__item">...</div>
</div>
//- В такую (модифицировать)
<div class="collapse">
</div class="collapse__part">
<div class="work collapse__item">...</div>
<div class="work collapse__item">...</div>
</div>
</div class="collapse__part">
<div class="work collapse__item">...</div>
</div>
</div>
C условием того что эти чанки могут быть разной длины(настраиваемый параметр), в данном случае длина составляет 2 элемента(Collapse__item)
Посоветуйте пожалуйста в какой технологии это лучше сделать (в js, bemhtml.js или иным способом), каким образом?
ps. полностью использую среду разработки BEM (rep.: Project-Stub)
Здравствуйте. Подскажите пожалуйста, может ли быть так: Есть блок “родитель”, внутри него есть еще один блок “потомок” и внутри блока потомка есть элемент блока родителя? То есть вот так.
<div class=”parent”>
<div class=”children”>
<div class=”parent__elem”></div>
</div>
</div>
Подскажите как решается данная проблема? У нас имеется класс "header__search-form" который допустим имеет отступ с низу, но как быть если придется перенести блок "search-form" в другое место где ему тоже нужны те же свойства, нужно создавать новый класс для нового окружения, каскадом, добавлением утилитарного класса или как то иначе? вижу 3 варианта
Вариант 1
<div class="header">
<div class="search-form header__search-form"></div>
</div>
<div class="sidebar">
<div class="search-form sidebar__search-form"></div>
</div>
<div class="blog">
<div class="search-form blog__search-form"></div>
</div>
.header__search-form{
margin-bottom:10px;
}
.sidebar__search-form{
margin-bottom:5px;
}
.blog__search-form{
margin-bottom:10px;
}
Вариант 2
<div class="header">
<div class="search-form mb-10"></div>
</div>
<div class="sidebar">
<div class="search-form mb-5"></div>
</div>
<div class="blog">
<div class="search-form mb-10"></div>
</div>
Вариант 3
<div class="header">
<div class="search-form"></div>
</div>
<div class="sidebar">
<div class="search-form"></div>
</div>
<div class="blog">
<div class="search-form"></div>
</div>
.header .search-form {
margin-bottom:10px;
}
.sidebar .search-form {
margin-bottom:10px;
}
.blog .search-form {
margin-bottom:10px;
}
Стандартная ситуация
<body class="body body_fixed">
<div class="logo">
LOGO
</div>
</body>
.logo {
font-size: 40px;
}
.body.body_fixed .logo {
80px;
}
Как мне такого рода CSS по папочкам разложить? Как посоветуете наименовать файлы? Что вообще можно сделать чтоб это грамотно сопровождать и deps какой и куда прикладывать. Решил упороться на сборщиках и правильной организации структуры. Настроил сборщики начал тесты проводить потом бац, а что делать со спецефичностью? Хочешь не хочешь но есть моменты когда от неё не уйти.
Добрый вечер. Подскажите пожалуйста, правильно ли организована разметка по БЭМ?
Внешняя геометрия и позиционирование блока, а именно padding, position и т.д задаётся через миксы .top-bar__top-lang, .top-bar__top-phone, page__header, footer__copyrights, header__navigation, page__wrapper. Все ли я правильно понял?
Можно ли упростить/добавить что либо DOM-узлах?
<body class="page">
<div class="wrapper page__wrapper">
<div class="top-bar page__top-bar">
<div class="top-bar__container">
<div class="top-bar__row">
<div class="top-lang top-bar__top-lang">
<ul class="top-lang__list">
<li class="top-lang__item">
<a href="" class="top-lang__link"></a>
</li>
<li class="top-lang__item">
<a href="" class="top-lang__link"></a>
</li>
<li class="top-lang__item">
<a href="" class="top-lang__link"></a>
</li>
</ul>
</div>
<div class="top-phone top-bar__top-phone">
<!-- START .top-phone__list -->
<ul class="top-phone__list">
<li class="top-phone__item">
<a href="" class="top-phone__link">p</a>
</li>
<li class="top-phone__item">
<a href="" class="top-phone__link"></a>
</li>
<li class="top-phone__item">
<a href="" class="top-phone__link"></a>
</li>
</ul>
</div>
</div>
</div>
</div>
<header class="header page__header">
<div class="navigation header__navigation">
<nav class="navigation__container">
<ul class="navigation__list">
<li class="navigation__item">
<a href="" class="navigation__links"></a>
</li>
<li class="navigation__item">
<a href="" class="navigation__links"></a>
</li>
<li class="navigation__item">
<a href="" class="navigation__links"></a>
</li>
</ul>
</nav>
</div>
</header>
<footer class="footer page__footer">
<div class="copyrights footer__copyrights"></div>
</footer>
</div>
</body>
Приветствую, начинаю изучать БЭМ столкнулся с такой проблемой, как правильно именовать элементы при большой вложенности? Пример:
<div class="profile">
<div class="profile__slider">
<div class="profile__slider-slide">
<div class="btn profile__slider-slide-btn"></div>
<div class="message profile__slider-slide-message" ></div>
</div>
<div class="profile__slider-slide profile__slider-slide_something">
<div class="btn profile__slider-slide-btn"></div>
<div class="message profile__slider-slide-message" >
<div class="profile__slider-slide-message-bold"></div>
</div>
</div>
</div>
</div>
Можно использовать данное именование: profileslider-slide-message, которое говорит что это элемент "message" является потомком элемента "slide", который является потомком элемента "slider", который является элементом блока "profile". В данном случае profileslider-slide-message также является элементом блока "profile", хотя это не совсем логично, но обеспечиваться локализация данного элемента, в том плане что он будет уникальным.
В верстке я часто использую псевдоклассы :first-child, :last-child, :nth-child и тд. Они позволяют избежать ошибок при изменении верстки.
Допустимо ли повсеместное использование таких псевдоклассов в БЭМ? Или стоит использовать их только в крайней необходимости, в остальных случая заменяя модификаторами?
Например, есть такая разметка:
<div class="page">
<ul class="list">
<li class="list__item"></li>
<li class="list__item"></li>
<li class="list__item"></li>
</ul>
</div>
Блок .list реиспользуемый, но мне нужно чтобы внутри блока .page отступы между элементами .list__item отличались от стандартных для элемента.
Сейчас я поступаю так: миксую блок .list к .page и каскадом изменяю свойства необходимых элементов.
<div class="page">
<ul class="page__list list">
<li class="list__item"></li>
<li class="list__item"></li>
<li class="list__item"></li>
</ul>
</div>
Вот:
.list{
&__item{
margin-bottom: 16px;
}
}
.page{
&__list{
.list{
&__item{
margin-bottom: 32px;
}
}
}
}
Можно ли так делать? И как стоит поступать в таких случаях?
Здравствуйте.
Как применять методологию bem с bootstrap-scss при верстке макета ? Меня интересует способы применения какие они есть и какие задачи решает каждый из этих способов.
Можно ли перезаписывать стили дочерних элементов через каскад от модификатора?
Например вот так:
.block {
&__content {
background-color: red;
}
&__text {
display: block;
}
&_active {
.block__content {
background-color: blue;
}
.block__text {
display: flex;
}
}
}
~~~
Как правильно размечать структурно сложные, но одноразовые элементы: бем-блоком или бем-элементом родителя?