假设我创建了一个组件，例如我希望在不同的页面上重复使用的表格。表中的内容和列数因页面而异，但外观应相同。
.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 处中断。最好的方法是什么？
我建议创建一个带有一些表格混合的 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;
}
使用您的部分，您可以根据需要为任何特定表应用混合...
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();
}
}