O jeito nunca está errado, mas há um jeito melhor?

Oi gente, tudo bem por aí? Eu estava resolvendo o exercício proposto e acabei fazendo de uma forma completamente diferente da proposta. Na verdade, eu não tive a ideia de criar uma sombra com a mesma cor do fundo, então acabei criando 3 divs e uma sombra para cada uma. Isso é incorreto ou é considerado pior do que o jeito proposto? Pergunto isso porque estou preocupado com o meu aprendizado e não quero aprender fazendo de um jeito pior.

Segue meu código: HTML:

<div class="box">
</div>

<div class="center">
</div>

<div class="outside">
</div>

CSS:

body {
  background-color: #20b2aa;
}

.box {
  position: absolute;
  top: 50px;
  left: 100px;
  width: 350px;
  height: 200px;
  background-color: white;
  box-shadow: 0 0 0 3px black;

}

.center {
  position: absolute;
  top: 44px;
  left: 94px;
  width: 350px;
  height: 200px;
  padding: 6px;
  box-shadow: 0 0 0 3px black;
}

.outside {
  position: absolute;
  top: 38px;
  left: 88px;
  width: 350px;
  height: 200px;
  padding: 12px;
  box-shadow: 0 0 0 3px black;
}

O resultado vocês podem ver diretamente no JSFiddle: https://jsfiddle.net/victorgsfigueiredo/4gLc5ywx/23/