css class 和 id 的良好做法

Question

我想知道 css 的简洁代码实践。假设我有类似的东西：

#island1 {
  position: relative;
  margin-top: 5vh;
  margin-left: 55vw;
  width: 20vw;
  height: 20vw;
  border-radius: 50%;
  background: #222222;
  box-shadow: -17px -17px 34px #171717,
    17px 17px 34px #2d2d2d;
}

我想要其中的 6 个，但尺寸和边距不同。在不为每个元素重复相同代码的情况下实现它的最佳方法是什么？

Answer 1

您可以创建一个 class 属性不会改变的

.islands {
  position: relative;
  border-radius: 50%;
  background: #222222;
  box-shadow: -17px -17px 34px #171717,
    17px 17px 34px #2d2d2d;
}

对于所有岛屿，指定另一个 class 或具有大小和边距的 ID

#island1{
  margin-top: 5vh;
  margin-left: 55vw;
  width: 20vw;
  height: 20vw;
}

#island2{
  margin-top: 1vh;
  margin-left: 1vw;
  width: 10vw;
  height: 10vw;
}

Answer 2

您可以使用 CSS 类:

.island {
  position: relative;
  margin-top: 5vh;
  margin-left: 55vw;
  width: 20vw;
  height: 20vw;
  border-radius: 50%;
  background: #222222;
  box-shadow: -17px -17px 34px #171717,
    17px 17px 34px #2d2d2d;
}

.island1 {
  width: 10vw;
  height: 10vw;
  margin-top: 5vh;
  margin-left: 15vh; 
}

.island2 {
  width: 30vw;
  height: 30vw;
  margin-top: 15vh;
  margin-left: 25vh; 
}

...

.island6 {
  width: 60vw;
  height: 60vw;
  margin-top: 35vh;
  margin-left: 45vh; 
}

HTML:

<div id="island1" class="island island1"></div>
<div id="island2" class="island island2"></div>
...
<div id="island6" class="island island6"></div>

css class 和 id 的良好做法

Good practice with css class and id

css

coding-style

code-cleanup