如何处理 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操作或设置一些初始状态(隐藏，关闭，展开，动画，挂起等(

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

快速命名 - nav-header可能太特别，您可以尝试用更抽象的东西替换它，例如 nav-horizontal ， nav-inline . 您可以组合子类以达到所需的结果，并保持在其他上下文中重用子类的能力

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