Reaktdan foydalangan holda eng yaxshi uslublarni uslublash

Pankaj Patel surati Unsplash-da

Internetda ishlashning eng yoqimli qismlaridan biri bu shunday ingl. Men vizual tomonning katta qismi aniq ko'rinishga ega. Veb-sahifani uslublash, boshlang'ich belgilar va atributlarni qo'shishni boshlab, hozirgi kunning uslublar jadvallariga, shriftlar va ranglar kabi narsalarni o'zgartirish uchun olib borildi. Endi bizning veb-ilovalarimiz va JS Frameworks dunyosida Internet rivojlandi va shuning uchun eng yaxshi tajribalar mavjud. Bu, ayniqsa React kabi tizimda ishlaganda to'g'ridir.

Qanday qilib o'zingizning veb-sahifangizni "uslubi" qanday ta'sir qiladi?

O'z-o'zidan va boshqa vositasiz harakat qiling, uslub elementlarining ikkita usulini qo'llab-quvvatlang: uslublar paneli, uslublar yorlig'i va CSS uslublar jadvallari. Uslubni sozlash CSS xususiyatlari va qiymatlarining JS ob'ektini oladi va oxir-oqibat buni elementning ichki chizilgan uslubiga tarjima qiladi:

// JSX
   Qizil matn
  // DOM
   Qizil matn

Bu shunchaki ichki uslublar ekanligi sababli, siz hali ham yuqori darajadagi o'ziga xoslikni olasiz, ammo siz uslubga kirish huquqingiz cheklangan.

Uslub yorlig'i va CSS uslublar jadvallari sof HTML belgilash bilan ishlash bilan bir xil. Eng katta farq shundaki, siz sinf o'rniga theclassName prop-dan foydalanishingiz kerak. ID prop va className prop satrlarni yoki satrlarni baholashni ifodasini oladi, masalan:

// JSX
// DOM

CSS-ni masshtabda saqlash juda qiyin bo'lishi mumkin, shuning uchun React hamjamiyati CSS-ni masshtabda saqlash bo'yicha ishlab chiquvchilar tajribasini yaxshilaydigan vositalarni yaratdi. Bir necha bor yaratilgan, ammo ikkalasi eng kattasi, ehtimol CSS modullari va CSS-in-JS (va ko'proq stillangan-komponentlar / tuyg'ular).

CSS Modullari sizga CSS faylini JS Moduli kabi muomala qilishga imkon beradi. Siz CSS faylini import qilasiz va CSS faylidagi sinflar JS ob'ektidagi xususiyatlar kabi ko'rib chiqiladi:

'./index.css' dan import qilingan css ';
// DOM

Siz oxir-oqibat ishlatiladigan sinf bu sinfning nomi va hash bo'lganligini ko'rasiz. Ushbu xesh bizning ilovamizda noyobligini ta'minlash uchun sinfga qo'shiladi.

Bu ishlab chiqaruvchiga dasturning butun hajmini va biz yozayotgan CSS Cascade-ning qolgan qismiga qanday ta'sir qilishini bilmasligi kerak. Aslida, CSS modullaridan foydalanganda har bir komponent uchun o'ziga xos CSS-fayl mavjud bo'lishi odatiy holdir. CSS Modullari vositadan foydalanish imkoniyatiga ega bo'lish uchun, masalan, Webpack-da, yaratish jarayonining bir qismi sifatida yoqilgan bo'lishi kerak.

Styled-Component va Emotion bu juda mashhur kutubxonalar bo'lib, ular CSS modullari bilan bir xil maqsadga erishadilar, ammo bu haqda boshqacha yo'l tutishadi. Ikkala kutubxona ham ES6-da taqdim etilgan shablon shablonlari sintaksisidan foydalanadi. Oddiy qilib aytganda, teglangan shablonning asl nusxasi shablonning asl satrlari bilan ishlaydigan funktsiyalardir. Funktsiya andoza shablonlarni tahlil qiladi va shunga mos ravishda harakat qilishi mumkin.

