Tengo cuatro clases CSS que se separaron según su funcionalidad, .openModalStyle y .closeModalStyle contienen estilos que aparecen/desaparecen, .openModalTransition y .closeModalTransition contienen propiedades de transición para esos estilos.
Quiero saber si el orden de los tokens es importante para los métodos classList o no, porque la transición debe adjuntarse antes que los estilos.
let modal = document.querySelector("modal"); // style before transition modal.classList.add("openModalStyle"); modal.classList.add("openModalTransition"); // transition before style modal.classList.add("openModalTransition"); modal.classList.add("openModalStyle"); // want to make sure both work properly in all browsers .modal{ width: 200px; height: 200px; background-color: #f00; } /* change opacity */ .openModalStyle{ opacity: 1; } .closeModalStyle{ opacity: 0; } /* apply transitions */ /* they are repeated styles, but i need to keep them seperated for some reason */ .openModalTransition{ transition: opacity 2s; } .closeModalTransition{ transition: opacity 2s; } <div class="modal"></div>No, no importa en classList ya que solo agrega una clase al elemento,
Además, el orden en CSS en la mayoría de los casos no importa, solo en algunos casos importa. Aparece cada vez que varios selectores de CSS coinciden con un elemento con exactamente la misma especificidad .