В това видео към мен се присъединява Дъстин Шау и той ще ме поведе на обиколка на света на това, което стана известно като CSS-in-JS. Това означава, че правите стила си изцяло в JavaScript, а не във .cssфайлове, които сте в главата сами.
Дъстин е идеалното ръководство за това, тъй като той създаде страхотен инструмент за изследване, наречен CSS в JS Playground, а също така има и чисто нов курс по темата.
Ако ви е интересно защо някой би се заинтересувал изобщо да премине по маршрута на CSS-in-JS, ето няколко причини, които обсъждаме във видеото:
- Премахване на мъртъв код. Единствените стилове, които се зареждат, са стиловете за използваните компоненти по всяко време. Няма изпращане на неизползвани стилове. Когато компонент умира, стиловете му също умират.
- Обхват. Писането на нови стилове не може да повлияе на нищо друго на други места в сайта, така че няма нужда да се притеснявате да напишете стил, който има лоши или непредвидени последици другаде поради селектор в глобалния обхват. Получаваме защита на обхвата с идеологии за именуване като BEM, но това не се налага от инструменти.
- Безгрижно именуване. В някои случаи няма нужда да избирате име на клас или ID за това, което се стилизира, тъй като изходът съдържа потребителски интерфейс.
- Ергономичност на разработчика. Може да е хубаво да имате стилове в един и същ файл (или по друг начин много близо до) самия компонент. По същия начин някои разработчици се чувстват много комфортно в JSX. Също така възможността да оформяте нещата, без да се притеснявате за обхвата, означава, че разработчиците могат да се чувстват овластени за стила, а не да бъдат сплашени от него.
- Удобна за дизайн система. Системите за проектиране са свързани с компоненти, React също. Тези допълващи се режими на мислене съвпадат доста добре един с друг.
- Възможности на JavaScript в CSS. Правейки това с логически оператори и предадени в стойности и математика и какво ли още не, ползването на пълната мощ на JavaScript в стилове е много полезно.
И това не е всичко, но можете да разберете защо е привлекателно за някои хора. Със сигурност вдъхнови много дискусии. Защо не, когато предлага всички тези предимства? Е, това е съвсем различна среда за разработка, която не е задължително да кликва с всички. Той изисква огъване на уеб платформата, за да прави малко необичайни неща и това идва с брадавици. Да не говорим, че има буквален разход за него (размер на пакетите и подобни), който потребителите плащат, за което по-добре се надявайте да се изплати с ефективност.
Дъстин стигна дотам, че създаде демонстрация, използвайки Sass, за да оформи нещата, за да я сравни с това как може да се направи с CSS-in-JS, което демонстрира как изглежда пренасянето на стилове, както и възможностите за това.