Avoiding code duplication in styled components
Tags: styledcomponents, react, css, bestpractice
Published: 2023-01-25 00:14:32

Let's say you need to create different elements that have similar style attributes but not the same. Traditional way to do this in CSS is to create a class and give that class to your elements. Then you create different classes, for the different attributes. 

It will look like the example below;

_styles.css_
```css
.box {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 80px;
  height: 80px;
  border: 2px solid green;
  border-radius: 6px;
}

.first-box {
  color: red;
}

.second-box {
  color: blue;
}
```

_component.tsx_
```javascript
import React, { Component } from 'react';
import './styles.css';



class Component extends Component {
  render() {
    return (
      <div>
        <div className="box first-box">
          <span>first box</span>
        </div>
        <div className="box second-box">
          <span>second box</span>
        </div>
      </div>
    );
  }
}

```

And the output;


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/z3qsiywpdr13apbc7c09.png)



Now I will show you two different ways to achieve the same goal using styled-components.

1. Using css`` markup
2. Inheriting another styled component


**1. Using css`` markup**

In this example, we will save the shared piece of css values in a variable, and use that variable while we are creating the other components.

_component.tsx_
```javascript
import React, { Component } from 'react';
import styled, { css } from 'styled-components';

const boxCss = css`
  display: flex;
  align-items: center;
  justify-content: center;
  width: 80px;
  height: 80px;
  border: 2px solid green;
  border-radius: 6px;
`;

const FirstBox = styled.div`
  ${boxCss}
  color: red;
`;

const SecondBox = styled.div`
  ${boxCss}
  color: blue;
`;

class App extends Component {
  render() {
    return (
      <div>
        <FirstBox>
          <span>first box</span>
        </FirstBox>
        <SecondBox>
          <span>second box</span>
        </SecondBox>
      </div>
    );
  }
}

```
And we have the same visual result.
As you can see, we save the piece of css markup that we want to share in a variable, and use it as a text inside styled component definition.


**2. Inheriting another styled component**

In this example, we are going to create a component named that will have the shared attributes, and we will inherit this component while creating the other components.

_component.tsx_
```javascript
import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import styled, { css } from 'styled-components';

const Box = styled.div`
  display: flex;
  align-items: center;
  justify-content: center;
  width: 80px;
  height: 80px;
  border: 2px solid green;
  border-radius: 6px;
`;

const FirstBox = styled(Box)`
  color: red;
`;

const SecondBox = styled(Box)`
  color: blue;
`;

class App extends Component {
  render() {
    return (
      <div>
        <FirstBox>
          <span>first box</span>
        </FirstBox>
        <SecondBox>
          <span>second box</span>
        </SecondBox>
      </div>
    );
  }
}
```

As you can see, we still have the same result. 
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/svzfvp4eqxnj9g4wmfs9.png)


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/q92bi55brqtd0f6qzh49.gif)


I hope you liked it and it was useful for you. Thank you for reading.

You can follow me on [LinkedIn](https://www.linkedin.com/in/ali-g%C3%BCm%C3%BC%C5%9F-tosun-9a6736129/) for more content related to web development.