Size: a a a

2021 March 17

КС

Кирилл Спасибович... in Svelte [svelt]
Dan Kozlov
Но ты описывал несколько другой кейс изначально, что у тебя были конфликты именно с общими стилями страницы — не изолированными, очевидно. Тут у тебя проблема с передачей класса между компонентами с изоляцией на поддерево.
Если убрать, например, main из селектора, то ожидаемо никаких WTF не будет.

Но кейс действительно забавный.

В остальном ситуация-то простая. Все почему-то пытаются юзать свелт не так, как мейнтейнеры предлагают и, когда обжигаются, винят почему-то инструмент.
проясним, они предлагают оборачивать всё в доп дивы чтобы передать позиционирование, либо делать ведро css переменных под переопределение позиционирования / цвета и тд ?
источник

DK

Dan Kozlov in Svelte [svelt]
Я делаю так:
если надо переопределить стили ребенка, я использую глобал, если там таких правил нет вообще (так что это не переопределение, а дополнение скорее); в остальных случаях — да, переменные. Они для меня работают как внешний интерфейс на стилизацию от компонента, он по сути сам решает что и как использовать и к чему применять.

Про марджины мы уже сто раз говорили, что у компонентов их быть не должно в принципе. Менять позиционирование — ух, в жизни не думал, что такое нужно. Цвета отлично ложатся в цсс-переменные, да.
источник

КС

Кирилл Спасибович... in Svelte [svelt]
Dan Kozlov
Я делаю так:
если надо переопределить стили ребенка, я использую глобал, если там таких правил нет вообще (так что это не переопределение, а дополнение скорее); в остальных случаях — да, переменные. Они для меня работают как внешний интерфейс на стилизацию от компонента, он по сути сам решает что и как использовать и к чему применять.

Про марджины мы уже сто раз говорили, что у компонентов их быть не должно в принципе. Менять позиционирование — ух, в жизни не думал, что такое нужно. Цвета отлично ложатся в цсс-переменные, да.
ну нет их там, а в родителе надо задать - оборачивать в див ?
источник

DK

Dan Kozlov in Svelte [svelt]
Кирилл Спасибович
ну нет их там, а в родителе надо задать - оборачивать в див ?
А добавить мешает что именно?
источник

КС

Кирилл Спасибович... in Svelte [svelt]
добавить через что, локально глобальный класс, переменную, див обёртку ?
источник

DK

Dan Kozlov in Svelte [svelt]
Кирилл Спасибович
добавить через что, локально глобальный класс, переменную, див обёртку ?
Ты про переменные или что?
источник

КС

Кирилл Спасибович... in Svelte [svelt]
я про маржины всякие, как их добавлять ?
источник

DK

Dan Kozlov in Svelte [svelt]
Кирилл Спасибович
я про маржины всякие, как их добавлять ?
Оборачивать компонент и добавлять обертке марджины.
источник

AP

Alexander Ponomarev in Svelte [svelt]
замкнутый круг какой-то, как обёртка то маржин в компонент передаст
источник

DK

Dan Kozlov in Svelte [svelt]
Alexander Ponomarev
замкнутый круг какой-то, как обёртка то маржин в компонент передаст
Обертка их установит. У компонента нет вообще марджинов.
источник

AP

Alexander Ponomarev in Svelte [svelt]
как она их установит
источник

DK

Dan Kozlov in Svelte [svelt]
Alexander Ponomarev
как она их установит
Я не понимаю твой вопрос. Установит, ээ, классом?

Я не за ноутом, поэтому могу только так.

<script>
 import Btn from './Btn.svelte';
</script>

<div class='wrapper'>
 <Btn />
</div>

<style>
 .wrapper {
   margin: 5em;
 }
</style>
источник

11

1 1 in Svelte [svelt]
Dan Kozlov
Но ты описывал несколько другой кейс изначально, что у тебя были конфликты именно с общими стилями страницы — не изолированными, очевидно. Тут у тебя проблема с передачей класса между компонентами с изоляцией на поддерево.
Если убрать, например, main из селектора, то ожидаемо никаких WTF не будет.

Но кейс действительно забавный.

В остальном ситуация-то простая. Все почему-то пытаются юзать свелт не так, как мейнтейнеры предлагают и, когда обжигаются, винят почему-то инструмент.
я щепетильно отношусь к обвинениям в передёргивании.  вот сочинил пример с внешней цсс-кой.  
https://svelte.dev/repl/d8c56411d20e41f1bc30217a195b0fa7?version=3.35.0
источник

AP

Alexander Ponomarev in Svelte [svelt]
Dan Kozlov
Я не понимаю твой вопрос. Установит, ээ, классом?

Я не за ноутом, поэтому могу только так.

<script>
 import Btn from './Btn.svelte';
</script>

<div class='wrapper'>
 <Btn />
</div>

<style>
 .wrapper {
   margin: 5em;
 }
</style>
ну да круто делать лишние элементы чтобы давать марджины, именно так и задумывалось видимо и пофигу что внутренний элемент компонента мог иметь flex: none или другое значение, мы его просто сломаем
источник

DK

Dan Kozlov in Svelte [svelt]
Alexander Ponomarev
ну да круто делать лишние элементы чтобы давать марджины, именно так и задумывалось видимо и пофигу что внутренний элемент компонента мог иметь flex: none или другое значение, мы его просто сломаем
В чем проблема «плодить элементы»? А ты плодишь классы, когда кидаешь их вниз.

Очень хочется оптимизации — передавай в компонент через пропс название ютилити-классов, типа mt-3 у бульмы.

В каких вменяемых, а не высосанных из пальца обстоятельствах имеет смысл на рутовом элементе компонента-ребенка ставить flex-правило? Ребенок же вообще об этом знать не должен.
источник

DK

Dan Kozlov in Svelte [svelt]
1 1
я щепетильно отношусь к обвинениям в передёргивании.  вот сочинил пример с внешней цсс-кой.  
https://svelte.dev/repl/d8c56411d20e41f1bc30217a195b0fa7?version=3.35.0
Я не обвинял, ну. Я даже признал, что кейс прикольный.

Новый пример тоже прикольный. Я посмотрю на него завтра свежим взглядом.
источник

AP

Alexander Ponomarev in Svelte [svelt]
Dan Kozlov
В чем проблема «плодить элементы»? А ты плодишь классы, когда кидаешь их вниз.

Очень хочется оптимизации — передавай в компонент через пропс название ютилити-классов, типа mt-3 у бульмы.

В каких вменяемых, а не высосанных из пальца обстоятельствах имеет смысл на рутовом элементе компонента-ребенка ставить flex-правило? Ребенок же вообще об этом знать не должен.
если ребёнок не будет знать о флексе то ты его будешь задавать сверху и тогда твой метод с доп элементом не сможет его задать вообще)
источник

AP

Alexander Ponomarev in Svelte [svelt]
потому что его надо будет применять на конкретный элемент а не на новый
источник

AP

Alexander Ponomarev in Svelte [svelt]
точно так же и с min-width: 0 который имеет большое значение для флекса
источник

AP

Alexander Ponomarev in Svelte [svelt]
так что я хз зачем городить огород который отлично решался обычным пробросом класса
источник