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