CSS组件和响应式耦合-最佳做法？

点燃01

假设我创建了一个像表格一样的组件，希望在不同页面之间重复使用。表中的内容和列数在页面之间会有所不同，但是外观应相同。

.my-table {
    background-color: ... etc
    color: ... etc
}

使该组件具有响应性时-每个页面都应该拥有自己的媒体查询集来改变该组件的外观，还是该组件本身应该定义查询？

就是在移动设备上查看时，我可能想隐藏此表的第3列和第5列，但是在另一页上可能只有3列，并且我不希望在该页面上隐藏第3列。在这种情况下可以使用的更好的做法是什么？应该将响应逻辑与组件样式分离吗？

另一个例子-我阅读过的大多数CSS指南都建议这样做：

.layout-columns-2 {
     float: left;
     width: 50%;
}

.layout-columns-4 {
     float: left;
     width: 25%;
}

每当需要列并排浮动时，都可以在布局上重用。但是，当您尝试应用响应式规则时，同样会遇到类似的问题。

例如，在一页上，您要在宽度为600px时中断特定div的浮动，以便垂直堆叠列。但是，在页面的另一部分，您希望浮点数在800px处中断。最好的方法是什么？

姆菲尔

我建议使用一些表mixins创建一个Sass部分，可以根据需要应用它。这将使您将表“模块”与实际表分离。解耦通常是一件好事，因为它使您可以更轻松，更一致地添加和更改样式。

由于您希望断点在表之间变化，因此默认情况下，我会将表样式保留为“移动优先”，并根据需要逐一自定义它们。

_tables.scss：

table {
  // Global, mobile-first styles go here
}

@mixin columns-2() {
  td {
    float: left;
    width: 50%;
  }
}

@mixin columns-4() {
  td {
    float: left;
    width: 25%;
  }
}

// Function to return a max breakpoint (1px less)
@function max-break($size) {
  @return $size - .0625em;
}

使用您的partial，您可以将mixin应用于任何特定的表...

special-page.scss：

@import 'tables';

.my-table {
  // Hide columns 2/4 below 800px
  @media (max-width: max-break(50em)) {
    td:nth-child(2),
    td:nth-child(4) {
      display: none;
    }
  }

  // Use 2 columns at 600px
  @media (min-width: 37.5em) {
    @include columns-2();
  }

  // Use 4 columns at 600px    
  @media (min-width: 50em) {
    @include columns-4();
  }
}

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。