Разделение структуры и кожи с помощью ITCSS, BEM и OOCSS

Question

Я создаю таблицу стилей, вдохновленную ITCSS, BEM и OOCSS, и не знаю, как отделить свойства структуры от свойств косметики.

Пример как я понимаю ITCSS и OOCSS:

//First the structure. Button is an object (ITCSS)
.o-btn {
    height: ...;
    width: ...;
}

//Then declare the cosmetics in components
.c-btn-login {
    background: ...;
    color: ...;
    ...
}

То, что у меня есть проблемы, связано с ITCSS. Два разных префикса (две категории) для одного и того же элемента, когда у меня мог быть один и тот же префикс для одного и того же элемента и, возможно, было бы более понятно для понимания.

Правильный ли этот подход?

Answer 1

В моем мнении я думаю, что c-btn-login неправильный... в этом случае компонент - форма.

 <form class="o-form c-form-login t-form-dark" >
    <input type="text" class="o-input">
    <input type="password" class="o-input" >
    <input type="submit" value="Login" class="o-btn">
  </form>

с помощью этой структуры вы можете применять косметические стили с классом t-form-dark ко всем дочерним компонентам или использовать определенный класс для дочерних элементов, например t-btn-dark

.t-form-dark {
    .o-input{}
    .o-btn{}
}