Šajā video man pievienojas Dastins Šau un viņš mani vedīs ekskursijā pa pasauli, kas tagad ir pazīstama kā CSS-in-JS. Tas ir, pilnībā veidojot stilu JavaScript, nevis .cssfailos, kurus jūs pats sev galvā veidojat .
Dastins tam ir ideāls ceļvedis, jo viņš JS Playground izveidoja lielisku izpētes rīku ar nosaukumu CSS, kā arī viņam ir pavisam jauns kurss par šo tēmu.
Ja vēlaties zināt, kāpēc kādu vispār interesē CSS-in-JS maršruts, šeit ir daži iemesli, kurus mēs apspriežam videoklipā:
- Mirušā koda izslēgšana. Vienīgie ielādētie stili ir komponentu stili, kas tiek izmantoti jebkurā brīdī. Nav neviena neizmantota stila. Kad komponents nomirst, tā stili arī mirst.
- Darbības joma. Jaunu stilu rakstīšana nevar ietekmēt neko citu citās vietnes vietās, tāpēc nav jāuztraucas par stila rakstīšanu, kam globālā mēroga selektora dēļ ir sliktas vai neparedzētas sekas citur. Mēs saņemam darbības jomas aizsardzību, nosaucot tādas ideoloģijas kā BEM, taču tā nav ieviesta ar rīkiem.
- Vārdu došana bez uztraukumiem. Dažos gadījumos nav nepieciešams izvēlēties klases nosaukumu vai ID stilam, jo izvadā ir lietotāja saskarne.
- Izstrādātāja ergonomika. Var būt patīkami, ja tajā pašā failā (vai kā citādi ļoti tuvu) ir komponenti. Tādā pašā veidā daži izstrādātāji JSX jūtas ļoti ērti. Arī spēja veidot lietas bez satraukuma, nozīmē, ka izstrādātāji var justies pilnvaroti veidot, nevis iebiedēt.
- Dizaina sistēma draudzīga. Projektēšanas sistēmas ir saistītas ar sastāvdaļām, tāpat kā React. Šie savstarpēji papildinošie domāšanas veidi diezgan labi sakrīt.
- JavaScript iespējas CSS. Darot to ar loģiskiem operatoriem un nododot vērtības, matemātiku un vēl ko, ir daudz noderīga, ja stilos ir pilna JavaScript spēja.
Un tas vēl nav viss, bet jūs varat redzēt, kāpēc tas dažiem cilvēkiem ir saistošs. Tas noteikti ir iedvesmojis daudz diskusiju. Kāpēc ne, kad tas piedāvā visas šīs priekšrocības? Nu, tā ir ļoti atšķirīga attīstības vide, kas ne vienmēr klikšķina ar visiem. Tas prasa saliekt tīmekļa platformu, lai veiktu nedaudz neparastas lietas, un tas nāk ar kārpas. Nemaz nerunājot par to, ka par to maksā burtiskas izmaksas (iepakojumu lielums un tamlīdzīgi), par kurām labāk būtu cerēt, ka tā atmaksāsies ar efektivitāti.
Dastins devās tik tālu, ka izveidoja demonstrāciju, izmantojot Sass, lai veidotu lietas, lai salīdzinātu to ar to, kā to var izdarīt ar CSS-in-JS, kas parāda, kā izskatās portēšanas stili, kā arī iespējas to izdarīt.