CSS box-sizing reset with high specificity breaks spectrum-Calendar-tableCell

[Harbs]

spectrum-Calendar-tableCell has the following CSS:

.spectrum-Calendar-tableCell {
  text-align: center;
  padding: 0;
  position: relative;
  box-sizing: content-box;
  height: 32px;
  width: 32px;
  padding: 4px;
}

I always have the following CSS in my application:

.royale * {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
}

This has a higher specificity and overrides the first css. If the above is not allowed with spectrum-css, I could write my own overrides, but I think specifying global border-box sizing is pretty standard.

Changing the css to the following should fix it:

.spectrum .spectrum-Calendar-tableCell {
  text-align: center;
  padding: 0;
  position: relative;
  box-sizing: content-box;
  height: 32px;
  width: 32px;
  padding: 4px;
}

I'm wondering why content-box is being used at all though. Why not set the width and height to 40px and keep border-box sizing? That seems to work fine.

[lazd]

Assumptions were made when that component was implemented, and the quick fix was to use content-box to fix issues caused by * { box-sizing: border-box; }. Since your reset has high specificity, the fix doesn't work.

You're right, switching to border-box will fix this issue, but I would expect a reset such as this to not use descendent selectors due to this exact issue; it's a bit much to expect every element that sets a specific property to have higher specificity than your reset. Any reason to not use * {...}?

[Harbs]

My box-sizing is set by Royale https://royale.apache.org/.

The reason it's not a true global selector (with the lowest specificity) is because the app could theoretically by embedded in a web page with its own CSS. I'm not super happy with that decision, but we have yet to come up with a better compromise.

I don't see why there's a necessity to use content-box at all. Why not make all of spectrum use border-box?

FWIW, we're working around this issue by explicitly setting the width and height...
https://github.com/unhurdle/spectrum-royale/blob/master/Spectrum/src/com/unhurdle/spectrum/Calendar.as#L354

[lazd]

It's not really necessary to use content-box, but the fact is that the overly specific reset is causing this issue -- if you did this for literally any property i.e. .royale * { color: red }, you'd break that property in every Spectrum CSS component (and likely every single other piece of external CSS). It's overly specific and not the right way to do a reset.

Two workarounds for you.

1. Change your reset to * { box-sizing: border-box; }
2. Remove your reset completely and only apply the properties you need to the classes you're creating (this is the true way to be independent and compatible with other libraries on the same page, and is what Spectrum CSS does) i.e. .royale-thing { box-sizing: border-box; ... }
3. Add .spectrum-Calendar-tableCell { box-sizing: content-box !important; } in your project to override the overly specific reset

[GarthDB]

@Harbs we'd prefer not to increase the specificity. If there was a way we could get the same layout and flexibility with it being box-sizing: border-box; I might be open to that, but I suspect it's content-box because we couldn't find another way to do it. Short of that, I agree with @lazd's solutions.

[Harbs]

border-box with width and height of 40px does the trick...

[Harbs]

More specifically:

.spectrum .spectrum-Calendar-tableCell {
  text-align: center;
  padding: 0;
  position: relative;
  box-sizing: border-box;
  height: 40px;
  width: 40px;
  padding: 4px;
}