Deny flex-item rules in components

[ascrazy]

I want to raise a question about flex-item rules.

I think that it's better not to use flex-item rules at least in default component state because component itself can't know if it will be used in flex-container or not, and even inside flex-container flex-item rules will have different behavior with different flex-container rules on component's parent (flex-direction, flex-wrap, ...)

I guess we should start recommending for flex-item rules the same approach as for positioning.

First, I want to discuss this question with community, maybe other solutions will be found. And then I can try to implement PR (or maybe someone with better English).

[whaaaley]

I'd say maybe. I think this might fall under the same thing as what's described in variants.

"A component may need to appear a certain way when nested in another component. Avoid modifying the nested component by reaching into it from the containing component."

"Instead, prefer to add a variant to the nested component and apply it from the containing component."

http://rscss.io/nested-components.html#variants

So, "by default" it's already sort of recommended to only use flex-item rules in modifiers anyway, because they have to be initiated by the parent, but maybe clarification or elaboration is needed.

[ascrazy]

@dustindowell22,

We already have an exception for positioning rules.

If you need to define these, try to define them in whatever context they will be in. In this example below, notice that the widths and floats are applied on the list component, not the component itself.

.article-list {
  & {
    @include clearfix;
  }
  .article-card {
    width: 33.3%;
    float: left;
  }
}
.article-card {
  & { /* ... */ }
  .image { /* ... */ }
  .title { /* ... */ }
  .category { /* ... */ }
}

I think that flex-grow, flex-shink or align-self mustn't be properties of component itself, because it's properties of certain context where component is placed (properties of parent component).

I my current project we decided to define variants for this, but it still looking quite abnormal, because you must provide very specific set of rules on parent component if you want to use such variant on its child.

[rstacruz]

I guess we should start recommending for flex-item rules the same approach as for positioning.

Makes sense.

[rstacruz]

On this note, some people have raised the question: what delineates a component and a layout? In practice, I find that most layouts are components too.

Just wondering if anyone has any opinions on this.