如何使用 Stylelint 防止在媒体查询中使用“最大宽度”答案

【问题标题】：How to use Stylelint to prevent use of "max-width" in media queries如何使用 Stylelint 防止在媒体查询中使用“最大宽度”
【发布时间】：2016-07-25 15:57:35
【问题描述】：

我想在媒体查询中使用 max-width 时发出警告/错误，并鼓励使用 min-width 的移动优先方法。

我可以警告/错误...

@media (max-width: 50em) {
  padding: 1rem;
}

但允许...

@media (min-width: 50em) {
  padding: 1rem;
}

【问题讨论】：

我想不出任何允许这样做的方法，所以我刚刚提出了两个允许这样做的新规则，media-feature-blacklist 和media-feature-whitelist，请参阅github.com/stylelint/stylelint/issues/1722。如果/一旦接受，可以使用新规则发布答案。

标签： stylelint

【解决方案1】：

media-feature-name-disallowed-list 和 media-feature-name-allowed-list 规则现在可以在最新的 stylelint 中使用：

"media-feature-name-disallowed-list": [
  "^max-width",
    {
      "message": "Use min-width for a mobile-first approach (media-feature-name-disallowed-list)",
    },
  ],
},

【讨论】：

非常感谢@netweb！非常感谢你们为 Stylelint 所做的工作。

【解决方案2】：

您现在应该使用media-feature-name-disallowed-list (https://stylelint.io/user-guide/rules/media-feature-name-disallowed-list)

【讨论】：

【解决方案3】：

在选择器中使用最大宽度时出现错误“media-feature-name-no-unknown”。

允许在我的 .stylelintrc.json 中使用：

    "media-feature-name-no-unknown": [
      {
        "ignoreMediaFeatureNames": [
          "max-width"
        ]
      }
    ]

有效用法示例（样式化组件）：


const StyledSectionDrawer = styled.div`
  @media screen and (max-width: ${(props) => props.breakpoint}px) {
    margin-top: ${standardNavHeight}px;
  }
  @media screen and (min-width: ${(props) => props.breakpoint}px) {
    margin-top: ${(props) => (props.scrolled ? standardNavHeight : props.navHeight)}px;
  }
`;

通过https://stylelint.io/user-guide/rules/list/media-feature-name-no-unknown/

【讨论】：