Size: a a a

2020 August 19

К

Костя Сафонов... in БЭМ
yarastqt World
Иначе компоненты начинают зависеть от контекста где они будут использоваться
Ну так этот самый контекст ведь не подразумевает, что я возьму какой-то блок из проекта А и перенесу его на проект Б, а если такой сценарий и возможен, то частота его использования крайне мала.

А каждый раз обнулять стили это гемор.
источник

EG

Eugene Gromov in БЭМ
аналогично и использование каскада вида * {padding: 0; margin: 0}. То есть подобные действия нужно прописывать в каждом компоненте, правильно?
источник

VH

Vitaly Harisov in БЭМ
Eugene Gromov
аналогично и использование каскада вида * {padding: 0; margin: 0}. То есть подобные действия нужно прописывать в каждом компоненте, правильно?
Зачем их прописывать? Есть margin/padding (например, используете ul/li) — сбрасываете. Нет — не сбрасываете
источник

EG

Eugene Gromov in БЭМ
У разных браузеров разные отступы по дефолту, поэтому я так думал
источник

Р

Роман in БЭМ
Eugene Gromov
У разных браузеров разные отступы по дефолту, поэтому я так думал
У дизайнеров — тоже. Ты всё равно пропишешь свои отступы, размеры и цвета каждому элементу даже после «сброса».
источник

EG

Eugene Gromov in БЭМ
То есть использовать обнуление и нормализацию не нужно. Нужно каждый элемент прописывать по бест практис, так?
источник

Р

Роман in БЭМ
Eugene Gromov
То есть использовать обнуление и нормализацию не нужно. Нужно каждый элемент прописывать по бест практис, так?
Да. Компонентный подход подразумевает, что компонент (блок) несёт в себе всю информацию о себе с минимальным количеством зависимостей (в виде normalize/reset.css)
источник

EG

Eugene Gromov in БЭМ
Спасибо. В этом я и хотел убедиться
источник

EG

Eugene Gromov in БЭМ
Прошу совета как правильно разметить раздел авторизации в Хэдере. Будет ли такая реализация правильной?
источник

EG

Eugene Gromov in БЭМ
<div class="navbar__auth-box">
 <a href="#" class="auth link">
   Login
 </a>
 <a href="#" class="auth link">
   Register
 </a>
</div>
источник

MM

Mihail Mihail in БЭМ
такое себе
источник

MM

Mihail Mihail in БЭМ
.navbar__auth-box.auth > .link.auth__link * 2
я бы так разметил
источник

EG

Eugene Gromov in БЭМ
спасибо
источник

MM

Mihail Mihail in БЭМ
но на самом деле набор блоков все сильно зависит от проекта, его структуры, сложности. теоретически возможно как супермикроскопическое деление на блоки, так и просто разметка, где всего один блок.
источник

EG

Eugene Gromov in БЭМ
Mihail Mihail
но на самом деле набор блоков все сильно зависит от проекта, его структуры, сложности. теоретически возможно как супермикроскопическое деление на блоки, так и просто разметка, где всего один блок.
Михаил, можете объяснить применение миксов конкретно на этом примере?
источник

MM

Mihail Mihail in БЭМ
в этом примере на микс можно навесить внешнюю геометрию: флоат, позиционирование, маргины. возможно каскад в случае переопределения стилей блока.
источник

EG

Eugene Gromov in БЭМ
Я задал стили для auth, а для auth-box нет. Просто не знаю как их разделить. .auth {
 display: flex;
 align-items: center;
 justify-content: center;

 &-link {
   padding: 12px 30px;
   background: $color-primary;
   color: $color-secondary;
   border: 0;
   border-radius: 5px;
   outline: none;
   cursor: pointer;
   margin-left: 10px;
 }
}
источник

MM

Mihail Mihail in БЭМ
тут линк — это элемент, поэтому тут вместо дефиса надо два андерскора. В коде все стили не касаются внутренней геометрии, в nav-bar__auth-box из этого кода выносить ничего не нужно
источник

MM

Mihail Mihail in БЭМ
если никакой внешней геометрии нет, можно вообще убрать миксовый класс, но я обычно всегда его использую, т.к. 1) код будет дополняться со временем и это пригодится 2) БЭМ это еще и документирование иерархии, и даже пустые классы полезны для понимания структуры верстки
источник

EG

Eugene Gromov in БЭМ
"в nav-bar__auth-box из этого кода выносить ничего не нужно" не понял, что Вы имеете ввиду. nav-bar__auth-box у меня не содержит стилей, это правильно?
источник