[Projeto] Resolução

Consegui obter o resultado que eu imaginava apenas setando e removendo atributos. Gostaria de saber se foi uma boa forma de se resolver este problema.

 <!--Primeiro no arquivo HTML eu criei dois botoes e adicionei o data attribute "esconder" no botao de ocultar para que ele ja comece "invisivel"-->
  <button id="mostrar">Mostrar</button>
  <button id="ocultar" data-element="esconder">Ocultar</button>

/*
  Depois no arquivo CSS eu defini os estilos dos elementos que vao receber os datas attributes pra fazer essa alternancia entre aparecer e sumir
  */
  [data-element="mostrar"]{
    display: block;
  }

  [data-element="esconder"]{
    display: none
  }

// E, por ultimo no JS eu referenciei a lista e os botoes, e programei o evento de clique para fazer com que a lista e os botoes aparecam e vice-versa
const lista = document.querySelector("ul");
const botaoMostrar = document.querySelector("#mostrar")
const botaoOcultar = document.querySelector("#ocultar")

botaoMostrar.addEventListener('click', () =>{
    lista.setAttribute("data-element", "mostrar")
    botaoMostrar.setAttribute("data-element", "esconder")
    botaoOcultar.setAttribute("data-element", "mostrar")
})

botaoOcultar.addEventListener('click', () => {
    lista.removeAttribute("data-element", "mostrar")
    botaoOcultar.setAttribute("data-element", "esconder")
    botaoMostrar.removeAttribute("data-element", "esconder")
})