Layout components should have a prefix

[medeeiros]

Layout components should explicitly start with a prefix (like on SMACSS).
Areas may also be defined as well.

Apart from separating concerns, a nice feature would be "enabling" outline on areas of a layout. With that, would be easier to visualize and separate your components when creating a component library.

So this outline you have manually created could actually be automatically created based on [class^=l-]

[rstacruz]

ah, yes.. been mulling about this as well.

[rstacruz]

care to share any other experiences with layout components?

[medeeiros]

it is a little bit tricky because you don't wanna end up with a grid system.
.l-recipe-list is nice, it is a list of recipes and you can create responsive rules to it. It is also nice to read and it gives you some context.
but .l-col-md-6 I don't like. Layout might use grid mixins but not act as one.

[jeroenvisser101]

perhaps you could split words with double dash (--) or with an underscore (_) to make it clearer?

[jasny]

To my opinion, that is already putting to much assumption on what a recipe-list is and how it's used. I prefer the syntax of the current version.

[polarathene]

So if it's just applying styling do the children, you'd go with l-artice-list / -l-article-list / l_article-list or similar? l-article-card wouldn't seem right despite composability I think, you're already providing context by prefixing to article-list, which would also exist in the class list if any specific styling was applied I assume, just not be necessary.

I don't really see anything wrong with including layout within the component class like shown currently. So long as the layout styles for children are isolated from any additional styling. You might abstract the clearfix and any resets like for ul / li into a _l-list base component. Then @extend that as the first part of article-list. I'm still new to CSS but I think base styles like these need to be isolated into a prior layer for correct source order, like mentioned in SMACSS. I've read it's often better to @extend %placeholders and gzip should cater to the repetition bloat.

If you go as suggested above with l-receipe-list I don't think this is clear where it belongs. To me that'd imply it belongs in the same class list as article-card not the list context article-list