Одна из самых больших проблем, с которыми я сталкиваюсь при работе с React, - это стилизация. Тенденции менялись снова и снова, но у меня никогда не было ощущения, что библиотеки действительно решают проблему стилизации.

Давайте посмотрим на очень популярную библиотеку css-in-js, styled-components.

const Button = styled.a`
  border-radius: 3px;
  ${props => props.primary && css`
    background: ${theme.primary};
  `}
  ${props => props.size === 'small' && css`
    font-size: 12px;
  `}
`;

Хорошо, давайте немного уберем это:

Button {
  border-radius: 3px;

  ::primary {
    background: $primary;
  }
  ::size {
    ::small {
      font-size: 12px;
    }
  }
}

Если вам нравится синтаксис, хорошие новости: вы можете начать использовать его прямо сейчас, он имеет открытый исходный код и называется симпатичные компоненты.

Почему?

Нужна ли нам дополнительная логика для сопоставления нашего компонента со стилем наведения только тогда, когда он будет зависать?

a {
  &:hover {
    text-decoration: underline;
  }
}

Конечно, мы этого не делаем, потому что мы уже признаем, что запись :hover сделает его условно стилизованным на основе состояния нашего элемента.

Идея здесь аналогична: сделать props частью этого состояния прямо внутри нашего объявления стиля. Другими словами, красивые компоненты делают для вас неявную связь между вашим компонентом и его определением стиля.

Функции

  • Используйте любые свойства компонентов в качестве селекторов стилей, используя знак двойного двоеточия.
  • Используйте синтаксис вложенных стилей Sass и его подслащенный знак &
  • Создавайте переменные, позже доступные в каждом определении стиля
  • Прекратите зацикливаться на названиях классов.
    Компоненты Pretty автоматически генерируют удобные для чтения:
    .Button, .Button__primary, .Button__size--small

Как?

Теперь вы можете задаться вопросом, как вы можете написать это на JavaScript. Ну, ты не можешь.

Чтобы использовать таблицы стилей на основе Prop (файлы .pss), вы можете быстро настроить Pretty Webpack loader, который сделает всю работу за вас. Это действительно вопрос нескольких строк, которые нужно вставить в файл конфигурации веб-пакета.

Если у вас есть идеи, предложения, отзывы… поделитесь своим мнением ниже или на github. Я действительно хочу, чтобы компоненты Pretty могли развиваться благодаря вам.
Я считаю, что это может быть полезно для многих разработчиков.

Спасибо за ваше время! ⚡️