2nd edition update

[rstacruz]

Work-in-progress of a v1.4 update.

Changes

• ❓ Components are allowed to have margins. It makes no sense to have to create a layout component every time you need a margins. I think barely anyone ever cared about the "no margins in components" rule anyway!
• @extend will not be recommended. I'll leave a mention about it, but I'd leave the official recommendation as mixins.

Improvements & clarifications

• Structuring your files (ITCSS)
• Layouts
• More examples
• Chapter on CSS preprocessors

[mik01aj]

• Components are allowed to have margins. It makes no sense to have to create a layout component every time you need a margins. I think barely anyone ever cared about the "no margins in components" rule anyway!

Really? I find it a pretty important rule for CSS, and I follow it most of the time. It really makes sense, because the margin usually depends on the context, and not on component itself. (Padding is fine, on the other hand, because it's inside the component.)

Or wait, do you mean margins inside, or outside components?...

[rstacruz]

Ah, nice to know that. Most everyone I've seen seems to use margins on components anyway. I commonly see them in components that stack vertically like these:

.section-heading { margin-top: 32px; margin-bottom: 16px; }
.section-panel { margin-top: 16px; margin-bottom: 16px; }

Any thoughts on these? If they were to be implemented without margins, they'll have to be done with a parent element like...

.sections-list > .section-heading { ... }
.sections-list > .section-panel { ... }

Any thoughts on these?

[rstacruz]

Ah, nice to know that. Most everyone I've seen seems to use margins on components anyway. I commonly see them in components that stack vertically like these:

.section-heading { margin-top: 32px; margin-bottom: 16px; }
.section-panel { margin-top: 16px; margin-bottom: 16px; }

Any thoughts on these? If they were to be implemented without margins, they'll have to be done with a parent element like...

.sections-list > .section-heading { ... }
.sections-list > .section-panel { ... }

Any thoughts on these @mik01aj?

[mik01aj]

Exactly. I add the margins in the parent context. It makes sense, because a .section-heading would perhaps have different margin, say, in a modal.

And when I have a really generic layout component, like horizontal-slider, I use .horizontal-slider > * to match the items and set their margins. And thanks to this rule, I know I will not override any of their margins, because they shouldn't have any. But this case is pretty rare.

[rstacruz]

okay, that makes sense.

[rstacruz]

@mik01aj care to share some of the stuff you've built on RSCSS, as well as any anecdotes on you experience with it? :-)

[mik01aj]

Hmm, this could make a good blog post :) I added this idea to my TODO :)

[mik01aj]

Btw: the blog post is here: https://medium.com/@mik01aj/rscss-77043f4fafb1

[rstacruz]

Hmm, we should also include this somewhere:

https://github.com/rstacruz/stylelint-rscss

[kminek]

i agree with @mik01aj on this. rscss should promote no-margin components.