charlesBochet
commented
2 days ago Generally, I'm in favor of having a consensus in the project, so I would advocate to update our project guidelines to be:
- (1) always use box-sizing: border-box, no exception
Once this is validated (let's see if @lucasbordeau and the rest of the team), we can discuss how to enforce it:
- (a) Global css selector: * => We have always avoided having global css selectors in the project as we rely on styled-components. Why not, but it would be a first time and I would like to understand why we haven't faced a need for a global selector before + lint rule to prevent to change in styled components
- (b) apply border-box to
<html>root element if border-box property is inherited and add a lint rule to prevent changing it in styled component - other ideas we might have to enforce it?
I would prefer (b) if inheritance work, otherwise (a) seems reasonable with a good UX
Devessier
lucasbordeau
I was creating a new button in a confirmation modal and chose to make it a link. The link was not appropriately positioned, even though it had the same styles as the buttons below and above. Therefore, the styling difference was due to the HTML elements' nature and the way the browser styles them by default.
By default, the
box-sizingproperty equalscontent-boxfor links andborder-boxfor buttons. The difference is how the browser calculates the element's actual width when we set an explicit width (likewidth: 100pxorwidth: 100%).With
content-box, the browser adds the padding and the element's border to the width. Settingswidth: 100px; padding: 16px; border: 4px solid black;will make an element140pxlarge (100px + 2 * 16px + 2 * 4px). See the MDN's article on this property.Most modern CSS solutions set the
box-sizingproperty of all elements and pseudo-elements tobox-sizing, which is much easier to think about. For instance, that's the choice made by modern-normalize, the CSS reset library used by Tailwind CSS.I saw that the
box-sizingproperty is set toborder-boxmany times in the app. We might want to consider making it global, which would prevent nasty bugs like the one I found.Here is an article explaining why that's a good idea to do so: https://www.paulirish.com/2012/box-sizing-border-box-ftw/
And here's the CSS to add: https://github.com/sindresorhus/modern-normalize/blob/3faa07fc91b8ffbe6243bc4f91e880a00185d0a2/modern-normalize.css#L8-L16.
If we choose to go this way, we'll have to ensure it doesn't introduce regressions where we rely on the
content-boxbehavior.That's a choice we already made for the chrome extension and the website: