Comments 21
Скажите, а styled-components умеет выносить стили в файлы?
Просто я слышал, что процессорное время, которое значительно повышается за счет добавления минимум одной функции на каждый компонент, стоит не так дорого, как трафик, который будет значительно увеличен за счет инлайн-стилей. Такой аргумент приводя в пользу использования graphql, который за счет запросов минимизирует «ну очень дорогой трафик». Выходит что модный styled-components сводит на нет работу модного graphql? Если для facebook так дорого лишняя тысяча слов в json, то представьте сколько будет лишних инлайн-слов в тысячи компонентов состоящих из десятка компонентов? Миллионы? Получается, что если зайти по ссылке на какой-то лист, то за один только раз лишних стилей нагрузится так много, что json столько и за месяц не нагрузишь?
Просто я слышал, что процессорное время, которое значительно повышается за счет добавления минимум одной функции на каждый компонент, стоит не так дорого, как трафик, который будет значительно увеличен за счет инлайн-стилей. Такой аргумент приводя в пользу использования graphql, который за счет запросов минимизирует «ну очень дорогой трафик». Выходит что модный styled-components сводит на нет работу модного graphql? Если для facebook так дорого лишняя тысяча слов в json, то представьте сколько будет лишних инлайн-слов в тысячи компонентов состоящих из десятка компонентов? Миллионы? Получается, что если зайти по ссылке на какой-то лист, то за один только раз лишних стилей нагрузится так много, что json столько и за месяц не нагрузишь?
А ещё без них и работать наверное будет раз в сто быстрее, что сделает комфортную работу вэб-приложений на мобилках?
styled-component работает не через inline стили, а генерит css-классы которые и прокидывает в элементы
Styled-components не умеет. Но есть более крутой вариант css-literal-loader, который как раз выносит github.com/4Catalyzer/css-literal-loader
Говорится про рост производительности, а на сколько это медленее обычного импорта стилей или css modules?
Не нужно такой треш переводить, пожалуйста, столько боли было испытано после того как попал в проект с этим чудом, это реально треш, наследование напрочь убивается, кастомизацией и гибкостью даже не пахнет, не говоря о том сколько ресурсов он жрет, нет возможности закешировать стили в продакшене, короче опыт был очень печальный, ушли на css-modules и настало счастье
если вам что-то не нужно, не значит что это не нужно другим.
Это отличный инструмент, со своими плюсами и минусами
Это отличный инструмент, со своими плюсами и минусами
Буду очень рад, если вы расскажите о своем положительном опыте работы с этим инструментом, или хотябы покажите пример как можно красиво сделать переопределение стилей при добавлении модификатора
Пример с модификатором
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)
В проекте для работы со стилями используется эта штука, теперь надо сделать переключение контрастной темы. Как это реализовать благодаря этой штуке непонятно.
да, согласен это инструмент, но этот инструмент который изобрели с целью дискриминации FRONTEND, так как очень много людей хватают все новое, не разобравшись в том, что это и пытаются на таком строить большие проекты, а больших проектах поддержка этого инструмента стоит очень много денег
Покажите ваш пример, где убивается наследование?
Что вы подразумеваете под гибкостью, конкретный пример можно?
Что вы подразумеваете под гибкостью, конкретный пример можно?
function A1 { return <Div><Span>text</Span></Div>}
теперь вызываем компонент
<A1 /> и в одном случае нам нужно сделать text красным,
а во втором сделать вокруг него падинги, и добавить бэкграунд
в класcическом исполнениии я просто напишу />
при использовании стайлета, у меня просто не будет доступа к классам которые есть у компонента и я не смогу перебить их так как они будут инлайном
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>
);
скажу честно такого не видел, и не делал, мне кажется это реально жесть получается, в Вашем случае родительский компонент должен знать всегда что находится внутри дочерних компонентов, это уже больше на любителя, да с наследованием вопрос решили, но мне кажется это очень большой костыль из травмпункта.
А покажи свой нормальный код на обычном css, я тебе его переведу в styled и посмотрим на сколько всё плохо в styled.
ты меня сейчас побъешь )) но вот пример
ну и само сабой сетка
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();
}
Действительно ли styled-components так хорош в реальных крупных проектах? Например, если сравнить с использованием CSS-препроцессора (Stylus, SASS и т.п.) отдельно от React-кода.
Sign up to leave a comment.
Лучше, быстрее, мощнее: styled-components v4