If we go to the second code snippet, we have the file where we are defining those two Styled Components. Basically, we're saying that 'Box' is a HTML 'div' and that 'Button' is a HTML 'button' . Below that we start writing all of our CSS rules for each of the elements. - First advantage of this is the modularity that this creates. Your element and it's CSS are completely isolated and you can easily remove it from one place and put it on another and the CSS rules that it has won't affect any other elements or won't be affected by any other CSS. - Another advantage is that with this is that you get a lot of features that you see in some CSS pre-processors like SCSS. You can use variables, mixins and one of my favorites, nested styles - you can see this in the code example where we are setting rules for the element and also setting some rules for the 'h1' and 'p' inside the 'Box' Styled Component. Finally, we can also pass props to these Styled Components and use them for dynamic properties, which is awesome and super handy!
Hope that if you use React, you give this a try. I bet you'll love it!