Usage inside contexts where `white`, `black` are defined css classes

[NiloCK]

I'm attempting to use chessground (via vue-chessground, which seems dead, but in any case the root issue is here). My result is that all squares occupied by white pieces are drawn as white, squares occupied by black pieces are drawn as black. A little digging shows why:

<div class="cg-board">
  ...  
  <piece class="black bishop" style="transform: translate(80px);"></piece>
  <piece class="black queen" style="transform: translate(120px);"></piece>
  ...
</div>

I'm using this inside of a UI framework which has a color palate of predefined CSS classes, white and black among them. The framework's rules for .white make the background color of the square white, and similar for black.

Is this is known issue with documented workaround?

white and black are about as generic as possible when it comes to class names - collisions imminent.

Would there be any appetite here to apply some namespaced names instead? ie: chessboard-white, chessboard-black might play nicer with with other wrapping CSS declarations.

Thanks.

[niklasf]

Sorry, namespacing these is inconvenient for use in lila, which is always the priority for this library.

You could use namespacing in the framework, instead, or an override like

.cg-board .white, .cg-board .black {
  background-color: transparent; /* assuming this is the conflicting property */
}

with higher specificity than the rule from the framework.