Size: a a a

2019 October 02

AK

Artur Kenzhaev in JSNN 🤔 (GSNN)
Pavel 🦇 Malyshev
Да не, я реально не понял, честно
в свелт проблем со стилизацией меньше, чем в реакте, как минимум потому что есть официальное решение) в том числе из коробки есть изоляция стилей, что упрощает верстку, конечно

однако остаются те же открытые вопросы:
- мапинг состояний и стилей. он проще, чем в реакте, но может быть еще проще
- семантика разметки (под семантикой понимается не только валидные html и a11y, но и большая семантичность этой разметки для чтения тем же дизайнером и тд)
- проведение сложных дизайн-экспериментов (с полным перестроением лэйаутов, и прочее),  нетривиальная стилизация, зависимая от рантайма (от вычислений, контекстов и тд), при этом все еще со статически извлекаемым цсс
- стилизация на более гибком и глубоком уровне, чем переменные темы
- эффективное применение стилей, использование композиции классов без влияния на разметку, применение атомик-цсс опять же на уровне стилизации, без хардкода разметки

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

AK

Artur Kenzhaev in JSNN 🤔 (GSNN)
собственно, есть реализация решадоу под свелт, но она экспериментальная, и пока руки не доходят ее довести до ума
источник

AK

Artur Kenzhaev in JSNN 🤔 (GSNN)
Artur Kenzhaev
собственно, есть реализация решадоу под свелт, но она экспериментальная, и пока руки не доходят ее довести до ума
но вот тут есть базовый пример

https://codesandbox.io/s/reshadowsvelte-bup1c?module=%2Fsrc%2FApp%2Findex.svelte
источник

PM

Pavel 🦇 Malyshev in JSNN 🤔 (GSNN)
Artur Kenzhaev
в свелт проблем со стилизацией меньше, чем в реакте, как минимум потому что есть официальное решение) в том числе из коробки есть изоляция стилей, что упрощает верстку, конечно

однако остаются те же открытые вопросы:
- мапинг состояний и стилей. он проще, чем в реакте, но может быть еще проще
- семантика разметки (под семантикой понимается не только валидные html и a11y, но и большая семантичность этой разметки для чтения тем же дизайнером и тд)
- проведение сложных дизайн-экспериментов (с полным перестроением лэйаутов, и прочее),  нетривиальная стилизация, зависимая от рантайма (от вычислений, контекстов и тд), при этом все еще со статически извлекаемым цсс
- стилизация на более гибком и глубоком уровне, чем переменные темы
- эффективное применение стилей, использование композиции классов без влияния на разметку, применение атомик-цсс опять же на уровне стилизации, без хардкода разметки

это первое, что пришло в голову, а так многие озвученные проблемы в моих последних докладах к свелту применимы в том числе, хоть и в меньшей степени, чем к реакту
Первое понял,это как css-in-js, только не в рантайме так? Это здраво.
источник

AK

Artur Kenzhaev in JSNN 🤔 (GSNN)
Pavel 🦇 Malyshev
Первое понял,это как css-in-js, только не в рантайме так? Это здраво.
да
источник

AK

Artur Kenzhaev in JSNN 🤔 (GSNN)
можно использовать как css in js, так и css-modules way, оба compile-time
источник

PM

Pavel 🦇 Malyshev in JSNN 🤔 (GSNN)
Artur Kenzhaev
в свелт проблем со стилизацией меньше, чем в реакте, как минимум потому что есть официальное решение) в том числе из коробки есть изоляция стилей, что упрощает верстку, конечно

однако остаются те же открытые вопросы:
- мапинг состояний и стилей. он проще, чем в реакте, но может быть еще проще
- семантика разметки (под семантикой понимается не только валидные html и a11y, но и большая семантичность этой разметки для чтения тем же дизайнером и тд)
- проведение сложных дизайн-экспериментов (с полным перестроением лэйаутов, и прочее),  нетривиальная стилизация, зависимая от рантайма (от вычислений, контекстов и тд), при этом все еще со статически извлекаемым цсс
- стилизация на более гибком и глубоком уровне, чем переменные темы
- эффективное применение стилей, использование композиции классов без влияния на разметку, применение атомик-цсс опять же на уровне стилизации, без хардкода разметки

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

