Future of the flex-child rule?

[samanpwbb]

Flex child has the following rules:

.flex-child {
  display: block;
  max-width: 100%;
}

This rule exists to handle IE11 bugs that we don't need to worry about any more (see https://github.com/philipwalton/flexbugs). I think we could deprecate this class. It would have the effect of really simplifying a lot of markup. Mapbox CSS tends to be packed full of flex-child declarations.

How should we handle flex-child modifiers? We could rename them to use a simpler form: flex-grow and flex-shrink.

This would be a big change, so would love input from @katydecorah / @tristen / @dereklieu

[katydecorah]

I think deprecating flex-child makes sense. Should we consider dropping the word parent from the flex-parent modifiers as well?

Right now the flex classes distinguish between parent and child. If we switch from flex-child--grow → flex-grow then the naming convention is lost on the child classes, but remains with the parent classes.

Additional ideas:

1. Deprecate flex-child and remove child and parent from remaining classes. This is a pattern Tailwind uses. While this change would more closely follow patterns of other Assembly classes, it would increase the amount of breaking changes. Example: flex-parent → flex Example: flex-child--grow → flex-grow

2. Deprecate flex-child and keep child in remaining classes. This option would reduce the amount of breaking changes and keep the parent/child naming convention. Example: flex-child--grow has no change

[samanpwbb]

I'd prefer like option 1. I don't think this migration would be too bad from Studio's POV and we'd come out of it with simpler, clearer CSS.

[dereklieu]

Agree with option 1, let's tear the band-aid off!