Good practice with css class and id

Question

I'm wondering about clean code practices with css. Assuming I've got something like that:

#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;
}

I would like to have 6 of those but with different sizes and margines. What is the best way to make it without reapeting the same code for each element?

Answer 1

You can create a class with properties that does not change

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

and for all the island, specify an other class or id with the sizes and margins

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

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