React: Порівняння та Особливості Роботи зі Стилями - Від CSS-класів до Styled Components
Вставка
- Опубліковано 11 лип 2024
- Код з прикладами - github.com/MaksymRudnyi/Tutor...
Зміст відео:
00:00 Варіанти роботи зі стилями в React
00:27 Демо
00:52 Про автора
02:28 Методи роботи зі стилями
04:31 CSS метод
07:21 SCSS - препроцесори
10:22 CSS-modules
13:39 Inline стилі
22:33 Styled components
29:28 Emotion styles
31:52 Tailwind
37:43 JSS
40:40 Висновок
Буду вдячний за підтримку каналу:
Patreon - / rudnyi
Mono Bank - send.monobank.ua/jar/6oqhydjLGp
або так - 5375 4114 0505 7287
Приват банк - 5363 5426 0316 4386
Давайте дружити:
Telegram ↣ t.me/maksymrudnyi
Telegram чат ↣ t.me/joinchat/H4AF4W4dfGeGepNQ
INSTAGRAM ↣ / maksym_rudnyi
TWITTER ↣ / maksymrudnyi
FACEBOOK ↣ / travelscode
WEB-SITE ↣ travelscode.com/
GITHUB ↣ github.com/MaksymRudnyi/
Другий UA-cam канал ↣ / travelscode - Наука та технологія
![ОРБАН приехал к ПУТИНУ и "отчитался" о поездке в Киев 😁 [Пародия]](http://i.ytimg.com/vi/_0ukDovOWq8/mqdefault.jpg)
Дуже Дякую ! Дуже корисно !
Дякую за крутий матеріал і цікаву викладку інформації. Прекрасно!
Максиме, дякую за корисний відос!
#react #css #js #scss #tailwind
Будь ласка.
Макс, дякую за відео, було цікаво! Так тримати! 💪👍
Дякую, радий чути.
Як завжди нові і цікаві теми
Приємно чути.
Дякую за контент!)
Будь ласка.
👏👏👏 Thanks for useful content! 🙂
Glad it was helpful!
дякую за порівняння, вперше дізналася про tailwind)
Будь ласка. Кажуть Tailwind крута штука, багато хто юзає. В LinkedIn під цим постом про Tailwind навіть маленький батл розпочався.
Дуже коирсно
Дякую!
Будь ласка.
Крутяо, нове відево
Сподіваюсь відео сподобалось.
@@MaksymRudnyi звичайно! Дякую
дякую за контент українською. круто, що його стає все більше 👍
з власної практики скажу, що, якщо проект не вибагливий до дизайна, то css-бібліотеки типу bootstrap/tailwind або навіть ant/mui норм рішення. якщо є дизайн, типу "я художник, я так бачу", тобто стилі потребують кастомізації, то віддаю перевагу index.css + styled components
Цілком погоджуюсь.
Макс, крутий контент
Ти часом козачки не граєш за ADI? Голос подібний дуже
Просуваємо український ІТ контент👍
Було б чудово. Дякую.
Використовую scss + tailwind
Зручний в роботі Tailwind? Я так і не дійшов до його використання.
@@MaksymRudnyi так , використовую css modules , а там вже можна міксувати scss та tailwind
Дуже дякую! Будь ласка, хапиши матеріал про використання i18next. 🙏
Хочу записати, але руки не доходять. Зараз використовую на своєму пет проєкті, крута штука, більше подобається наж react-intl
@@MaksymRudnyi якщо все ж таки буде час і натхнення, розберіть, будь ласка, питаня - як встановлювати дефолтну мову на сторінці, якщо вона приходить с бека. Тобто ситуація, клієнт може встановили на сайті мову на своєму аккаунті, яка зберігається на бекі. Якщо там є запис - то встановлюємо її, якщо ні - то якусь дефолну (або з браузера). Будь ласка 🙏🙏
Бо в доках у них якось мало інфи стосовно таких налаштувань, та і в принципі по такому кейсу
@@Podolsky45 Вітаю. В доках Ви багато інфи з цього приводу не знайдете бо це не зовсім відноситься до цієї ліби. По факту, Вам треба витягнути інфу про мову користувача і зробити її активною на сайті. Кроки:
1. Керування мовою сайту реалізоване в якомусь стейт менеджері. В мене є приклад на MobX - github.com/MaksymRudnyi/Ukraine-Now/blob/5247beddae2f78f45bdf2b25e10d2e4eea9f1799/client/src/store/UIStore.ts#L21
2. При відкритті сайту робиться запит на інфу користувача де отримується його збережена мова.
3. Після отримання мови сетиться потрібна мова сайту, якщо нема то береться дефолтна (залежить на налаштуваннь)
@@Podolsky45 Ще один приклад, я беру мову зі стору (там мона може з локал стореджа зберігатися) і встановлюю її активною - github.com/MaksymRudnyi/Ukraine-Now/blob/5247beddae2f78f45bdf2b25e10d2e4eea9f1799/client/src/store/index.js#L17
@@MaksymRudnyi о дуже Вам дякую! Це прям те, що треба, допомогло!
Так у модулях можна використовувати scss
Добре.
First 😎
Норм, інші варіанти не пробували?
Дякую! Якось пояснювати, щоб всі розуміли, як для першокласника віку, змогли б?
для початківців треба дивитися відоси з розділу для початківців. Весь конент розбитий по списках в залежності від досвіду.
Вітаю! Дякую за ваш контент) пане Максиме як ви ставитесь до розвитку штучного інтелекту? Чи є загроза для майбутніх програмістів? Дякую
Вітаю. Планую найближчим часом випустити відео на цю тему. Якщо коротко то загроза є.
@@MaksymRudnyi , зрозумів. Очікую з нетерпінням🙂 ще раз дякую за відповідь)
Я вирішив повернутися до розробки після тривалої паузи, першим ділом вирішив користуватися допомогою ChatGPT. Після спроб вирішити кілька поставлених задач цим інструментом зрозумів, що поки є люди, що пишуть код, то штучний інтелект їх не замінить. Власне кажучи, в чому ситуація, якийсь сервіс оновлюється, а штучний інтелект про це не знає.
На цей час він не в змозі розв'язувати актуальні питання, він не дуже зберігає контекст розмови. Мої спроби користуватися штучним інтелектом привели до того, що я зрозумів, що простіше самому розібратися з проблемою, хоча всілякі примітивні речі він вже може робити. Звісно це все розвиватиметься і через умовні 5 років ситуація може кардинально змінитися, але зараз перейматися немає за що
А де ти береш веб шторм безплатно ?
Там де і бесплатно Premium UA-cam, Netflix, ChatGPT Pro та інші корисні сервіси - за гроші з власної карточки.
@@MaksymRudnyi сильно)
34:50 Ні, не треба ще щось до Tailwind ліпити, бо буде каша. Хіба що готові компоненти. Суть Tailwind - забути про окремий CSS.
CSS підходи: BEM, SMACSS, Utility first (Tailwind), Inline-styles.
А СSS-in-JS та CSS модулі це з іншої опери.
У відео тільки Tailwind вирішує всі питання, а все інше тільки часткові рішення.
Наприклад, styled-components ніщо не кажуть про організацію селекторів, а inline стилі не мають псевдо-селекторів.
BEM, SMACSS - це методології, які з React ще й неактуальні та незручні.
@@MaksymRudnyi Я також так думаю, я сам за утилітний підхід. Але суть в тому, що взявши emotion.js чи styled-components чи SCSS, все ж потрібно визначитися BEM чи SMACSS чи ще щось. Дуже часто бачу як BEM комбінують з CSS-in-JS. Ще раз, я за Tailwind, він вирішує всі проблеми зі структуризацією. До речі він найпопулярніший, а не просто популярний.
Я тейлвінд практично не використовував, лише на одному проєкті нещодав. Мені навіть сподобався, але є дві проблеми, які мене турбують: 1) довжина класів - в екран не вміщаються і важко відтримувати це (pritter плагін не особливо допомагає) і 2) Не знайшов якоїсь нормальної бібліотеки компонентів, щоб безкоштовна і з усім що потрібно. Не хочу я кожен раз з нуля створювати попапчики чи модалки, стилізувати самому інпути в дропдауни. Є для цього якесь рішення?
@@MaksymRudnyi Tailwind UI платний, тому можна MUI використовувати для готових компонентів, але тут діло не в Tailwind, бо styled-components це ж також не про готові рішення. Стосовно довгих класів - виносити в зміну, або інкапсулюємо в окремий компонент. Якщо хочете кастомний колір bg-[#50d71e], або створюєте власну утиліту в Tailwind.config. Якщо ж ми працюємо з чистим HTML, тоді довжина класів не так страшно, як дублювання самого HTML через відсутність компонентного підходу, або надлишковість CSS та important.
Зрозуміло що styled-components не про готові рішення, але їх можна з MaterialUI використовувати і наслідувати (хоча MUI - дно, мені не подобається). Я зараз на проєкті використовую ChakraUI. Подобається, але там свої особливості і тягнути чакру чи material разом з tailwind нема сенсу, а компоненти все одно потрібні.
Інлайн то ще той цирк)) і, до речі, ховер спокійно можна реалізувати через додаткову змінну яка буде трекати на елементі onMouseOver/onMouseLeave.
Але то дійсно страшне через специфікацію і неможливість їх перебити