我有一个大型项目,通过 ITCSS 构建其 CSS 架构。总而言之,我喜欢它。但是,我在设置表单样式时遇到了一个问题。
我在元素层中设置了不同的表单元素:
在forms.scss中:
input[type="text"], input[type="password"] {
// sexy element styles
}
但是,如果我有一个需要不同样式的组件:
在foo_component.scss中:
.c-foo__text, .c-foo__password {
// sexy component styles
}
由于 forms.scss 中输入类型的选择性,我的组件样式foo_component.scss
不会覆盖 .scss 中的元素样式forms.scss
。
我正在考虑的当前重构正在更改forms.scss
为一个对象:
form_object.scss重构:
.o-form__text, .o-form__password {
// sexy object styles that will be overwritten by the lower component
}
我想知道这是否是一个适当的约定,还是有更好的解决方案?