Re: [csswg-drafts] [css-logical] Flow-relative syntax for `margin`-like shorthands

This is highly reminiscent of the `box-sizing` issue where most people by default want to go all in on a particular box sizing mode but want to be able to sometimes switch back to the other mode for things like 3rd party components.

The best practice for handling `box-sizing` at the moment is this:

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

People are pretty happy with that syntax and it pretty much solves all the box-sizing use cases.

So based on what we know about how people have implemented box-sizing, I think adding a `box-mode: physical | relative;` property is best and ensure that it inherits.

That way people can write a CSS reset like this:

```
html { box-mode: relative; }
.not-relative { box-mode: physical; }
```

If we expect relative margins and paddings and so on to become the new standard that everyone uses then we should take inspiration from how people use the `box-sizing` property because it has already walked that path.

Imagine if instead of the `box-sizing` property, we had to write this on practically every width and height setting:

```css
.example {
  width: 100% !border-box;
}
```

That would be aweful, you would have hundreds of `!border-box` all throughout the style sheet.

That's why I think we should have a CSS property that can globally set this for us. Follow the path that `border-box` blazed for us but this time it should inherit so that we have an easy way to make old 3rd party components not break in our new relative margin style sheets.

-- 
GitHub Notification of comment by Dan503
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/1282#issuecomment-434102574 using your GitHub account

Received on Monday, 29 October 2018 22:20:56 UTC