首先按选择器或媒体查询对样式进行分组

Posted 2023-03-06

【中文标题】首先按选择器或媒体查询对样式进行分组

【英文标题】：Grouping styles by selector or media query first

【发布时间】：2021-12-05 18:46:08

【问题描述】：

假设我们有一个包含两个类的样式表，a 和 b，每个类的样式在某个断点处发生变化：

.a 
  //styles


.b 
  //styles


@media (max-width: 768px) 
    .a 
      //mobile styles
    
    .b 
      //mobile styles
    

这些是按断点分组的。是否曾经更喜欢按选择器对它们进行分组？即：

.a 
  //styles


@media (max-width: 768px) 
  .a 
    //styles
  


.b 
  //styles


@media (max-width: 768px) 
  .b 
    //styles
  

第二个看起来有点难看，但可以通过scss nested media queries 轻松纠正。我对前一种模式的担忧是，它可以鼓励开发人员编辑样式的一部分，而无需查看样式更改如何影响其他断点处的对应部分。但是，前者可能对解决仅在特定屏幕尺寸上出现的问题的开发人员更有用。

很想听听关于这种分组冲突的任何想法或思想流派 - 我一直在寻找有关 Smashing Magazine 或 CSS 技巧的任何资源，但没有提出任何建议。

【问题讨论】：

如果您使用的是 SCSS，将媒体查询嵌套在每个选择器中会更好且更易于管理。还建议使用移动优先方法，而不是最大宽度方法。这样代码更简洁。

@SeanStopnik 当然——我只是将“最大宽度”放入其中，因为这是我想到的第一个媒体查询。我倾向于同意这是更好的方法，但我不确定其好处来自简洁性——我认为每种模式通常会归结为相同数量的代码行。这是您日常使用的模式吗？您还看到其他好处吗？有什么缺点吗？

移动优先的方法仅将样式规则提供给您正在查看的屏幕尺寸，而不是将所有样式提供给每个屏幕，然后覆盖这些样式以适应所需的外观。这为用户创造了更快、更清洁的体验。

@SeanStopnik 我的错误 - 我同意你所说的关于移动优先的方法。我不小心用误导的方式措辞了我的句子“我倾向于同意这是更好的方法......”。我想问的是为什么您认为在每个选择器中嵌套媒体查询更易于管理。

通过嵌套媒体查询，它在故障排除或管理大型代码库时使其更具可读性和可定位性。从长远来看，更有条理。

【参考方案1】：

经过大量研究，我亲自得出了这个答案

在不同的断点处保留相同选择器的样式对开发人员体验有好处 - 它使 CSS 更易于维护，以便能够在同一位置查看选择器在每个断点处的行为。 在 vanilla CSS 中，执行此操作的模式可能有点丑陋和笨拙 - 如果没有缩小，还可能由于重复的媒体查询而导致一些性能问题。 规则：避免在 vanilla CSS 中对选择器及其媒体查询对应物进行分组 - 这可能比它的价值更麻烦。 如果您使用的是 SCSS，绝对将媒体查询嵌套在选择器中。它更干净，更易于维护。通过正确的编译，您可以避免重复的媒体查询，避免前面讨论的性能问题。 Learn more here

【讨论】：

如果有人要在此对话中添加内容，我们非常乐意将另一个答案标记为正确。