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