Do you feel it's messy to mix logic and styles?
October 17, 2019
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.
- 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.