Телеграмм чат группы js_noobs

2020 July 18

S

Sm•ok 😈✔️ in JavaScript Noobs — сообщество новичков

Так же как стайледы

источник

20:59пожаловаться #1

S

Sm•ok 😈✔️ in JavaScript Noobs — сообщество новичков

Переслано от Sm•ok 😈✔️

<Button
className={styles.button}
data-kind={kind}
data-size={size}
/>

// Css module next to btn file

.button {default styles}

.button {
&[data-kind="ghost"] {ghost styles}

&[data-kind="primary"] { primary styles}

&[data-kind="danger"] { danger styles}
}

.button {
&[data-size="......] {}
}

источник

21:00пожаловаться #2

S

Sm•ok 😈✔️ in JavaScript Noobs — сообщество новичков

Дата атрибуты служат для модификации

источник

21:00пожаловаться #3

S

Sm•ok 😈✔️ in JavaScript Noobs — сообщество новичков

Как пропсы в стайледах

источник

21:00пожаловаться #4

S

Sm•ok 😈✔️ in JavaScript Noobs — сообщество новичков

И в итоге он после Билда генерит класс c хешем

источник

21:01пожаловаться #5

S

Sm•ok 😈✔️ in JavaScript Noobs — сообщество новичков

Как в стайледах, но без рантайма

источник

21:01пожаловаться #6

S

Sm•ok 😈✔️ in JavaScript Noobs — сообщество новичков

Konstantin Sedykh

наверное эмоджи какой-нибудь убогий или типа того?

Что за эмоджи?

источник

21:02пожаловаться #7

S

Sm•ok 😈✔️ in JavaScript Noobs — сообщество новичков

styled components

источник

21:02пожаловаться #8

KS

Konstantin Sedykh in JavaScript Noobs — сообщество новичков

Sm•ok 😈✔️

Что за эмоджи?

https://github.com/emotion-js/emotion

GitHub

emotion-js/emotion

👩‍🎤 CSS-in-JS library designed for high performance style composition - emotion-js/emotion

источник

21:02пожаловаться #9

S

Sm•ok 😈✔️ in JavaScript Noobs — сообщество новичков

ui
atoms
button
index.tsx
styles.module.scss

источник

21:03пожаловаться #10

S

Sm•ok 😈✔️ in JavaScript Noobs — сообщество новичков

Сейчас все в модулях и держу таким образом

источник

21:03пожаловаться #11

S

Sm•ok 😈✔️ in JavaScript Noobs — сообщество новичков

Sm•ok 😈✔️

Переслано от Sm•ok 😈✔️

<Button
className={styles.button}
data-kind={kind}
data-size={size}
/>

// Css module next to btn file

.button {default styles}

.button {
&[data-kind="ghost"] {ghost styles}

&[data-kind="primary"] { primary styles}

&[data-kind="danger"] { danger styles}
}

.button {
&[data-size="......] {}
}

Компонент/Стили

источник

21:03пожаловаться #12

S

Sm•ok 😈✔️ in JavaScript Noobs — сообщество новичков

Но в других проектах, там стайледы, в целом тоже ок, но смысла рантайма не вижу, если можно без

источник

21:06пожаловаться #13

S

Sm•ok 😈✔️ in JavaScript Noobs — сообщество новичков

При этом не теряя комфорт. Правда кому то не нравится, что нужно ставить data перед пропсом, но это нативный css/html

источник

21:06пожаловаться #14

S

Sm•ok 😈✔️ in JavaScript Noobs — сообщество новичков

Дело привычки, мне норм

источник

21:07пожаловаться #15

V

Vlad in JavaScript Noobs — сообщество новичков

Konstantin Sedykh

а что ты хотел? сколько людей, столько и мнений. имхо будущее за ts. кто-то думает, что приблуды важнее. кто-то вообще чисто за ванилу ратует.

Ну без горького опыта в работе без типов ты не поймёшь зачем вообще нужен тс

источник

21:31пожаловаться #16

K

Krau5 in JavaScript Noobs — сообщество новичков

Vlad

Ну без горького опыта в работе без типов ты не поймёшь зачем вообще нужен тс

тс это жс, только с "т" в начале

источник

21:33пожаловаться #17

K

Krau5 in JavaScript Noobs — сообщество новичков

sticker.webp

(13.82 Кб)

источник

21:33пожаловаться #18

V

Vlad in JavaScript Noobs — сообщество новичков

Sm•ok 😈✔️

Переслано от Sm•ok 😈✔️

<Button
className={styles.button}
data-kind={kind}
data-size={size}
/>

// Css module next to btn file

.button {default styles}

.button {
&[data-kind="ghost"] {ghost styles}

&[data-kind="primary"] { primary styles}

&[data-kind="danger"] { danger styles}
}

.button {
&[data-size="......] {}
}

.button—disabled {}
 
<Button className={styles['button--disabled']}/>

Это будет работать?

источник

21:34пожаловаться #19

S

Sm•ok 😈✔️ in JavaScript Noobs — сообщество новичков

Vlad

.button—disabled {}
 
<Button className={styles['button--disabled']}/>

Это будет работать?

Не юзаю kebab case

источник

21:56пожаловаться #20