search

rstacruz / rscss

Reasonable System for CSS Stylesheet Structure
https://ricostacruz.com/rscss
3.91k stars 176 forks source link

2nd edition update #47

Open rstacruz opened 8 years ago

rstacruz commented 8 years ago

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

Changes

mik01aj commented 8 years ago
  • 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 commented 8 years ago

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:

image

.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 commented 8 years ago

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:

image

.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 commented 8 years ago

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 commented 8 years ago

okay, that makes sense.

rstacruz commented 8 years ago

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

mik01aj commented 8 years ago

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

mik01aj commented 8 years ago

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

rstacruz commented 7 years ago

Hmm, we should also include this somewhere:

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

kminek commented 6 years ago

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