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

Question

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

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

1. 创建子模块/修饰符
   • 我看到的问题是，这个子模块将只使用一次，并且随着项目的发展，这些子模块将开始构建。

​

1. 在布局类中嵌套模块类
   • 问题:通过在布局类中添加模块样式来提高专用性，稍微污染代码，反之亦然。

​

我在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

在我的实践中，使用子类作为修饰符的最佳方法。

其实，你的改变有多重要并不重要。任何修改都应适用于同一公约。

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

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

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

所以在你的例子中，子类是最好的选择。