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