Separating structure and skin with ITCSS, BEM, and OOCSS

Question

I am creating a stylesheet inspired by ITCSS, BEM, and OOCSS and am unsure how to separate structure properties from cosmetics properties.

An example as I understand ITCSS and OOCSS:

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

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

What I have problems to see are more related with ITCSS. Two different prefixes (two categories) for the same element, when I could have the same prefix for the same element, and probably be more clear to understand.

Is this approach correct?

Answer 1

In my opinion I think the c-btn-login way is wrong. In this case the component is the form.

<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>

With this structure you can apply cosmetic styles with the t-form-dark class for all component children or use a specific class for a child like t-btn-dark.

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