Question

对于一个网站，我目前正试图使我拥有多个具有不同结构的页面。我目前所有的HTML元素都在这样定义的包装器中：

IF

我用于一页的相应CSS如下

<div class="wrapper">

但是对于另一个也具有相同包装内容的页面，我想使用不同的网格布局。为了解决这个问题，我想为每个网站创建一个不同的包装器类，例如

    .wrapper{
    display: grid;
    grid-template-columns: 5% 45% 45% 5%;
    grid-template-rows: 5% auto 5%;
    width: 100;
    margin: auto auto;
}

，然后相应地更改css。

我对包装器的使用不是很经验，我想知道这是否是不好的做法，或者是否有更好的方法来解决这个问题。

Answer 1

TBH，我认为没那么重要。但是，关于寻求最佳实践，我感到很高兴。

我会使用不同的类.wrapper作为通用属性，如果某个页面需要一些不同的类，.wrapper-home然后扩展（甚至在必要时覆盖）.wrapper的属性。

然后您可以使用<div class="wrapper wrapper-home"></div>。

Answer 2

您可以使用子类

.wrapper {
  display: grid;
  width: 100;
  margin: auto auto;
}

.wrapper.subClassName {
  grid-template-columns: 8% 20% 20% 8%;
  grid-template-rows: 5% auto 5%;
}

.wrapper.anotherSubClassName {
  /*
  Different Layout
  */
}

<div class='wrapper'></div>
<div class="wrapper subClassName"></div>
<div class="wrapper anotherSubClassName"></div>
<!-- ANd SO ON -->

不好的做法HTML / CSS包装器

2 个答案: