I have four css classes that seperated based on their functionality, .openModalStyle and .closeModalStyle contain appearing/disappearing styles, .openModalTransition and .closeModalTransition contain transition property for that styles.
I want to know if the order of tokens matter for classList methods or not, because transition should be attached before styles.
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, it doesn't matter in the classList as you just adding a class to the element,
Also, the order at CSS in most cases doesn't matter, only in some cases it matters, It comes up any time multiple CSS selectors match an element with the exact same specificity.