Mastering Modern Web Development Tools: CSS-in-JS with styled-components and Emotion

Welcome back to our blog series on mastering modern web development tools. In this post, we’ll explore CSS-in-JS with styled-components and Emotion. Styling your applications effectively is crucial for creating visually appealing and maintainable user interfaces. Let’s dive into the benefits of CSS-in-JS, how to get started with styled-components and Emotion, and some best practices to follow.

The Benefits of CSS-in-JS

CSS-in-JS is a technique where CSS is written within JavaScript. This approach offers several benefits:

• Scoped Styles: Styles are scoped to components, preventing conflicts and making it easier to manage CSS.
• Dynamic Styling: You can leverage JavaScript to create dynamic and conditional styles based on props and state.
• Improved Developer Experience: Tools like styled-components and Emotion offer better tooling, auto-completion, and a more modern syntax.

At The Gyld, we use CSS-in-JS to maintain clean, modular, and scalable styles in our projects.

Getting Started with styled-components

styled-components is a popular library for writing CSS-in-JS in React applications. It allows you to define styled components with a tagged template literal syntax. Here’s how to get started with styled-components:

1. Installing styled-components

First, install styled-components and its peer dependency:

npm install styled-components
npm install @types/styled-components

2. Creating Styled Components

Create a styled component using the styled function:

import styled from 'styled-components';

const Button = styled.button`
  background-color: blue;
  color: white;
  font-size: 16px;
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  cursor: pointer;

  &:hover {
    background-color: darkblue;
  }
`;

const App = () => (
  <div>
    <Button>Click Me</Button>
  </div>
);

export default App;

3. Using Props for Dynamic Styles

You can pass props to styled components to create dynamic styles:

const Button = styled.button`
  background-color: ${props => props.primary ? 'blue' : 'gray'};
  color: white;
  font-size: 16px;
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  cursor: pointer;

  &:hover {
    background-color: ${props => props.primary ? 'darkblue' : 'darkgray'};
  }
`;

const App = () => (
  <div>
    <Button primary>Primary Button</Button>
    <Button>Secondary Button</Button>
  </div>
);

Getting Started with Emotion

Emotion is another powerful library for writing CSS-in-JS. It offers a similar API to styled-components but also provides a lower-level API for more flexibility. Here’s how to get started with Emotion:

1. Installing Emotion

First, install Emotion:

npm install @emotion/react @emotion/styled

2. Creating Styled Components

Create a styled component using the styled function from Emotion:

/** @jsxImportSource @emotion/react */
import styled from '@emotion/styled';

const Button = styled.button`
  background-color: blue;
  color: white;
  font-size: 16px;
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  cursor: pointer;

  &:hover {
    background-color: darkblue;
  }
`;

const App = () => (
  <div>
    <Button>Click Me</Button>
  </div>
);

export default App;

3. Using the css Function for Conditional Styles

Emotion also provides a css function for creating conditional styles:

/** @jsxImportSource @emotion/react */
import { css } from '@emotion/react';

const buttonStyle = css`
  background-color: blue;
  color: white;
  font-size: 16px;
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  cursor: pointer;

  &:hover {
    background-color: darkblue;
  }
`;

const primaryStyle = css`
  background-color: blue;
  &:hover {
    background-color: darkblue;
  }
`;

const secondaryStyle = css`
  background-color: gray;
  &:hover {
    background-color: darkgray;
  }
`;

const Button = ({ primary, children }) => (
  <button css={[buttonStyle, primary ? primaryStyle : secondaryStyle]}>
    {children}
  </button>
);

const App = () => (
  <div>
    <Button primary>Primary Button</Button>
    <Button>Secondary Button</Button>
  </div>
);

export default App;

Embracing Best Practices

To make the most out of styled-components and Emotion, follow these best practices:

1. Keep Styles Modular and Reusable

Create small, reusable styled components to keep your codebase clean and maintainable:

const Button = styled.button`
  /* common styles */
`;

const PrimaryButton = styled(Button)`
  background-color: blue;
`;

const SecondaryButton = styled(Button)`
  background-color: gray;
`;

2. Use Theme Providers

Both styled-components and Emotion support theming. Use theme providers to manage global styles and design tokens:

import { ThemeProvider } from 'styled-components';

const theme = {
  colors: {
    primary: 'blue',
    secondary: 'gray',
  },
};

const Button = styled.button`
  background-color: ${props => props.theme.colors.primary};
`;

const App = () => (
  <ThemeProvider theme={theme}>
    <Button>Click Me</Button>
  </ThemeProvider>
);

3. Leverage Global Styles

Use global styles for resetting and applying base styles:

import { createGlobalStyle } from 'styled-components';

const GlobalStyle = createGlobalStyle`
  body {
    margin: 0;
    font-family: Arial, sans-serif;
  }
`;

const App = () => (
  <div>
    <GlobalStyle />
    <Button>Click Me</Button>
  </div>
);

4. Optimize Performance

Minimize re-renders by using memoized styled components and avoiding inline styles:

const Button = styled.button`
  /* styles */
`;

const MemoizedButton = React.memo(Button);

const App = () => (
  <div>
    <MemoizedButton>Click Me</MemoizedButton>
  </div>
);

The Gyld’s Commitment to Modern Styling

At The Gyld, we prioritize modern and maintainable styling practices. By using CSS-in-JS with styled-components and Emotion, we create clean, modular, and scalable styles for our projects.

We continuously review and refine our styling strategies, participate in design reviews, and stay updated with the latest tools and techniques. This commitment to modern styling allows us to deliver visually appealing and maintainable applications.

Conclusion

CSS-in-JS with styled-components and Emotion is essential for modern web development. By understanding and using these tools effectively, you can create dynamic, scoped, and maintainable styles for your applications.

Stay tuned for the next post in our series, where we’ll explore state management with Redux and MobX. Until then, keep learning, stay curious, and embrace change. That’s the Gyld way.