AK

Artur Kenzhaev in JSNN 🤔 (GSNN)
нет, просто вместо <div class="container">... используешь <container />

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

PM

Pavel 🦇 Malyshev in JSNN 🤔 (GSNN)
Artur Kenzhaev
в свелт проблем со стилизацией меньше, чем в реакте, как минимум потому что есть официальное решение) в том числе из коробки есть изоляция стилей, что упрощает верстку, конечно

однако остаются те же открытые вопросы:
- мапинг состояний и стилей. он проще, чем в реакте, но может быть еще проще
- семантика разметки (под семантикой понимается не только валидные html и a11y, но и большая семантичность этой разметки для чтения тем же дизайнером и тд)
- проведение сложных дизайн-экспериментов (с полным перестроением лэйаутов, и прочее),  нетривиальная стилизация, зависимая от рантайма (от вычислений, контекстов и тд), при этом все еще со статически извлекаемым цсс
- стилизация на более гибком и глубоком уровне, чем переменные темы
- эффективное применение стилей, использование композиции классов без влияния на разметку, применение атомик-цсс опять же на уровне стилизации, без хардкода разметки

это первое, что пришло в голову, а так многие озвученные проблемы в моих последних докладах к свелту применимы в том числе, хоть и в меньшей степени, чем к реакту
Для 3-го в свелт все есть, если речь именно об экспериментах. 4- слишком абстрактно; 5 -это типа директивы @apply из Tailwind?
источник

AK

Artur Kenzhaev in JSNN 🤔 (GSNN)
то есть вместо  <div class="container _size_{size} ..." />

определяешь элемент <container :size="s" aria-hidden />

и матчишь стили на

container[aria-hidden] { ...
container[size="s"] { ...
источник

PM

Pavel 🦇 Malyshev in JSNN 🤔 (GSNN)
Artur Kenzhaev
нет, просто вместо <div class="container">... используешь <container />

оказывается, что эта ментальная модель сильно становится проще, особенно когда начинается работа с состояниями не через классы, а атрибуты
Так это же выглядит как компонент уже. Путаницы нет?
источник

AK

Artur Kenzhaev in JSNN 🤔 (GSNN)
компоненты ведь с заглавной?
источник

PM

Pavel 🦇 Malyshev in JSNN 🤔 (GSNN)
Artur Kenzhaev
компоненты ведь с заглавной?
Да, но это веб компонент просто)
источник

PM

Pavel 🦇 Malyshev in JSNN 🤔 (GSNN)
Может я их в проекте юзаю
источник

AK

Artur Kenzhaev in JSNN 🤔 (GSNN)
Pavel 🦇 Malyshev
Для 3-го в свелт все есть, если речь именно об экспериментах. 4- слишком абстрактно; 5 -это типа директивы @apply из Tailwind?
5 - типа того, только @apply из Tailwind - миксины, которые соответственно инлайнят свой код в правило

в данном случае это остается композицией классов
источник

PM

Pavel 🦇 Malyshev in JSNN 🤔 (GSNN)
Недавно кстати был такой опыт
источник

AK

Artur Kenzhaev in JSNN 🤔 (GSNN)
Pavel 🦇 Malyshev
Да, но это веб компонент просто)
веб-компонент через дефис обязательно
источник

PM

Pavel 🦇 Malyshev in JSNN 🤔 (GSNN)
Artur Kenzhaev
веб-компонент через дефис обязательно
Это все понятно, то имхо уже каша:

<container>
  <ListView>
      <list-item>
           Item 1
      </list-item>
   </ListView>
</container>
источник

PM

Pavel 🦇 Malyshev in JSNN 🤔 (GSNN)
Ахтунг прям
источник

PM

Pavel 🦇 Malyshev in JSNN 🤔 (GSNN)
А когда появится новый html-тег придётся приложение переписать?
источник