使用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{}
}