Question

如果您的模块需要对每个实例进行微小更改，那么根据布局的哪个部分，您将如何使用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 */
  }
}

Answer 1

关于我练习使用子类作为修饰符的最佳方法。

实际上，改变的重要性并不重要。任何变更都应采用相同的惯例。

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

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

快速命名 - nav-header可能过于特殊，您可以尝试将其替换为更为抽象的内容，例如nav-horizontal，nav-inline。您可以组合子库以获得所需的结果，并保持在其他上下文中重用子类的能力

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

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

1 个答案: