css - 您如何处理 SMACSS 中模块的布局特定更改？

Question

如果您有一个模块需要根据布局的哪一部分对每个实例进行微小更改，您如何使用 SMACSS 处理？

在我看来，我有两个选择，但似乎都不对。

1. 创建一个子模块/修改器
   • 我看到的问题是这个子模块只会被使用一次，并且随着元素的增长它们会开始构建。
2. 在布局类中嵌套模块类
   • 问题:增加了特异性，通过将模块样式与布局类放在一起或反之亦然，使代码有点脏。

我在 SMACSS 上找到的大部分信息都是基于过于简单化的情况，所以一旦你进入实际代码，它就没有那么有用了。

---

这是一个具体的例子:

我有一个模块 .nav 和一个用于水平布局导航的子类 .nav-hor。 .nav-hor 太小时需要切换到切换导航(单击按钮时滑动打开)。这是由媒体查询控制的。但这里的问题是正确的断点将取决于它的父容器的大小。因此媒体查询的断点很可能对于每个实例都是不同的。

.nav { /*...*/ }
.nav-hor { /*...*/ }
@media screen and (min-width: 30rem) { /* This dimension is variable according to the size of the parent container */
  .nav-hor {
    /* Convert to toggle nav */
  }
}

Answer 1

关于我使用子类作为修饰符的最佳实践。

其实你的改变有多重要并不重要。任何更改都应按照相同的约定应用。

使用 STATE 不是个好主意，因为这条规则是为反射模块的当前状态创建的，它非常接近于 JS 操作或设置一些初始状态(隐藏、关闭、展开、动画、挂起等)

使用 child 和 descendant 也不是您创建与模块上下文紧密耦合的 deps 的最佳方式。还有一个好技巧 - 你可以分配子类、嵌套和后代，用子类替换它 - 使用子类。

快速命名 - nav-header 可能太特殊了，你可以尝试用更抽象的东西替换它，比如 nav-horizo​​ntal, nav-内联。您可以组合子类来达到您需要的结果，并保持在其他上下文中重用子类的能力

所以在你的情况下子类是最好的意见