A CSS namespace collision occurs when separate components reuse a class name in the global stylesheet scope. Rules for the same class can then affect both components, even when each was intended to style only one. section 7.1.1
As a React application grows, reused class names can cause:
- Unintended styles between components—for example, two uses of `.group` can make rules apply across both contexts. section 7.3.5
- Conflicts between an embedded React application and the surrounding website, making the source of errant styles harder to track down. section 7.3.5
- Naming schemes such as BEM can help prevent collisions, but may not be sufficient at scale. section 7.3.5
A shared `.wrapper` class
If two components each define a `.wrapper` rule for different purposes, both rules apply to both elements. Sensible naming can reduce this risk, but checking for reused names becomes difficult across many components. section 7.1.1
