时间戳

首页 > 解决方案 > 媒体查询的 CSS 类命名约定

css - 媒体查询的 CSS 类命名约定

问题描述

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

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

<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。）

谢谢！

标签： cssmedia-queriesnaming-conventionsclassnamebem

解决方案

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

推荐阅读