Clean your code from HTML tags with Styled Components magic
Tags: javascript, css, html, webdev
Published: 2019-09-20 18:03:28

How many times have you looked at your code looking for a specific div, and wasted several minutes until you found it. Or maybe you didn't event find it and tried searching the div by the class you used to style it, but oops, you don't really remember de name of the class. It sucks right?

### Styled Components to the rescue

This is my experience using Styled Components, a CSS library which gives you a lot of power when implementing CSS code.

#### Cool thing number 1

Imagine you have the following component:

```jsx
const Component = () => (
    <div class='container'>
      <div class='header'>
        <p>some text</p>
      </div>
      <main>
        <div class='main_left'>
          <p>some text</p>
        </div>
        <div class='main_right'>
          <p>some text</p>
        </div>
      <main>
      <div class='footer'>
        <p>some text</p>
      </div>
    </div>
  )
```

Very simple right?

Now picture this:

```jsx
import styled from 'styled-components'

const Container = styled.div`
  // css code here
`

const MainLeft = styled.div`
  // css code here
`

const MainRight = styled.div`
  // css code here
`

const Footer = styled.div`
  // css code here
`

const Component = () => (
    <Container active>
      <Header>
        <p>some text</p>
      </Header>
      <main>
        <MainLeft>
          <p>some text</p>
        </MainLeft>
        <MainRight>
          <p>some text</p>
        </MainRight>
      <main>
      <Footer>
        <p>some text</p>
      </Footer>
    </Container>
  )

```

Much cleaner right? Notice that the components generated are not real components (_they are styling components_) in which you can generate JS logic, it's just CSS code definition wrapping a HTML tag and exported with a easy-to-find name.

The way I see it is like: __HTML tag__ + __class_name__ = __StyledComponent__


#### Cool thing number 2


Something to have in mind is: __it's reusable!__ and flexibly reusable.

Why _flexibly_ reusable? 

On the one hand, you can declare the styled components in another JS file and import it in __any__ React component.

On the other hand, you can also do this:

Imagine a situation in which you have a _select_ HTML tag and a _button_ HTML tag that, at the end, you want them to look the same. You have already finished styling the _select_ tag and you are about to start with the _button_ tag. _WAIT_, try this.

Of course, you first declare the Select styled component styles.

```jsx
const Select = styled.select`
  width: 400px;
  height: 400px;
  background-color: blue;
  border: 1px solid red;
`
```

After doing this you can inherit all the __styles__ from this Select component wherever you want, in another HTML element.

I use bold in styles because it's all that it inherits, the CSS, so: 


```css
  width: 400px;
  height: 400px;
  background-color: blue;
  border: 1px solid red;
```

Let's continue

```jsx
const Select = styled.select`
  width: 400px;
  height: 400px;
  background-color: blue;
  border: 1px solid red;
`
```

Imagine you want a `button` with the same styles as the Select. In the component you would use it like this: 


```jsx
const Component = () => (
  <Select as="button" />
)
```

What we are saying in the Button declaration is: take all the styles from Select and but renders it as a button HTML tag. Note that the attributes that now Select recieves are the ones that a HTML button tag would. (so, no options).

#### Cool thing number 3


Now imagine you need to conditionaly colour a __p__ HTML tag depending on some state you have in your component, something like this:

```jsx
const Component = () => {
  const someCondition = useState(false)

  return (
    <p className={`base ${someCondition ? 'when_true' : 'when_false'}`}>some text</p>
  )
}
```

So, what do I see wrong here.
Couple of things:

1. You need to define 2 classes (one for condition true and one for false)
2. You will possibly have to create 3 classes (one for the base styles of the __p__ HTML tag, one for the styles that are applied only when the condition is true and one for the styles that applied only when the condition is false)

In normal CSS code:

```css
<style>
  .base {
    background-color: grey;
    font-size: 1.5rem;
    font-weight: bold;
  }

  .when_true {
    color: blue;
  }

  .when_false {
    color: red;
  }
</style>
```

Now with the power of Styled Components __props__:

```jsx
import styled from 'styled-components'

const Paragraph = styled.p`
  background-color: grey;
  font-size: 1.5rem;
  font-weight: bold;
  color: ${props => props.conditionName ? 'blue' : 'red'}
`

const Component = () => {
  const [someCondition, setSomeCondition] = useState(false)

  return (
    <Paragraph conditionName={someCondition}>some text</Paragraph>
  )
}
```