[Styled Components] Questions and Concerns about zepio HOT 3 CLOSED

You have some good questions there! They really go into the core design decisions and logic of how using styled-components.

Yes! Only reusable components get plucked out. If a styled component is used only in the component file it should be kept there. The reason is that this follows the "componentization" philosophy of React and makes easier to refactor as everything related to that component is in the components file. This is how we have been doing so far and works great in the long run, if the file becomes too big it's more likely due to not splitting up the component as whole than being a fault of using too many styled-components.

2) Say I have 2 styled divs (, ), and as I'm implementing the feature, I realize that I have to add a third div inbetween the two, and I need to style that div, so now I need to create a new component called (could also lead to me having to change the name of to something else for clarity), and then style it. These seem like a lot of steps when I could simply have just given the

a className and style it directly without worry. What's going on here? So every div that exists in the app will need to have something like this?

Yes, should be created another styled-component for the div. The idea here is indeed what you said, name the styled-component for sake of readability and also this helps "componentize" the style.

If you stop to think about the steps involved in both approaches (css file and styled component) they are not that far apart.
CSS:

1. go to css
2. add class definitions
3. add class to div

Styled:

1. add new styled component
2. use it

Also, keep in mind that sometimes you don't even need a new "class"/"component". If the div shares most of the styles with the previous two maybe you just need to add a property to the original styled component.

const Block = style.div`
 width: 40px;
 height: 40px;
`

<Block />
<Block />

// but now I want a blue one!
// in css you would need to create a new class, .block.blue
// in styled this is just a property

const Block = style.div`
 width: 40px;
 height: 40px;
 color: {props => props.blue ? "#4bf" : "transparent"};
`

<Block blue />

3) Usually EVERY SINGLE DIV in the page is styled, it's usually there for a reason, a purpose. With that in mind, if we look at this code example below (simple form), I'd need to create LOTS styled divs just to create that layout. I definitely understand that we'd create various components that will be reused, but still feels like there's a lot of inbetween divs that will need to be styled and will require a lot more lines of code to be able to style.

If you stop to think, most of classes there could be replaced by just checking up with some logic passed by a property in a styled component, even reducing the amount of typing. .form-grid and .form-grid-container would be just the same component with an optional container prop flag. <FormGrid> <FormGrid container>. For the readability side of it the former is way better for quickly scanning the code and now which part does what and not having a </div></div></div> spaghetti in the end.

4) The color: ${props => props.theme.colors.secondary} styled components flow of selecting variables is also much less friendly than simply passing a variable into the css color: $variable-color;. So I'm confused as to how this is better than before?

It's better because you don't need a preprocessor or an additional build process just for this. Also you have all the flexibility of JS unleashed there. Want a color lighten/darken/saturation/contrast helper? Just get some JS, no need to learn another "language" created by a preprocessor just for it. Want to dynamically change the theme gracefully? Just change the ThemeProvider.

from zepio.

@grsabreu will answer soon

from zepio.

@grsabreu these are fair responses. I'm going to do some digging on my own relating to good styled component-based application architecture and let you know if I see any other concerns. It mostly makes sense though. Thanks for the explanations.

from zepio.