css - 如何重构媒体查询中的常见CSS规则？

Question

我正在定义几个媒体查询，并且有一些重复的代码:

@media only screen and (max-width:768px) {
  .list__figure {
    margin-right: 20px;
    width: 80px;
  }
  .list__content {
    width: calc(100% - 100px);
  }
  .ico-bim--over-img {
    left: 5px;
    right: inherit;
    top: 5px;
  }
  .ico-lnb-valid--over-img {
    left: 78px;
    top: 5px;
  }
}
@media only screen and (min-width:769px) and (max-width:1040px) {
  .list__figure {
    margin-right: 20px;
    width: 80px;
  }
  .list__content {
    width: calc(100% - 100px);
  }
  .ico-bim--over-img {
    left: 5px;
    right: inherit;
    top: 5px;
  }
  .ico-lnb-valid--over-img {
    left: calc(100% - 47px);
    top: 5px;
  }
}

那里，唯一改变的规则是 ico-lnb-valid--over-img 中的 left。

很可能我必须为不同的媒体查询添加一些其他规则，但从并使用一些已经定义的代码开始。

我该如何重构它？

Answer 1

@user8424881 是正确的——只有那些与一个媒体查询不同的东西才需要包含在媒体查询中。

代码可以是这样的:

/* No media queries needed */

.list__figure {
  margin-right: 20px;
  width: 80px;
}
.list__content {
  width: calc(100% - 100px);
}
.ico-bim--over-img {
  left: 5px;
  right: inherit;
  top: 5px;
}
.ico-lnb-valid--over-img {
  top: 5px;
}

/* Media queries below */

@media only screen and (max-width:768px) {
   .ico-lnb-valid--over-img {
    left: 78px;
  }
}
@media only screen and (min-width:769px) and (max-width:1040px) {
  .ico-lnb-valid--over-img {
    left: calc(100% - 47px);
  }
}