媒体查询的 CSS 类命名约定答案

【问题标题】：CSS class naming convention for media queries媒体查询的 CSS 类命名约定
【发布时间】：2020-11-10 23:24:14
【问题描述】：

以下示例的最佳类名约定是什么。

如果我有不同元素具有相同网格布局。

<div class="item__1 -has-multipleColumns-XL">Text</div>
<div class="item__2 -has-multipleColumns-XL">Text</div>

在较小的屏幕尺寸上，您希望将其缩小为两列或一列，您是否会更改当前类或为较小的媒体查询设置单独的覆盖类名，例如：

<div class="item__1 -has-threeColumns-XL -has-twoColumns-M -has-singleColumns-S">Text</div>
<div class="item__2 -has-threeColumns-XL -has-twoColumns-M -has-singleColumns-S">Text</div>

要么：

//XL screens
.-has-threeColumns-XL {
  grid-template-columns: 1fr 1fr 1fr;
}

//Medium screens
@media (max-width: 50rem) {
  .-has-twoColumns-M {
    grid-template-columns: 1fr 1fr;
  }
}

// Small screens
@media (max-width: 30rem) {
  .-has-singleColumns-S {
    grid-template-columns: 1fr;
  }
}

或：

// XL screens
.item__1,
.item__2 {
  grid-template-columns: 1fr 1fr 1fr;
}

// Medium screens
@media (max-width: 50rem) {
  .item__1,
  .item__2 {
    grid-template-columns: 1fr 1fr;
  }
}

// Small screens
@media (max-width: 50rem) {
  .item__1,
  .item__2 {
    grid-template-columns: 1fr;
  }
}

我希望我的意思很清楚？？？？

（BEM和camelcase的组合来自ATOM。）

谢谢！

【问题讨论】：

由于您正在为相同的元素设置样式，我将省略 xl、m 和 s 命名约定，并使用更短、更简洁的东西，例如 has-columns。

标签： css media-queries naming-conventions classname bem

【解决方案1】：

如果不同 div 元素中的文本具有共同的语义属性，则为类使用该名称。否则，只需调用类 grid 并使用媒体查询为不同的屏幕尺寸设置样式。

【讨论】：