SCSS in React
I've build like 8 small projects in Reacts so far, in every project I just made a new folder (Navigation for example) with a index.js and index.scss, import the scss in the JS file and then style that specific component.
I'm making a bigger project now and wanted to seperate my SCSS completely. Just make a folder called SCSS with a global SCSS import file and then make about 4 folders which contains SCSS files for the entire project. I ran into a problem when trying to use a background image..
Now obviously I could just use inline SCSS for this, but I want to use the image in an ::after, which doesn't seem possible with inline styling..
Is this possible/a good idea at all in React? Does this have any downsides?
11 Replies
I think the original approach works much better and is preferred for larger projects
I would avoid using inline styling in general, and use utility classes that you can use for punctual needs
I'll stick to this then, thanks!
You might want to try styled components as a library for, err... well, styling your components. The main benefit I see is that you can apply custom logic using JavaScript in a much nicer way, for example changing css properties based on the component props, etc. Not sure if you would really need it for your use case but just a suggestion that is worth looking into
You guys @joao6246 @.aevitas might wanna try Tailwind CSS. It feels great, you can achieve fantastic results with a smooth development experience. If custom logic is something you need to look into, check CVA: https://github.com/joe-bell/cva
GitHub
GitHub - joe-bell/cva: Class Variance Authority
Class Variance Authority. Contribute to joe-bell/cva development by creating an account on GitHub.
Cheers man. Right now I am sticking to modules while building my portfolio in typescript (and learning that as I go). Changed my structure which works fine so far.
I’ll try styled for whatever project comes up next 😊
styled is a rather nice package to bring in, though if you ever are concerned about shipping large packages, it can create a bottleneck because of how large it is - better off using SCSS if thats an issue.
Your solution towards modularized scss per component makes sense, particularly if you ever want to ship with a model with per-module versioning because then you don't have to worry about shipping a component with styles that rely on other components.
An argument can be made that using inline styles purely as a way to quickly dogfood your work (to try out what you're building) makes sense as a way to quickly scale up your project without having to worry about extra files or (if using webpack) bundling them in a specific way. Additionally, you can inline styles if they're necessary when writing algorithms which change the positions or styles of specific components.
That's the spirit 🙂 Tailwind is also pretty neat, so add that for the next after that 😄
@theoriginalandrew Thanks for the explaination! @joao6246 I might, although I loathe CSS frameworks. I tried it once for a brief moment a few months ago but quickly went back to writing my own 😄
I always feel like I spent more time in the documentation than actually coding
Thats not a bad thing though. At some point in your career, you will spend more time in documentation and thinking about the architecture than writing the code. I spend about half my day doing that
Tailwind I think is a bit special in that what you actually write are pretty much css styles anyway, only in a different place. The advantage is that everything happens right in the component (assuming a framework like react or vue) so you are not distracted or wasting time going back and forth between files. It also comes with a nice set of defaults like color palettes which I really like.
On the other hand it makes a complete mess of your code if you are not careful. Ironically the solution is to use classes which... well it's what css is all about so they went full circle on that 😂
True. I just didn’t see the value in it. When I’m in documentation a lot to do something which I can do myself with no documentation, it didn’t feel like it would hold any value.
But I might dip my toes into it later, perhaps having more experience now will make it worth using.