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

【问题标题】：How do you handle layout specific changes to modules in SMACSS?您如何处理 SMACSS 中模块的布局特定更改？
【发布时间】：2015-02-06 18:36:37
【问题描述】：

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

正如我所见，我有两个选择，但似乎都不对。

创建子模块/修改器
- 我看到的问题是这个子模块只会被使用一次，并且随着项目的增长这些将开始构建。
在布局类中嵌套模块类
- 问题：增加的特异性，通过将模块样式与布局类一起放置会稍微弄脏代码，反之亦然。

我在 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 */
  }
}

【问题讨论】：

标签： css coding-style smacss

【解决方案1】：

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

实际上，您的更改有多重要并不重要。任何更改都应遵循相同的约定。

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

在使用模块上下文创建紧密耦合的依赖时，使用子代和后代也不是最好的方法。还有一个好技巧——你可以分配子类、嵌套类和后代用子类替换它——使用子类。

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

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

【讨论】：