我正在创建受 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相关的。同一个元素的两个不同的前缀(两个类别),当我可以为同一个元素使用相同的前缀时,并且可能更容易理解。
这种方法是否正确?
最佳答案
在我看来,我认为 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{}
}
关于css - 使用 ITCSS、BEM 和 OOCSS 分离结构和皮肤,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32847318/