如何使用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中的组件样式不会覆盖forms.scss中的元素样式。

我正在考虑的当前重构是将forms.scss更改为一个对象：

form_object.scss重构：

.o-form__text, .o-form__password {
  // sexy object styles that will be overwritten by the lower component
}

我想知道这是否是一个适当的会议，还是有更好的解决办法？

Answer 1

主要问题是您在forms.scss中声明了一个非常特定的样式(forms.scss)，在专用图中非常高。

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

​

​

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

​

​

我相信在完美的情况下，您应该在泛型、Base和组件层中应用您的逻辑。

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

1. 泛型层中的表单样式:此处移动任何与表单/输入相关的重置样式。只使用全局重置(如normalize.css或reset.css)。这些都是零地面风格。您可以使用特定的选择器(如input[type="text"] )，但只用于重置样式，而不是添加主题或其他相关内容。
2. 基本层中的表单样式:未分类的表单元素出现在这里。在这里应用通用的form或input样式，这些样式在所有元素之间共享。不要使用选择器(如input[type="text"] )来设置您希望在另一个元素上更改的样式。只在这里放置常见的样式。
3. 表单样式在组件层中:这里是您的UI样式应该放置的位置。考虑在这里移动您正在讨论的// sexy element styles，将它们分配给一个类，比如.form-control。在这个类下面，添加其他更具体的类/ UI修饰符。

最后，请注意，决定取决于您的具体用例。没有任何严格的惯例可以解决你的问题。你需要根据你所有的项目信息做出决定。不同的方法在不同的样式表设置中是有意义的。

无论如何，如果其他任何事情都失败了，您总是可以到达王牌层:-)