0

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

1 回答 1

0

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

实际上，你的改变有多重要并不重要。任何更改都应使用相同的约定。

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

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

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

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

于 2014-12-09T08:01:36.877 回答