[Reclamação] Discrepância nos códigos.

Eu fui escrevendo os meu código seguindo aula por aula, no final eu obtive o sequinte trecho no CSS:

.checkbox-customizado {
    width: 20px;
    height: 20px;
    background-color: var(--neutro);
    border: 1px solid var(--preto);
    cursor: pointer;
    border-radius: 10px;
    margin-right: 8px;
}

.checked {
    background-color: var(--preto);
    position: relative;
}

.checked::after {
    content: "";
    position: absolute;
    left: 30%;
    top: -10%;
    width: 5px;
    height: 14px;
    border-top: 2px solid var(--neutro);
    border-left: 2px solid var(--neutro);
    transform: rotate(-140deg);
}

Quando eu fui conferir a resposta do instrutor na parte de "faça como eu fiz", o código estava diferente da seguinte forma:

.customCheckbox {
    width: 20px;
    height: 20px;
    background-color: white;
    border: 1px solid black;
    cursor: pointer;
    display: inline-block;
    vertical-align: middle;
    border-radius: 4px;
}

.customCheckbox.checked {
    background-color: black;
    position: relative;
}

.customCheckbox.checked::after {
    content: "";
    position: absolute;
    left: 30%;
    top: -10%;
    width: 5px;
    height: 14px;
    border-top: 2px solid white;
    border-left: 2px solid white;
    transform: rotate(-140deg);
}

Para tirar a prova eu fui conferir como estava o projeto no github e lá eu encontrei uma terceira forma:

.checkbox-customizado {
    width: 20px;
    height: 20px;
    background-color: var(--neutro);
    border: 1px solid var(--preto);
    cursor: pointer;
    border-radius: 4px;
}

.checked {
    background-color: var(--preto);
    position: relative;
}

.checkbox-customizado.checked::after {
    content: "";
    position: absolute;
    left: 30%;
    top: -10%;
    width: 5px;
    height: 14px;

    border-top: 2px solid var(--neutro);
    border-left: 2px solid var(--neutro);

    transform: rotate(-140deg);
}

Para facilitar, as diferentas são nos nomes das classes CSS, mas aulas elas ficam

.checkbox-customizado .checked .checked::after

Na opinião do instrutor elas ficam

.customCheckbox .customCheckbox.checked .customCheckbox.checked::after

E no github pelo link https://github.com/alura-cursos/3801-javascript-pra-web/tree/aula-01 as classes ficam

.checkbox-customizado .checked .checkbox-customizado.checked::after

Eu já não sei se o meu projeto está certo, o elemento ao qual se referem essas classes deveria ter um comportamento que ainda não tem e eu não sei se ele já deveria ter ou se esse comportamento vai ser introduzido mais pra frente no curso, seria bom se houvesse uma constância no material de referência. Eu não gosto de ser o chato de vai reclamar mas está confuso assim.