css - 如何使用 ITCSS 和表单管理特殊性问题？

Question

我有一个大型项目，通过 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
}

我想知道这是否是一个适当的约定，还是有更好的解决方案？

score 0 · Accepted Answer

主要问题是由于您在特异性图input[type="text"]中以非常高的方式声明了一个非常具体的样式 ( ) 。forms.scss

在 ITCSS 中，我们从最通用的样式开始，以最明确的样式结束。

此外，让我们看看倒金字塔层：

我相信在完美的案例场景中，您应该在Generic、Base和Components层中应用您的逻辑。

因此，基于所有这些，只有您共享的有限信息 - 我建议您以这种方式重构它：

通用层中的表单样式：在此处移动任何与表单/输入相关的重置样式。仅使用全局重置（如normalize.css或reset.css）。这些是零地风格。您可以使用特定的选择器，例如input[type="text"]，但只能重置样式，不能添加主题或任何相关内容。
基础层中的表单样式：这里是未分类的表单元素。在此处应用通用form或input样式，它们在所有元素之间共享。不要使用选择器input[type="text"]来设置您想要在另一个元素上更改的样式。在这里只放置常见的样式。
组件层中的表单样式：这里应该放置您的 UI 样式。考虑将// sexy element styles您正在谈论的内容移到此处，将它们分配给一个班级，就像.form-control我们说的那样。在此类下方，添加其他更具体的类/UI 修饰符。

总之，请注意，该决定取决于您的特定用例。没有硬性约定可以解决您的问题。您需要根据您拥有的所有项目信息做出决定。不同的方法在不同的样式表设置中是有意义的。

无论如何，如果其他任何事情都失败了，你总是可以到达特朗普层 :-)

1 回答 1