CSS as we all know plays a major role, every website needs it and how could it not, think of it as the wall painting and decor we need for our homes. So now we know we need CSS but the burning question on your mind right now is why styled components and what is styled components? We will get to that in a bit, so bear with me. Firstly we need to understand the flaws of CSS. Whats wrong with plain vanilla CSS (Cascading Style Sheets)?

Global Scope

CSS in our code all share one single global name space which more or less leads to style leaking. For a small project you might not run into this problem but for a large scale project or as your project starts becoming bigger and bigger, this is certainly one of the major issues you will encounter along the way. So Style Leaking as the name may imply is simply having the styles of say an element or component declaration affecting or changing another element on our web page. The reason for this is because javascript puts the styling in to the head of our application, so any component can access the CSS declaration from anywhere due to either having the same name or classname.

So How Do We Fix or Avoid Leaking Styles in Our Components?

1. BEM

One solution to this is the BEM methodology, a lot of developers have used this as a work around style leaking, basically what it is, is a style of naming your CSS where you follow a certain format in naming your classes, however personally for me its a bit cumbersome cause as you start nesting elements, the classNames are getting longer and longer and longer. Overall it gives to a structure and set of rules that will help you write styles that are easy to maintain and not lead to style leaking.

2. Using Javascript to Create our CSS

Another solution is to use javascript to write our CSS codes, how you do that is simply write our style properties using javascript then pass it in to our element using the style property.

const textStyles = {
    fontSize: '18px';
    fontWeight: 500;
}

Notice how we write it in camel Case and not with a hyphen in between and using single quotes to pass in the values. So now after writing the block of code we then pass it in to our element using the style property like so;

<p style={textStyles}> Hello World! </p>

Everything seems okay right? But no, the problem with this is we don't have access to all CSS selectors such as ::before etc.

3. Styled Components

The next best solution and my favorite is styled components . Styled components is simply a CSS in Js library that helps you render our styles. Note that there are other libraries out there.

With styled components we are letting javascript add our style to our html, similar to what we did above, this is so specific and unique and our styles will never leak cause for every style component we create it gets a unique classname and it generates a unique stylesheet with the CSS declarations in it.

How to Write Styled Components

Before using styled components we have to add it to our project either using yarn or npm

npm i styled-components

And now you can start using styled components in our project like so

import styled from "styled-components";

export const  Wrapper = styled.div`
    width: 40vw;
    height: 40vh;
    display: flex;
    justify-content: center;
`
export const Text = styled.p`
    font-size: 18px;
    font-weight: bold;
`

Normally what i like to do is separate my styles ie; card.styles.js from the actual component so now i'll have to import it into my card.component.js like so:

import React from "react";
import {Wrapper, Text} from "./card.styles

const Card = () => {
    return(
        <Wrapper>
            <Text>Hello React World!</Text>
        </Wrapper>
)}

export default Card

So my folder structure is src>component>card>card.component.js, card.styles.js

Pros of Using Styled Components

- No more style leaking

- We have access to all our selectors now

- we can pass props into our CSS

const MenuHeader = styled.div`
  position: fixed;
  width: 100%;
  height: 10vh;
  padding: 2vh 0 1vh;
  background-color: ${props => (props.isScrolled ? "#262727" : "transparent")};
`

Cons of Using Styled Components

I can only think of one downside to writing our CSS using styled components which is it looks kinda ugly which is not necessarily a con IMO.

In conclusion, you do you, choose what works best for you as long as there is no style leaking you are good to go.

Styled Components in react and why it is a good fit for your project