Как правильно организовать стили для дизайн-системы?

Question

[Владимир Голубь]

К примеру есть компонент кнопки (Button). У него три размера.
Для изменения размера кнопки нужно считывать ширину экрана пользователя и менять соответствующий props (size) или прописывать media запросы для разной ширины экрана. Какие стили лучше использовать inline, jss и модульный css ?

Comments

[UncleMisha]

Всегда использовал @media запросы и проблем у меня не было.

Answer 1

[Антон Спирин]

Надо в первую очередь в отталкиваться от задач.
Если в вашем проекте несколько размеров кнопок для одного разрешения, несколько стилей, то необходимо передавать соответствующие свойства:
<Button size="sm" type="outline" color="danger" />

Если кнопка при любом значении size должна адаптироваться под разные разрешения, то имеет смысл использовать медиазапросы.

На примере styled-components:

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)} />;
}

При использовании других инструментов используют селекторы, модификаторы, объекты стилей и тп.

Comments

[Владимир Голубь]

Можно ли использовать radium на продакте ? У него странная версия 0.25.1.

[Антон Спирин]

Владимир Голубь, radium не очень удобен(hover и прочее) и очень медленный. Использовать то можно, но я второй раз бы не стал использовать.

[Павел Антонов]

Поддерживаю ответ Антона, все правильно говорит. А по поводу стилей я рекомендую styled-components и styled-system удобно все до безобразия. Сперва непривычно, но после привыкания все пишется очень быстро и качественно. Еще emotion говорят не плох, я лично не пользовал, но очень хочу потестить в следующих проектах.

ЗЫ: оооочень рекомендую попробовать storybook для разработки дизайн систем, если еще не используете. Это просто офигенный экспириенс

[Владимир Голубь]

Антон Спирин, Павел Антонов,

Как упростить компонент заголовка Title, inline стили обязательное условие.
Заголовок может быть 1-5 уровня. У есть 4 разрешения экрана.

import React, { Component } from 'react';
import { fontsSizes, fontsFamily, lineHeights, colors } from "../../params";

class Title extends Component {
    constructor(props) {
        super(props);
    };
    
    getStyles = (level, screenSize) => {

        this._calcStyles = {};

        switch (screenSize) {
            case 'xs':
               ...
            case 's':
               ...
            case 'm':
                ...
            case 'l':
                if (level === '1') {
                    this._calcStyles = {
                        lineHeight: lineHeights.xxxxl,
                        fontSize: fontsSizes.xxxxl
                    }
                }
                if (level === '2') {
                    this._calcStyles = {
                        lineHeight: lineHeights.xxxl,
                        fontSize: fontsSizes.xxxl
                    }
                }
                if (level === '3') {
                    this._calcStyles = {
                        lineHeight: lineHeights.xxl,
                        fontSize: fontsSizes.xxl
                    }
                }
                if (level === '4') {
                    this._calcStyles = {
                        lineHeight: lineHeights.xl,
                        fontSize: fontsSizes.xl
                    }
                }
                if (level === '5') {
                    this._calcStyles = {
                        lineHeight: lineHeights.l,
                        fontSize: fontsSizes.l
                    }
                }

            return {
                color: colors.black,
                fontsFamily: fontsFamily.main,
                ...this._calcStyles
            };
        }
    };

    render() {

        let {level, title, screenSize} = this.props;

        let titleElement = null;

        switch (level) {
            case '1':
                titleElement = <h1 style={ this.getStyles(level, screenSize) }>{ title }</h1>;
                break;
            case '2':
                titleElement = <h2 style={ this.getStyles(level, screenSize) }>{ title }</h2>;
                break;
            case '3':
                titleElement = <h3 style={ this.getStyles(level, screenSize) }>{ title }</h3>;
                break;
            case '4':
                titleElement = <h4 style={ this.getStyles(level, screenSize) }>{ title }</h4>;
                break;
            case '5':
                titleElement = <h5 style={ this.getStyles(level, screenSize) }>{ title }</h5>;
        }

        return titleElement;
    }
}

export default Title;

[Антон Спирин]

Владимир Голубь, с инлайновыми стилями проще заюзать какой-нибудь велосипед, который будет нужные данные под брейкпоинты подставлять или написать свой, чтобы не дублировать одно и то же во всех компонентах.

Что-то вроде этого:

import { bicycle } from '@app-utils/my-bicycle';

const Title = ({ children }) =>  (
  <h4 style={bicycle(styles)}>{children}</h4>
);

const styles = {
  fontSize: '18px',
  md: {
    fontSize: '24px',
  },
  lg: {
    fontSize: '32px',
  },
};