How to properly organize styles for a design system?

Question

User interface

For example, there is a button component (Button). He has three sizes.
To change the size of a button, you need to read the width of the user's screen and change the corresponding props (size) or write media requests for different screen widths. What styles are better to use inline, jss and modular css?

Answer 1

We must first of all start from the tasks.
If your project has several button sizes for the same resolution, several styles, then you need to pass the appropriate properties: If the button, for any size value, must adapt to different resolutions, then it makes sense to use media queries. Using styled-components as an example:

const StyledButton = styled.button`
  height: ${props => props.height.sm}px;

  ${media.md`
    height: ${props => props.height.md}px;
  `}

  ${media.lg`
    height: ${props => props.height.lg}px;
  `}
`;

const getHeightProp = size => {
  switch(size) {
    case 'sm':
      return { ... };
    case 'md':
      return {
        sm: 32,
        md: 48,
        lg: 64,
      };
    case 'lg':
      return { ... };
  }
};

const Button = ({ size }) => {
  return <StyledButton height={getHeightProp(size)} />;
}

When using other tools, selectors, modifiers, style objects, etc. are used.