There several ways or methods that you can use to styling your react app 💎, here I am going to show the best 4 methods/ways to do it with it's advantages and disadvantages.
1. CSS ❄
React is just a JavaScript library that "generates" html (in simple words), so you obviously can write base CSS to styling your react app.
Advantages:
- It is easiest one
- No configuration needed
Disadvantages:
- Horrific to maintain.
- It could be a disaster if you are working in huge projects.
2. CSS modules ❄🍗
A CSS Module is a CSS file that defines class and animation names that are scoped locally by default, it creates a unique class for each element in your app to make sure you won't have problems mixing classes.
Advantages:
- It is plain CSS
Disadvantages:
- Same as CSS
3. Preprocessors (SAAS, LESS, etc) 💪💥
Preprocessors are CSS with super powers it really makes life easier. With Preprocessors you can have variables, mixing, functions, etc, all these inside your styles.
If you haven't try any Preprocessor before I highly recommend you to start using SASS.
Advantages:
- Easy to learn.
- You can have variables, mixings, functions, etc.
- Easy to maintain in large projects.
Disadvantages:
- Need configuration
4. Styled-Components (recommend) 💅
Styled-Components is a js library that allows you to write CSS inside JavaScript, so you can have much control in your styles by adding variables, importing things from another file etc.
Advantages:
- You create react components with this library, you don't need classes anymore.
- Much control and super easy to main.
- You can use sass syntax.
Disadvantages:
- None (in my personal opinion)
This was the best 4 ways that you can styling your react/JavaScript application 💎, if you liked please follow me on my tweeter to see more content like this https://twitter.com/joselatines_
Top comments (0)