Conflicts with CSS classes

I have a CSS class given by a JS.

.show {
  opacity 1;
  filter: grayscale(0);
  filter: blur(0);
  scale: 1;
  transform: translateX(0);
  transform: translateY(0);
  transform: translateZ(0);
}

.show {
  opacity 1;
  filter: grayscale(0);
  filter: blur(0);
  scale: 1;
  transform: translateX(0);
  transform: translateY(0);
  transform: translateZ(0);
}

And then a bunch of utility classes, like (and many other examples):

.scale {
  scale: 0;
  transition: all 1s;
}

.hidden {
  opacity: 0;
  transition: all 3s;
}

.scale {
  scale: 0;
  transition: all 1s;
}

.hidden {
  opacity: 0;
  transition: all 3s;
}

Would it conflict if I keep .show like that? It's quite a lazy method to just have one class given, but maybe it won't conflict, or maybe there's a better way. Opinions, thoughts, knowledge?

3 Replies

Coder_Carl•2y ago

are you going to be adding html dependent on certain things? if so you could use those as additional selectors OR alternatively you can be more specific with your css and it's antonym i.e.

.show {
/** 
- re-declaring the filter css is going to result in overwriting
- make sure you just add them into the same filter property 
*/
  filter: grayscale(0) blur(0);
  transform: translate(0);
}

.scale {
  transition: all 1s;
}
.scale:not(.show) {
  transform: scale(0);
}

.hidden {
  transition: all 3s;
}
.hidden:not(.show){
  opacity: 0;
}

.show {
/** 
- re-declaring the filter css is going to result in overwriting
- make sure you just add them into the same filter property 
*/
  filter: grayscale(0) blur(0);
  transform: translate(0);
}

.scale {
  transition: all 1s;
}
.scale:not(.show) {
  transform: scale(0);
}

.hidden {
  transition: all 3s;
}
.hidden:not(.show){
  opacity: 0;
}

this way you don't have side effects / accidental repaints of the DOM or accidental stacking contexts created (opacity does this) you could also consider using CSS variables to make the .show class more of a variable holder. i.e.

.show {
  --scale: 1;
  --opacity: 1;
  --translateX: 0;
  --translateY: 0;
  --translateZ: 0;
  --grayscale: 0;
  --blur: 0;
}

.scale {
  transition: all 1s;
  transform: scale(var(--scale, 0));
}

.hidden {
  transition: all 3s;
  opacity: var(--opacity, 0);
}

.show {
  --scale: 1;
  --opacity: 1;
  --translateX: 0;
  --translateY: 0;
  --translateZ: 0;
  --grayscale: 0;
  --blur: 0;
}

.scale {
  transition: all 1s;
  transform: scale(var(--scale, 0));
}

.hidden {
  transition: all 3s;
  opacity: var(--opacity, 0);
}

Myndi•2y ago

My best guess is that the latest is a better practice. Didn't think of that, will implement it that way.

Coder_Carl•2y ago

It's certainly cleaner. Have to think about Naming conventions then for classNames that are just variable holders

Gaming

Programming

Conflicts with CSS classes