Do you feel it's messy to mix logic and styles?
This one’s going to be short.
Mixing logic and styles, it can result long files and you almost feel like you’re spending more time scrolling through styles than coding. Some love only having to open up one file - others simply hate it. To some it feels natural whereas to others it just doesn’t feel right. Either way here are some simple tips that could help to overcome this frustration
- It’s often taken quite literally that when you do CSS-in-JS, that the CSS has to belong in the same file with the JS. But that’s not at all the case. There’s nothing wrong with separating the CSS from the JS and it’s not even against the SC conventions.
Here are some real life projects that apply this convention. Spectrum, which was co-founded by Max Stoiber, the creator of Styled-components. Same goes for Atlassian
-
You want to keep the styles and logic together but you hate having to scroll a lot in your component. Maybe it’s a sign that you should split up your component? Are you thinking in React?
-
Are you keeping the styles above your React component and you’re tired of scrolling a lot every time you want to edit the actual component (the logics)? Depends on what you prefer, but you might consider keeping the styles below the React component. (sorry :p this one is maybe quite obvious, but anyways…).
All right, that’s it for now.