时间戳

首页 > 解决方案 > CSS 组件和响应式耦合 - 最佳实践？

css - CSS 组件和响应式耦合 - 最佳实践？

问题描述

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

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

当使这个组件具有响应性时——每个页面是否应该有它自己的一组媒体查询来改变这个组件的外观，或者组件本身是否应该定义查询？

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

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

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

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

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

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

标签： csssassresponsive

解决方案

我建议使用一些 table mixin 创建一个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;
}

使用您的部分，您可以将您的 mixins 应用到任何特定的表...

特殊页面.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();
  }
}

推荐阅读