因此，假设我有一个HTML元素，并且可以应用“调色板”类。调色板包含多种颜色设置，例如颜色，背景颜色，边框颜色等。调色板预设的一种。假设有10个这样的调色板，所以有10个类。将其应用于元素没有问题，只需将类名放在元素上即可。
但是我想发生的是，在每个响应断点处激活了一个不同的调色板。所以例如在移动设备上，元素可以使用palette4，在桌面上，元素可以使用palette7等。最多可以响应5个尺寸范围。
问题是，现在这似乎需要我将所有调色板类重复5次以上，并带有唯一的后缀。然后，我必须放置诸如palette4_mobile，palette7_desktop之类的元素，以便仅在与特定媒体查询结合使用时才激活给定的调色板。
所以基本上，我最终得到了50个调色板类，而不是10个。这确实有用，但它肿了。由于主要的重复，css确实可以很好地压缩 ，但是它的大小是未压缩大小的5倍。当然，重复项被封装在每个媒体查询中，因此可能会将其隔离在性能上。
是否有一种方法可以使同一件事发生而不必重复调色板类5次？我不想使用任何JavaScript。我也不想使用“！important”。我确实考虑过，例如，如果元素具有class =“ palette4_mobile，palette5_tablet，palette6_smalldesk”之类的类，则以后的类将覆盖以前的类。但是我看不到一种方法，无需在特定媒体查询中禁用以后的类，而不必显式地将所有值设置为某种值。这将导致冗长的代码。
要处理这种10个调色板的情况的重复性更低的方法，可以在特定的媒体查询中单独选择？