CSS-in-JS

Approach where styles are written directly in JavaScript instead of separate CSS files. Styles are dynamically generated and injected into the DOM. There are several popular libraries for this purpose, such as Styled-components and Emotion, which also has integration with Styled-components syntax.

Example using Styled-components:

import styled from 'styled-components';

const Container = styled.div`
  max-width: 1200px;
  margin: 0 auto;
  padding: ${props => props.compact ? '1rem' : '2rem'};
`;

const Title = styled.h1`
  color: ${({ theme }) => theme.colors.primary};
  font-size: 2rem;
`;

Example using Emotion:

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

const buttonStyles = css`
  padding: 1rem 2rem;
  background: #007bff;
  color: white;
  
  &:hover {
    background: #0056b3;
  }
`;

const Button = () => {
  return <button css={buttonStyles}>Click</button>;
}

Among the main advantages, we can highlight:

• Component-scoped styling
• Dynamic properties
• Easy theming via Context API (React)
• Simple maintenance