Ushbu kutubxonalar qanday ishlaydi, siz CSS-ni shablon qatori sifatida yozasiz, funktsiya shablon satrini tahlil qiladi, uni hujjatning uslub yorlig'iga kiritadi va unga allaqachon kiritilgan sinf bilan tegishli komponentni qaytaradi. Mana bu qanday ishlashiga misol (misol styled-komponentlardan foydalanadi, ammo hissiyot deyarli bir xil API ishlatadi):

"styled-komponentlar" dan import qilingan;
const Layout = styled.div`
   displey: panjara;
`;
// DOM

Ko'rinib turibdiki, u CSS Moduli bilan bir xil maqsadga erishadi, ammo tuzilish vaqtida kengaytirilgan sinfni yaratish o'rniga, ish vaqtida CSS-ni yaratadi. Bu ushbu postga kirmaydigan ko'plab ajoyib xususiyatlarga ega bo'lish imkoniyatini beradi, ammo men ularni sizning uslublar va hissiyotlar uchun mo'ljallangan hujjatlar bilan tanishib chiqishingizni maslahat beraman.

Uslubning barcha bu usullari bilan uslubning eng yaxshi usuli nima? Ko'p narsa subyektiv va haqiqatan ham ishlab chiquvchi yoki ishlab chiquvchi guruhlarning xohishiga bog'liq. Aytilganidek, ba'zi yaxshi tajribalar paydo bo'ldi.

Ichki uslublar endi "yomon" emas

CSS-ni o'rganayotganda birinchi bo'lib bilib olganim shundaki, ichki uslublar yomon, yaxshi o'lchanmagan va har qanday holatda ham ulardan qochish kerak. Ammo ularni "yomon" deb hisoblash sabablarini tushunish muhimdir.

Ichki uslublar yomon deb hisoblanadi, chunki ichki uslublar faqat ma'lum bir elementga qo'llaniladi. Agar siz xuddi shu uslubni, masalan, birlamchi tugmachani, ko'paytirishingiz kerak bo'lsa, siz o'zingizning ilovangizning bir qismidan boshqasiga nusxa ko'chirishingiz va joylashtirishingiz kerak. Endi siz ikkala element o'rtasida qisman bir xil bo'lgan uslublarni o'zgartirish va uslublarni almashtirishga harakat qilsangiz, sizda kabus bor.

Reakt kabi komponentlarga asoslangan tizimda bu boshqa omil emas. Agar siz bir nechta joyda jihozlangan elementga ehtiyoj sezsangiz, ikkala joyda bir xil komponentdan foydalanasiz. Agar uslub ikkala element uchun ham o'zgarsa, sizda faqat bitta komponent mavjud, shunda u HTML bilan to'g'ridan-to'g'ri ishlaganda farq qilmaydi.

Ichki uslublar shuningdek, uslublarni rekvizitlar orqali sozlash imkonini beradi. Siz tarkibiy qismingiz foydalanuvchisi tomonidan sozlanishi kerak bo'lgan rekvizitlar orqali ba'zi elementlarni ochishingiz mumkin. Agar sizning saytingizda keng tarqalgan uslub konstantalari mavjud bo'lsa, ularni stil konstantalari papkasida saqlash va import qilish mumkin. Mana buni qanday amalga oshirish mumkinligi ko'rsatilgan:

Bu usul mukammal emas. Ichki uslublar, masalan, soxta tanlovchilar yoki media-so'rovlarga kirish huquqini bermaydi. Ammo endi ichki uslublarni ishlatish yomon emas va u albatta ishlab chiqaruvchilarning asboblar qutisiga kirishi kerak.

Komponentlar o'zlarini joylashtirmasliklari kerak

Reaktsiya kabi tarkibiy qismlarga asoslangan doirada biz tashvishlarimizni tarkibiy qismlar darajasida ajratamiz, bunga uslublar ham kiradi. Komponent qaerda ko'rsatilayotganini va agar aka-uka yoki opa-singillar borligini bilmaydi. U qanday joylashishini ham bilmaydi. Masalan, ota-ona fleks-box, css-grid, suzuvchi yoki absolyut holatdan foydalanishi mumkin, masalan. Shunday qilib, marj, pozitsiya, egiluvchanlik yoki shunga o'xshash boshqa mulk kabi qiymatlarni belgilash uchun hech qanday yo'l yo'q.

