search

AustinGil / bedrocss

A classless CSS library that's modern, lightweight, and easy to modify so you can start your projects on a solid foundation. It does a bit more than a reset, but not so much as a framework. bedrocss applies sane defaults to plain HTML elements, so there isn't anything to learn, and it's super easy to modify.
https://bedrocss.austingil.com/
29 stars 4 forks source link

reconsider box-sizing:inherit #5

Closed nuxodin closed 3 years ago

nuxodin commented 3 years ago

Since there are cases where you explicitly want box-sizing: content-box, I would rather choose the following:

https://github.com/AustinGil/bedrocss/blob/0cbc6dac993e9d1ee099185f956dabaaa2da1cd2/src/base.css#L14

*,
*::before,
*::after {
  box-sizing: border-box;
}

Use case:

Here my .main-width Element should always be 40rem, regardless of its padding.

.main-width {
   max-width: 40rem;
   padding-left: 2vw;
   padding-right: 2vw;
   margin: auto;
   box-sizing: content-box; 
   /* if box-sizing is inherited on every element, containing elements also has content-box */
}
AustinGil commented 3 years ago

Thanks for the input @nuxodin. I personally don't feel strongly either way, but based my opinions on the argument laid out in CSS Tricks https://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/.

I can see both ways being valid and either way, if you need things the other way around, you're going to need to overwrite things. I like the inherit approach because I think it's more common to expect all descendants to behave the same as a parent. With that said, though, I can't say I've ever had to set something to a different box-sizing.

I hope that clears up the thought behind this approach. Any thoughts in response?

nuxodin commented 3 years ago

This approach also has its value.