#4185 - Dangerous CSS
0 guests and 0 members have recently viewed this.
The top 3 point earners from 14th Dec 2025 to 21st Dec 2025.
| PDStig |
|
|
|---|---|---|
| Gabri |
|
|
| sholzy |
|
|
There are no events at this time
Some front-end experts recommend the following [1]:
/* apply a natural box layout model to all elements, but allowing components to change */
html {
box-sizing: border-box;
}
*, *:before, *:after {
box-sizing: inherit;
}
WordPress' default theme also do this[2]. So we can revert to default box-sizing on parent elements containing third party HTML. Is that a good enough middle ground?
Otherwise we are left with removing the wildcard approach and applying border-box on a case by case basis. :( Which will also involve modifying all my new v11 CSS which assumes border-box.
1: https://www.paulirish.com/2012/box-sizing-border-box-ftw/
2: https://github.com/WordPress/WordPress/blob/master/wp-content/themes/twentytwenty/style.css#L147
E.g. it would break anything that tries to use both box sizing models...
<div style="box-sizing: border-box; width: 100%; padding: 10%>
<div style="width: 80%; padding: 10%">Hello</div>
</div>
I have no disagreement that the original CSS box model is stupid, but it's the aggressiveness that bothers me.
We'll justify your rule under the basis of avoiding having to litter CSS with box-sizing declarations in order to gain the simple ability to mix percentages and px padding/margin.
However, implement and test so you can undo it with...
*:not(.trad-box-model, .trad-box-model *),
*:not(.trad-box-model, .trad-box-model *)::before,
*:not(.trad-box-model, .trad-box-model *)::after {
box-sizing: border-box;
}
The idea being anything under a ".trad-box-model" selector wouldn't have the styling applied.
Hopefully it doesn't hurt performance much?
Tweak my suggestion and link to the commit if you want/need to tune this.
Also look into this...
input[type="radio"],
input[type="checkbox"] {
box-sizing: border-box;
padding: 0;
}
Because that seems to be not needing "box-sizing: border-box;" given your global rule.