媒体查询的 CSS 类命名约定

Posted 2023-03-16

【中文标题】媒体查询的 CSS 类命名约定

【英文标题】：CSS class naming convention for media queries

【发布时间】：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。

【参考方案1】：

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