Solução via display e Sugestão

Sei que o propósito do data-attribute seria separar das classes css a manipulação do DOM.

Mas, sinceramente, solucionar via display foi de longe a solução menos verbosa:

const lista = document.querySelector("ul");

function escondeTintas() {
    lista.style.display = "none";
}

function mostraTintas() {
    lista.style.display = "block";
}

Sugiro uma refatoração da solução apresentada lá no exercício - que, aparentemente, está com código faltando.

Vi diversas soluções criativas da galera por aqui.

Só que gostaria muito que o pessoal da Alura pudesse nos mostrar um exemplo mais condizente com o que foi mostrado nessa aula específica.

Ou até uma solução de acordo com melhores práticas.

Faço essas sugestões porque eu particularmente fiquei muito confuso a partir da aula 4 deste curso.

Abraços!