Split utilities from property utilties and get more control over generation of property utilities

Created by: MartijnCuppens

Split utility groups

In v4 we have 2 different kind of utilities that are a bit mixed in the documentation and in the code.

The first group is what I call the normal utilities. These utilities have more than one property and don't have the !important suffix. These utilities are:

The second group is what I call the property utilities. These utilities typically have one property (except for .mx-*, .my-*, .px-* and .py-* utilities) and always have the !important suffix.

I think we should split these utility groups. Not sure how we should call them, but for now I'll call them the utilities and property utilities.

More control over property utilities

We got a lot of requests and PRs about the generation of more responsive properties (for example responsive border utilities https://github.com/twbs/bootstrap/issues/28191) but we can't just add utility classes for all the properties because this will increase the size of the css too much.

On the other hand there's a need for more control over the generated code (which is also mentioned in https://github.com/twbs/bootstrap/issues/25941).

On yet another hand (let's just assume there's a third hand somewhere) I sometimes have the need to extend the utilities for more properties like opacity or other properties Bootstrap doesn't cover with utilities.

To tackle this problem I've started developing something to gain more control over property utilities, with some kind of API where you can choose whether you also want to have responsive utilities, but before I'm going to continue with it, I'm going to check for some other opinions here. It 'll probably also need some solid documentation to explain it all.

I'm working under v4-dev-mc-poc-property-utilities, the branch will need to be renamed, because this will not land in v4, but maybe something for v5 if I can get to something ready in time. You can see the diff here: https://github.com/twbs/bootstrap/compare/v4-dev-mc-poc-property-utilities?expand=1#diff-1500afbbcf5fcafdd95fddb9b709de83 scss/_property-utilities.scss and scss/utilities/_property-utilities.scss will probably be the most interesting files.

What do you think?

@ysds @gijsroge @twbs/css-review