Лучше, быстрее, мощнее: styled-components v4

[Fengol]

Скажите, а styled-components умеет выносить стили в файлы?
Просто я слышал, что процессорное время, которое значительно повышается за счет добавления минимум одной функции на каждый компонент, стоит не так дорого, как трафик, который будет значительно увеличен за счет инлайн-стилей. Такой аргумент приводя в пользу использования graphql, который за счет запросов минимизирует «ну очень дорогой трафик». Выходит что модный styled-components сводит на нет работу модного graphql? Если для facebook так дорого лишняя тысяча слов в json, то представьте сколько будет лишних инлайн-слов в тысячи компонентов состоящих из десятка компонентов? Миллионы? Получается, что если зайти по ссылке на какой-то лист, то за один только раз лишних стилей нагрузится так много, что json столько и за месяц не нагрузишь?

[Fengol]

А ещё без них и работать наверное будет раз в сто быстрее, что сделает комфортную работу вэб-приложений на мобилках?

[ElianL]

styled-component работает не через inline стили, а генерит css-классы которые и прокидывает в элементы

[Fengol]

не знал. а классы он генерирует как? Для каждого компонента свой? Ведь если бы он генерировал общие классы, то это было бы тоже самое css, то есть инкапсуляции бы не было. И отсюда вопрос — стили он генерирует для каждого класса по отдельности или для множество классов один стиль?

[Iskin]

Styled-components не умеет. Но есть более крутой вариант css-literal-loader, который как раз выносит github.com/4Catalyzer/css-literal-loader

[Smokin]

Говорится про рост производительности, а на сколько это медленее обычного импорта стилей или css modules?

[kalyukdo]

Не нужно такой треш переводить, пожалуйста, столько боли было испытано после того как попал в проект с этим чудом, это реально треш, наследование напрочь убивается, кастомизацией и гибкостью даже не пахнет, не говоря о том сколько ресурсов он жрет, нет возможности закешировать стили в продакшене, короче опыт был очень печальный, ушли на css-modules и настало счастье

[ElianL]

если вам что-то не нужно, не значит что это не нужно другим.

Это отличный инструмент, со своими плюсами и минусами

[kalyukdo]

Буду очень рад, если вы расскажите о своем положительном опыте работы с этим инструментом, или хотябы покажите пример как можно красиво сделать переопределение стилей при добавлении модификатора

[13luck]

Пример с модификатором

import { oneOf } from 'prop-types';
import styled from 'styled-components';

export const Heading = styled.div`
    font-weight: 400;
    font-size: ${
        ({ $size }) => ({
            1: '32px',
            2: '28px',
            3: '24px',
            4: '20px',
            5: '16px',
            6: '14px'
        })[$size]
    };  
`;
Heading.propTypes = {
    $size: oneOf('1 2 3 4 5 6'.split(' '))
};
Heading.defaultProps = {
    $size: '1'
};

// usage
<Heading as={h1} $size="1">Title</Heading>

Минусы:

• раздуваются стили, исправление ожидается (можно решить временно с помощью csso минификации { restructure: true })
• некоторые свойства пробрасываются в html, что раздует разметку при ssr (можно решить соглашением именования пропертей, например $size или _size вместо size, или другое название проперти не из whitelist)

[kalyukdo]

еще один жирный минус, теперь верстальщик должен знать JS

[Focushift]

В проекте для работы со стилями используется эта штука, теперь надо сделать переключение контрастной темы. Как это реализовать благодаря этой штуке непонятно.

[Voronar]

Динамическая тема в помощь.

[kalyukdo]

да, согласен это инструмент, но этот инструмент который изобрели с целью дискриминации FRONTEND, так как очень много людей хватают все новое, не разобравшись в том, что это и пытаются на таком строить большие проекты, а больших проектах поддержка этого инструмента стоит очень много денег

[Voronar]

Покажите ваш пример, где убивается наследование?
Что вы подразумеваете под гибкостью, конкретный пример можно?

[kalyukdo]

function A1 { return <Div><Span>text</Span></Div>}

теперь вызываем компонент
<A1 /> и в одном случае нам нужно сделать text красным,
а во втором сделать вокруг него падинги, и добавить бэкграунд

в класcическом исполнениии я просто напишу />

при использовании стайлета, у меня просто не будет доступа к классам которые есть у компонента и я не смогу перебить их так как они будут инлайном

[Voronar]

const Div = styled.div`
  margin-bottom: 20px;
`;
const Span = styled.span``;

const A1 = () => (
  <Div>
    <Span>text</Span>
  </Div>
);

const Mode1 = styled.div`
  ${Span} {
    color: red;
  }
`;
const Mode2 = styled.div`
  ${Span} {
    padding: 16px;
    background: green;
  }
`;

const App = () => (
  <div>
    <Mode1>
      <A1 />
    </Mode1>
    <Mode2>
      <A1 />
    </Mode2>
  </div>
);

[kalyukdo]

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

[Voronar]

А покажи свой нормальный код на обычном css, я тебе его переведу в styled и посмотрим на сколько всё плохо в styled.

[kalyukdo]

ты меня сейчас побъешь )) но вот пример

import * as classNames from 'classnames';
import * as React from 'react';
import { Link } from 'react-router-dom';
import { Icon } from '../icon';
import * as styles from './logo.scss';
import logo from '../../svg/logo.svg';
import logoIcon from '../../svg/logo-icon.svg';
import { Responsive } from '../responsive';

interface IProps {
  className?: string;
}

export function Logo({ className }: IProps) {
  return (
    <>
      <Responsive type={['mobile']}>
        <Link
          to='/'
          className={classNames(styles.logo, styles.text, className)}
        >
          <Icon svg={logo} />
        </Link>
      </Responsive>
      <Responsive type={['desktop', 'tablet']}>
        <Link to='/' className={classNames(styles.logo, styles.icon, className)}>
          <Icon svg={logoIcon} />
        </Link>
      </Responsive>
    </>
  );
}

@import '../../variables';

.logo {
  
  &.text {
    svg {
      height: 2rem;
      max-width: 6rem;
      width: inherit;
    }
  }

  &.icon{
    position: relative;
    background: $red;
    height: 4rem;
    line-height: 4rem;
    width: 4rem;
    text-align: center;
    i {
      height: 2rem;
      width: 2rem;
    }
  }
  svg {
     fill: $white;
  }
}

ну и само сабой сетка

// Container widths
//
// Set the container width, and override it for fixed navbars in media queries.

@if $enable-grid-classes {
  .container {
    @include make-container();
    @include make-container-max-widths();
  }
}

// Fluid container
//
// Utilizes the mixin meant for fixed width containers, but with 100% width for
// fluid, full width layouts.

@if $enable-grid-classes {
  .container-fluid {
    @include make-container();
  }
}

// Row
//
// Rows contain and clear the floats of your columns.

@if $enable-grid-classes {
  .row {
    @include make-row();
  }

  // Remove the negative margin from default .row, then the horizontal padding
  // from all immediate children columns (to prevent runaway style inheritance).
  .no-gutters {
    margin-right: 0;
    margin-left: 0;

    > .col,
    > [class*="col-"] {
      padding-right: 0;
      padding-left: 0;
    }
  }
}

// Columns
//
// Common styles for small and large grid columns

@if $enable-grid-classes {
  @include make-grid-columns();
}

[Finesse]

Действительно ли styled-components так хорош в реальных крупных проектах? Например, если сравнить с использованием CSS-препроцессора (Stylus, SASS и т.п.) отдельно от React-кода.