KPC
Kevin Powell - Community•3y ago
Myndi

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
Coder_Carl•3y 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
MyndiOP•3y ago
My best guess is that the latest is a better practice. Didn't think of that, will implement it that way.
Coder_Carl
Coder_Carl•3y ago
It's certainly cleaner. Have to think about Naming conventions then for classNames that are just variable holders

Did you find this page helpful?