[system] Prefer styled-components's css prop over Box css

• I have searched the issues of this repository and believe that this is not a duplicate.

Summary 💡

A css prop had been added in Styled-components v4: https://www.styled-components.com/docs/api#css-prop. It is a very handy way to stylize a component, and personnaly I use it a lot.

However, it doesn’t work on the Box component because Box has already a css property. I think it would be preferable not to have one to make it possible to use Styled-components one.

[lcswillems]

I am not sure about what you ask me to think about precisely but I largely prefer option 2 (“write them under one prop”) over the other one for these reasons:

1. “all system props would be easily discoverable” as @mnajdova said. I don’t know how many styling props there are (let’s say 50). Then if I want to use a new component I don’t know well, it will be very hard to find the properties that are really specific to it.
2. I prefer when styling props are grouped because I am used to separating css and html or separating css and logic props.

I hope my answer helps, and if I answered about the good thing.

[mnajdova]

Now that we have the sx prop is safe to drop the css prop. Will work on a PR 👍