<ul>
<li>
Intro
<ul>
<li>When I would start a personal project I had my normal set up React as a framework, Node if I needed a backend, SCSS for styling. With my personal site I was gonna try styled components and see how it compared to how I currently use SCSS.</li>
</ul>
</li>
<li>
Thesis
<ul>
<li>Differences I came across when working with multiple types of css</li>
</ul>
</li>
<li>
What are Styled Components
<ul>
<li>
What is
<ul>
<li>React Components Library</li>
<li>Styled Components are React created components with the basis of styling over functionality.</li>
</ul>
</li>
<li>
Pros
<ul>
<li>Scoped CSS</li>
<li>Uses SCSS syntax</li>
<li>Can use props</li>
</ul>
</li>
<li>
Cons
<ul>
<li>React Only</li>
<li>Naming Convention</li>
</ul>
</li>
</ul>
</li>
<li>
What is SCSS
<ul>
<li>
CSS + Steroids
<ul>
<li>CSS preprocessor</li>
</ul>
</li>
<li>
Pros
<ul>
<li>
Mixins
</li>
<li>
Tabing
</li>
<li>
Variables
<ul>
<li>CSS Variables</li>
<li>SCSS Variables</li>
</ul>
</li>
</ul>
</li>
<li>
Cons
<ul>
<li>Preprocessor</li>
<li>SCSS Variables</li>
</ul>
</li>
</ul>
</li>
<li>
What I prefer
<ul>
<li>
React Projects
<ul>
<li>Combination of Styled components and SCSS</li>
</ul>
</li>
</ul>
</li>
</ul>

Blog.

Styled Components vs SCSS