Dilemma shundan iboratki, CSS komponentlarga asoslangan ramka atrofida ishlab chiqilmagan va bu xususiyatlarning aksariyati bolalar darajasida o'rnatilishi kerak, ya'ni u bilmaganiga qaramay, bola o'z atrofini bilishi kerak. .

Buni qanday aylanib o'tamiz? Buning 3 usuli mavjud. Usullarni kiritish usullaridan biri bu className va / yoki uslublar rekvizitlarini oshkor qilish, bu uslublarni in'ektsiya qilishga imkon berishdir:

const Widget = ({className = '', ... props}) =>
         
vidjeti
// yoki
const Widget = ({uslub = {}, ... rekvizitlar}) =>
        

Buning salbiy tomoni shundaki, u sizning boshqa uslublaringizni qayta yozib olish uchun ochadi, bu odatda istalmagan, ayniqsa dizayn tizimida ishlaganda. Buning oldini olish uchun o'zingiz yozishni istamagan uslubingizni oxirgi marta qo'yishingiz mumkin. Siz buni quyidagicha qilishingiz mumkin:

const Widget = ({className = '', ... props}) =>
         
// yoki
const Widget = ({uslub = {}, ... rekvizitlar}) =>
        

Buni amalga oshirishning yana bir usuli - marj yoki pozitsiya kabi aniq qadriyatlarni oshkor qilish. Komponentingiz shundan keyin pervanenin to'g'ri ekanligini va uni qo'llash uchun mantiqiy ishlarni amalga oshirishi mumkin. Bu sizga ko'proq boshqaruvni ta'minlaydi, lekin sizni fosh qilish uchun tanlagan har bir propensni Komponent muallifi sifatida bajarishga majbur qiladi.

Uchinchi usul, Komponentingizni shunday joylashishni joylashtirgan "o'rash" ichiga kiritishdir:

const Layout = () => (
   
     
        
     
   
);

Bu aniq maydonlarni ochmasdan ko'proq boshqarish imkonini beradi. Ammo, agar sizda bu o'ralgan narsalar ko'p bo'lsa, bilvosita sabab bo'lishi mumkin. O'ralgan do'zax bilan kurashishning eng yaxshi usuli bu ularni o'zlarining tarkibiy qismlariga, masalan, Yuqori Buyurtma komponentlaridan foydalanishdir.

Uslublarni yo'q qilish kerak

Men o'z reaktsiyangiz tarkibiy qismlarida haddan tashqari ko'p harakat qilishga urinib ko'rish haqida o'z postimga allaqachon kirib borganman. Komponentingizga uslublarni qo'shish uchun ko'plab vositalardan foydalanishingiz mumkin va ular sizning elementlaringizni birgalikda yaratishda odatda bu uslublar qanday ahamiyatga ega emas. Bizning tarkibiy qismlar quyidagicha ko'rinishi kerak:

const SideBar = ({sarlavha}) => (
   
     

        {sarlavha}      

     
              
   
):

Va yana shunga o'xshash:

const SideBar = ({sarlavha}) => (
   
     
        {sarlavha}
     
     
        
     
   
):

Ikkinchi misol - SideBar komponentasini tuzishda abstraktsiyaning to'g'ri darajasi. SideBar Componentni tuzishda men uslubning qanday qo'shilganiga ahamiyat bermayman, faqat uslub qo'shilgan. Birinchi misol juda shovqinli va komponent nima qilayotganini tushunish qobiliyatimni pasaytiradi.

Veb-sahifa uchun uslubni yaratish veb-sahifa uchun juda muhimdir. Bizning veb-sahifamizning ko'rinishi veb-saytni yaratishi yoki buzishi mumkin. Yaxshiyamki, bizning foydalanuvchimiz juda yaxshi ko'radigan veb-saytni taqdim etishda yordam beradigan ko'plab vositalar va eng yaxshi amaliyotlar mavjud.