Yuzaga kelgan tarkibiy qismlarga 5 daqiqalik kirish

CSS g'alati. Siz uning asoslarini 15 daqiqada bilib olishingiz mumkin. Ammo sizning uslubingizni tartibga solishning yaxshi usulini aniqlashingizdan ko'p yillar o'tishi mumkin.

Buning bir qismi shunchaki tilning o'ziga xos ohanglari tufayli. Jadvaldan tashqarida CSS juda cheklangan bo'lib, unda hech qanday o'zgaruvchilar, ko'chadan yoki funktsiyalar mavjud emas. Shu bilan birga, siz elementlarni, sinflarni, identifikatorlarni yoki ularning har qanday kombinatsiyasini uslublashingiz mumkinligi juda joizdir.

Xaotik uslublar jadvallari

Ehtimol, o'zingiz uchun boshdan kechirganingizdek, bu ko'pincha betartiblik uchun retseptdir. SASS va LESS kabi protsessorlar juda ko'p foydali xususiyatlarni qo'shsa ham, ular CSS anarxiyasini to'xtatish uchun ko'p ishlarni amalga oshirmaydilar.

Ushbu tashkiliy ish BEM kabi metodologiyalarga qoldirildi, ammo foydali bo'lsa ham, ular mutlaqo ixtiyoriy emas va til yoki vositalar darajasida bajarilishi mumkin emas.

CSS-ning yangi to'lqini

Ikki yil davomida oldinga siljiting va JavaScript-ga asoslangan vositalarning yangi to'lqini CSS-ni yozish usulingizni o'zgartirib, ushbu muammolarni tubdan hal qilishga harakat qilmoqda.

Styled Component bu kutubxonalardan biri bo'lib, u o'zining innovatsiyasi va tanishligi tufayli tez orada katta e'tiborni tortdi. Shunday qilib, agar siz React-dan foydalansangiz (va agar yo'q bo'lsa, JavaScript-ni o'rganish rejamni va React-ga kirishim bilan tanishib chiqing), bu CSS-ning yangi alternativasini ko'rib chiqishga arziydi.

Yaqinda men o'z shaxsiy saytimni qayta loyihalashda foydalangan edim va bugun men bu jarayonda o'rgangan ba'zi narsalarim bilan bo'lishmoqchiman.

Uslubli komponentlar

Styled Component haqida tushunishingiz kerak bo'lgan asosiy narsa shundaki, uning nomini so'zma-so'z olish kerak. Siz endi HTML elementlari yoki ularning sinfiga yoki HTML elementlariga asoslanib qismlarga ajratmayapsiz:

Salom Dunyo

h1.title {
  shrift hajmi: 1.5em;
  rang: binafsha rang;
}

Buning o'rniga, siz o'zlarining kapsullangan uslublariga ega bo'lgan zamonaviy qismlarni aniqlaysiz. Keyinchalik bularni kod bazangizda bemalol ishlatasiz:

"styled-komponentlar" dan import qilingan;
const sarlavha = styled.h1`
  shrift hajmi: 1.5em;
  rang: binafsha rang;
`;
 Salom Dunyo 

Bu ahamiyatsiz farq kabi ko'rinishi mumkin va aslida ikkala sintaksis juda o'xshash. Ammo ularning asosiy farqi shundaki, uslublar endi ularning tarkibiy qismidir.

Boshqacha qilib aytganda, biz CSS darslaridan komponent va uning uslublari o'rtasidagi oraliq qadam sifatida qutulmoqdamiz.

Maks Stoiberning yaratuvchisi:

"Styled-komponentlarning asosiy g'oyasi uslublar va komponentlar o'rtasidagi xaritani olib tashlash orqali eng yaxshi tajribalarni joriy etishdir."

Yukni tushirish murakkabligi

Avvaliga bu mantiqiy emasdek tuyuladi, chunki HTML elementlarini to'g'ridan-to'g'ri uslublash o'rniga ( tegini eslaysizmi?) CSS-dan foydalanishning butun maqsadi ushbu vositachi sinf qatlamini kiritish orqali uslublar va tuzilishlarni ajratishdir.

Ammo bu parchalanish juda ko'p murakkablikni keltirib chiqaradi va CSS-ga nisbatan JavaScript kabi "haqiqiy" dasturlash tili bu murakkablikni boshqarish uchun ancha yaxshi jihozlangan.

Sinflar orqali mashqlar

