Size: a a a

2019 October 03

AK

Artur Kenzhaev in JSNN 🤔 (GSNN)
Pavel 🦇 Malyshev
мне кажется что button._size_s также гарантирует то что он будет применен к <button class="_size_s"> ))
вот смотри

ты ведь не пишешь button[disabled] { ... } на свелт как .__button._disabled { ... }
и потом <button disabled class="__button" class:_disabled={disabled} />
источник

AK

Artur Kenzhaev in JSNN 🤔 (GSNN)
потому что это лишняя абстракция и усложнение
источник

PM

Pavel 🦇 Malyshev in JSNN 🤔 (GSNN)
Artur Kenzhaev
вот смотри

ты ведь не пишешь button[disabled] { ... } на свелт как .__button._disabled { ... }
и потом <button disabled class="__button" class:_disabled={disabled} />
да, пожалуй, использую просто аттрибут
источник

PM

Pavel 🦇 Malyshev in JSNN 🤔 (GSNN)
класс он сам добавит)
источник

AK

Artur Kenzhaev in JSNN 🤔 (GSNN)
ну вот, и здесь то же самое. просто у кнопки нет нативного атрибута size, но есть этот атрибут в проектировании
источник

PM

Pavel 🦇 Malyshev in JSNN 🤔 (GSNN)
Artur Kenzhaev
ну вот, и здесь то же самое. просто у кнопки нет нативного атрибута size, но есть этот атрибут в проектировании
понять бы чем класс плох там где нет аттрибута)
источник

PM

Pavel 🦇 Malyshev in JSNN 🤔 (GSNN)
или например data-атрибуты
источник

AK

Artur Kenzhaev in JSNN 🤔 (GSNN)
тем, что он требует конвенций
источник

AK

Artur Kenzhaev in JSNN 🤔 (GSNN)
я не могу гарантировать, что все классы для модификаторов будут написаны как ._{name}_{value}
источник

PM

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

PM

Pavel 🦇 Malyshev in JSNN 🤔 (GSNN)
компоненты обычно до 200 строк кода вместе со стилями. там очень легко выходит следить за конвеншенами. компоненты изолированные и не пересекаются, поэтому можно в разных компонентах писать по разному, если хочется или команда не синхронизирована
источник

AK

Artur Kenzhaev in JSNN 🤔 (GSNN)
для небольшой команды договориться и ревьюить друг друга - это действительно не так трудно. для команды из 100+ фронтов любые такие детали масштабируются до ужасных состояний
а если нет четких правил, то тяжело делать инструменты вокруг этого: оценивать dead code, реиспользовать код разных команд, стилизовать опять же для экспериментов все, что потребуется и так далее
источник

AK

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

PM

Pavel 🦇 Malyshev in JSNN 🤔 (GSNN)
Artur Kenzhaev
для небольшой команды договориться и ревьюить друг друга - это действительно не так трудно. для команды из 100+ фронтов любые такие детали масштабируются до ужасных состояний
а если нет четких правил, то тяжело делать инструменты вокруг этого: оценивать dead code, реиспользовать код разных команд, стилизовать опять же для экспериментов все, что потребуется и так далее
если каждый работает над своим компонентом, то можно и не следить. хотя лучше конечно сделить. dead code стилей итак вырезается в свелт. так как компоненты изолированные для переиспользованиия не надо разбираться в их кишках, только публичном апи
источник

PM

Pavel 🦇 Malyshev in JSNN 🤔 (GSNN)
про эксперименты в рантайме да, тут вопрос интересный, но там можно и нахачить, раз это временная штука
источник

AK

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

AK

Artur Kenzhaev in JSNN 🤔 (GSNN)
самый банальный пример: https://reshadow.dev/advanced/static-analysis
источник

PM

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


.my-exp-name :global(button._size_m) { ... }
источник

PM

Pavel 🦇 Malyshev in JSNN 🤔 (GSNN)
и все кнопки ниже по иерархии от .my-exp-name примут эти стили
источник

PM

Pavel 🦇 Malyshev in JSNN 🤔 (GSNN)
все остальные кнопки при этом останутся как раньше
источник