|
|
|
|
|
by iainmerrick
2267 days ago
|
|
reusable components [...] should render nothing outside of it (including empty space, i.e. margins). Could collapsing margins be an exception to this rule, in principle? I’ve mostly worked in Android, iOS and React Native, none of which have collapsing margins. But I’ve often wished they had, as it would make some layouts a lot simpler! It would be great to just smoosh components together and have them agree between themselves how much space is needed. HTML has collapsing margins but they seem kind of half-baked. Is there enough functionality there to be useful, or is it best avoided entirely? |
|
Generally I'd recommend avoiding them entirely, as the rules for when margins should collapse are nuanced and sometimes applied inconsistently between browsers.
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Mod...
It just adds too much cognitive overhead to reasoning about your layouts to be worthwhile imo. Whereas with spacing components, what you see in the virtual dom is what you'll get.