Ushbu klass bo'lmagan falsafaga binoan, styled-komponentlar komponentlarning xatti-harakatlarini sozlash haqida gap ketganda, darslardan ustunlarni ishlatadilar. Shunday qilib, o'rniga:

Salom Dunyo

// ko'k rangda bo'ladi
h1.title {
  shrift hajmi: 1.5em;
  rang: binafsha rang;
  
  & .primary {
    rang: ko'k;
  }
}

Siz yozasiz:

const sarlavha = uslubi.h1`
  shrift hajmi: 1.5em;
  rang: $ {props => props.primary? 'blue': 'binafsha'};
`;
 Salom Dunyo  // ko'k rangda bo'ladi

Ko'rinib turibdiki, uslubli tarkibiy qismlar sizga CSS va HTML bilan bog'liq amalga oshirish tafsilotlarini saqlash orqali React tarkibiy qismlarini tozalashga imkon beradi.

Bu aytilganki, uslubli komponentlar CSS baribir CSS. Shunday qilib, shunga o'xshash narsalar ham butunlay yaroqlidir (garchi biroz idiotik bo'lmagan bo'lsa ham):

const sarlavha = styled.h1`
  shrift hajmi: 1.5em;
  rang: binafsha rang;
  
  & .primary {
    rang: ko'k;
  }
`;
 Salom Dunyo  // ko'k rangda bo'ladi

Bu uslub-tarkibiy qismlarga kirishni juda osonlashtiradigan xususiyatlardan biri: shubha tug'ilganda, siz doimo bilgan narsangizga qaytishingiz mumkin!

Ogohlantirishlar

Shuni ham ta'kidlash kerakki, stil-komponentlar hali ham yosh loyiha bo'lib, ba'zi funktsiyalar hali to'liq qo'llab-quvvatlanmaydi. Masalan, agar siz ota-onadan bola tarkibiy qismini uslublamoqchi bo'lsangiz, hozircha CSS darslaridan foydalanishga ishonishingiz kerak bo'ladi (hech bo'lmaganda v2-komponentlar chiqmaguncha).

O'zingizning CSS-ni serverda oldindan rasmiylashtirishning hali "rasmiy" usuli mavjud emas, garchi uslubni qo'lda kiritish orqali albatta.

Stil-komponentlar o'zlarining tasodifiy sinf nomlarini yaratishi, sizning uslublaringiz qayerda aniqlanganligini aniqlash uchun brauzeringizning dasturiy vositalaridan foydalanishni qiyinlashtirishi mumkin.

Ammo eng quvonarlisi shundaki, ushbu tarkibiy qismlarning asosiy jamoasi bu barcha muammolarni yaxshi biladi va ularni birma-bir tuzatish ustida ishlamoqda. Tez orada 2-chi versiyasi chiqadi va men uni intizorlik bilan kutyapman!

Ko'proq ma'lumot olish

Bu yerdagi mening maqsadim, tarkibiy qismlarning qanday ishlashini batafsil tushuntirish emas, balki agar siz tekshirib ko'rishga arziydigan bo'lsangiz, o'zingiz uchun qaror qilishingiz mumkin bo'lgan ozgina tasavvur berishdir.

Agar sizni qiziqtirmoqchi bo'lgan bo'lsam, unda siz uslubiy komponentlar haqida ko'proq ma'lumot olishingiz mumkin bo'lgan ba'zi joylar:

  • Max Stoiber yaqinda Smashing Magazine uchun uslubiy komponentlarning sababi haqida maqola yozdi.
  • Stil-komponentlarning repo-sida keng qamrovli hujjatlar mavjud.
  • Jeymi Diksonning ushbu maqolasida uslubiy qismlarga o'tishning bir qancha afzalliklari bayon etilgan.
  • Agar siz kutubxona aslida qanday amalga oshirilayotgani haqida ko'proq bilmoqchi bo'lsangiz, ushbu maqolani Maks tomonidan ko'rib chiqing.

Agar siz yanada ko'proq borishni istasangiz, Glamour-ni ham tekshirib ko'rishingiz mumkin, bu yangi to'lqinli CSS-ning boshqa imkoniyatidir!

O'z-o'zini reklama qilish vaqti: Nova-ga yordam beradigan ochiq manbali yordamchilarni qidirmoqdamiz, bu shakllar, ma'lumotlar yuklash va foydalanuvchi hisoblari bilan to'ldirilgan React & GraphQL to'liq stack-ni yaratishda eng oson usuldir. Biz hanuzgacha uslubiy qismlardan foydalanmaymiz, lekin siz ularni birinchi bo'lib amalga oshira olasiz!