Overqualified CSS selectors break layout of content-box child elements

[jerryjappinen]

I have a project where I have not changed the global default of box-sizing from content-box. I noticed I started having layout issues when introducing smooth-dnd and it's the result of these overqualified CSS selectors that set the box model all child elements of .smooth-dnd-container and .smooth-dnd-ghost:

.smooth-dnd-container *{
  box-sizing: border-box;
}

/* ... */

.smooth-dnd-ghost *{
  box-sizing: border-box;
}

This means that elements nested deep within my draggable items will have their box sizing changed. This is very difficult to override, since I do set some elements to border-box when it makes sense for how I want a specific element to behave. I can override this default, but my override will again break the children where I want to use border-box.

While border-box is commonly used, it's not suitable for all situations and I think a library intended to deliver very specific functionality should not set overqualified defaults like this. Without knowing all the details of how calculations of the library works, I think the selectors should only target the specific elements where this box sizing matters for the library functionality.

Perhaps it could be changed to direct descendants only:

.smooth-dnd-container > * {
  box-sizing: border-box;
}

/* ... */

.smooth-dnd-ghost > * {
  box-sizing: border-box;
}

I'm using smooth-dnd via vue-smooth-dnd, as a workaround I wouldn't mind just duplicating the CSS file with custom changes myself but it seems the CSS is automatically loaded via NPM, so I guess this doesn't work as a workaround.