Basically we have 5 Major type of styling solution available on which most of the component ui frameworks and styling libraries are based upon.
- Plain CSS - This is the regular way of using pure CSS for styling with no external dependencies and we can either write inline(JSS), internal(head section) or external css(css file).
- SASS/LESS - CSS preprocessor is basically a scripting language that extends CSS and then compiles it into regular CSS.
- JSS - JSS is an authoring tool for CSS which allows you to use JavaScript to describe styles in a declarative, conflict-free and reusable way. It can compile in the browser, server-side or at build time in Node. JSS is framework agnostic. Eg: Material-ui uses JSS at its core.
- Styled-components - This is an easy to use styling solution that uses tagged template literals (a recent addition to JavaScript) and the power of CSS, styled-components allows you to write actual CSS code to style your components.
- CSS Modules - A CSS Module is a CSS file in which all class names and animation names are scoped locally by default. CSS Modules let you write styles in CSS files but consume them as JavaScript objects for additional processing and safety. CSS Modules are very popular because they automatically make class and animation names unique so you don’t have to worry about selector name collisions.