Include some advice on using styles #735
Conversation
ghost
added
the
| * that are used by that specific component. This is why all class names start | ||
| * with "App" in this example. Instead of defining nested selectors for child | ||
| * components, we recommend passing all relevant information as props (such as | ||
| * <Button color="red" size="large" />) in React. Then you can have <Button /> |
There was a problem hiding this comment.
In this case it seems like you are going to directly inline all those styles. One common pattern is to pass down high level props like size={"large" | "medium" | "small"} and then use those to add the class App-size-large, App-size-medium...
I would expand a tiny bit your "nested selector" explanation to explain what I mentioned above. I think this should cover a lot of use cases.
There was a problem hiding this comment.
Yea, this is what I meant! I’ll figure out how to rephrase this.
There was a problem hiding this comment.
Why not to recommend BEM notation for elements and modifiers?
| @@ -1,3 +1,8 @@ | |||
| /** | |||
| * This is a good place to put styles that apply to the whole page. | |||
| * We recommend to put component-specific styles into separate files. | |||
There was a problem hiding this comment.
Super nit picky but "We recommend to put" sounds a bit odd, how about "We recommend putting"
|
Meh. |
@vjeux @lacker
Plz review.
Related to #642 (comment).
I think it’s not super obvious why those files are split and we have a chance to gently nudge people towards writing more component-oriented CSS if we explain what we mean.