Size: a a a

2019 May 10

AP

Artyom Philippov in БЭМ
А что в таком случае: (см. pageC)
```
<div class="page-a">
 <div class="component-a component-a_special"></div>
</div>

<div class="page-b">
 <div class="component-a"></div>
</div>

<div class="page-c">
 <button class="button">
      <div class="component-a component-a__???"></div>
 </button>
</div>

```
источник

Р

Роман in БЭМ
1) у модификаторов  одно подчёркивание
2) а что там за модификация?
источник

AP

Artyom Philippov in БЭМ
Т.е. в кнопке (в любой) стили для ComponentA будут тоже менятся.

.button {
    .component-a {
         font-weight: 700;
         ...
         .component-a__title {
               color: orange;
        }
    }
}
источник

AP

Artyom Philippov in БЭМ
Вот сейчас примерно так все выглядит
источник

AP

Artyom Philippov in БЭМ
Хочу перевести на бэм
источник

Р

Роман in БЭМ
если модификации группируются, что лучше использовать именование вида «ключ-значение»:

.component-a {
 font-weight: 500;
}

.component-a_emphasis_light {
 font-weight: 600;
}

.component-a_emphasis_strong {
 font-weight: 700;
 font-size: 1.2;
}

.component-a_emphasis_super-strong {
 font-weight: 900;
 font-size: 1.5;
 color: red;
}
источник

AP

Artyom Philippov in БЭМ
В другом месте например будет так:

.page-a {
    .button {
          ...
          .component-a {
               ...
               .component-a__title {
                     ...
               }
          }
   }
}
источник

AP

Artyom Philippov in БЭМ
Artyom Philippov
В другом месте например будет так:

.page-a {
    .button {
          ...
          .component-a {
               ...
               .component-a__title {
                     ...
               }
          }
   }
}
Не будет. Оно уже и так есть, просто столкнусь с этим чуть позже.
источник

AP

Artyom Philippov in БЭМ
Там просто модификаторов не хватит =) Но я так понял другого пути нет, нужно все через модификаторы?
источник

AA

Anton Antonov in БЭМ
Artyom Philippov
В другом месте например будет так:

.page-a {
    .button {
          ...
          .component-a {
               ...
               .component-a__title {
                     ...
               }
          }
   }
}
В общем случае наследование это очень плохо, модификаторы гораздо лучше
источник

Р

Роман in БЭМ
Зависит от задач. Не стоит заводить модификатор под каждое CSS-свойство. Модификатор позволяет выразить состояние сущности (блока или элемента) через название (какие там будут CSS-значения — не столь важно). Если вы смогли придумать компонент, у которого много состояний, вы так и так будете хранить где-то его возможные модификации (или бинарно, или переменными или ещё как-то),просто модификторы позволяют это выразить разово и избежать дублирования и каскада, уменьшая связанность.
источник

Р

Роман in БЭМ
То есть так лучше не делать:

.button_color_red {}
.button_color_orange {}
.button_font_14 {}
.button_font_18 {}
источник

Р

Роман in БЭМ
А вот так вполне хорошо:

.button {
 background: #eee;
 color: #969;
 padding: 1em;
}

.button_state_success {
 background: green;
 color: white;
}

.button_state_error {
 background: red;
 color: black;
}

.button_size_m {
 font-size: 14px;
 padding-left: 1.2em;
 padding-right: 1.2em;
}

.button_size_l {
 font-size: 16px;
 padding: 1.3em 1.1em;
}
источник

AP

Artyom Philippov in БЭМ
Что если кнопка не оторажает состяние, а дизайнер меняет только шрифт и цвет? Могу ли я в таком случае все сделать так:
.component-a_red {color: red}
.component-a_blue {color: blue}
.component-a_small {font-size: 14px}
.component-a_big {font-size: 20px}
источник

Р

Роман in БЭМ
Artyom Philippov
Что если кнопка не оторажает состяние, а дизайнер меняет только шрифт и цвет? Могу ли я в таком случае все сделать так:
.component-a_red {color: red}
.component-a_blue {color: blue}
.component-a_small {font-size: 14px}
.component-a_big {font-size: 20px}
Да, если нет логической связи между внешним видом и состоянием, то это единственный вариант, наверное.
источник

Р

Роман in БЭМ
Artyom Philippov
Что если кнопка не оторажает состяние, а дизайнер меняет только шрифт и цвет? Могу ли я в таком случае все сделать так:
.component-a_red {color: red}
.component-a_blue {color: blue}
.component-a_small {font-size: 14px}
.component-a_big {font-size: 20px}
Но у вашего варианта есть существенный минус: он допускаем, что может быть такой компонент:
<div class="component-a_red component-a_blue component-a_small component-a_big"></div>


А это абсурдно.
источник

AA

Anton Antonov in БЭМ
Artyom Philippov
Что если кнопка не оторажает состяние, а дизайнер меняет только шрифт и цвет? Могу ли я в таком случае все сделать так:
.component-a_red {color: red}
.component-a_blue {color: blue}
.component-a_small {font-size: 14px}
.component-a_big {font-size: 20px}
Проблема этого подхода может быть в том, что если red поменяется на yellow, то название класса приедтся менять по всему хтмл
источник

AP

Artyom Philippov in БЭМ
Ну да эти проблемы в приципе очевидны, но как по-другому сделать я просто не представляю
источник

Р

Роман in БЭМ
Artyom Philippov
Ну да эти проблемы в приципе очевидны, но как по-другому сделать я просто не представляю
мой пример решится, если вы сгруппируете свойства, например:

component-a_size_* component-a_color_*
источник

AP

Artyom Philippov in БЭМ
Вот как пример чуть выше привел, 3 страницы, каждой странице размер шрифта может разный, как и цвет
источник