(S) CSS sizga hali ma'lum bo'lmagan eng yaxshi amaliyotlar

Paula Jenda tomonidan tasvirlangan rasm

Agar siz hozirda React, Angular yoki Vue.js kabi ommabop doiralardan foydalangan holda ilovalaringizni qursangiz ham, ularga hali ham ba'zi uslublarni qo'shishingiz kerak. Siz foydalanadigan texnologiyaga qarab, uslubingizni ma'lum bir tarzda yozishingiz kerak. Masalan, React uchun, komponentlar xarakteriga ko'ra CSS modullaridan foydalangan holda uslublarni yozish yaxshiroqdir. Agar siz CSS-ning yangi xususiyatlaridan foydalanmoqchi bo'lsangiz, CSSNext-dan foydalanish oqilona bo'ladi. Sass yoki LESS kabi yaxshi CSS protsessorlari haqida unutmang. Siz o'ylashingiz mumkin - juda ko'p vositalar, ularning har biri uchun yozish uslubi har xil. Ha, siz haqsiz. Ammo asoslar bir xil.

Ushbu maqolada, siz CSS modullarini yoki Sass / LESS-ni yoqtirmasligingizdan qat'i nazar, ishonchli va barqaror CSS yozish bo'yicha bir nechta foydali maslahatlarni taqdim etmoqchiman. Ushbu maslahatlar SCSS sintaksisida keltirilgan, shuning uchun sizga Sass-ga kirish kerak bo'lsa, boshlash uchun yaxshi joy. Agar siz CSS Next tomonidan kengaytirilgan oddiy CSS-dan foydalansangiz, ushbu maqola sizga ham tegishli. Ushbu asosiy tushunchalarni CSS-ning boshqa vositalarida yoki protsessorlarida osongina ishlatish mumkin.

O'z uslubingizni tuzing

Yaxshi o'ylangan papka tuzilishi sizning loyihangizni saqlashga yordam beradi. Xuddi shu narsa sizning uslubingizga ham tegishli. Kodingizni ishora qiladigan elementlarga qarab ajratish muhimdir. Barcha qoidalaringizni bitta katta styles.scss faylida saqlash aniq muammolarga olib keladi. Ayniqsa, agar siz loyihangizni kengaytirmoqchi bo'lsangiz va yangi tarkibiy qismlarni qo'shsangiz.

Loyihaning miqyosi jihatidan uslublarning to'g'ri tuzilishini o'rnatish juda muhimdir. O'zingizning loyihangizda foydalanadigan tarkibiy qismlarga ko'ra fayllaringizni buyurtma qiladigan tuzilmani taqdim etishga e'tibor qaratish kerak. Sizga asosiy uslublarni komponentlar va tema uslublaridan ajratishni taklif qilaman. Shuningdek, barcha aralashmalar va o'zgaruvchilarni roliga qarab bitta papkada birlashtirish maqsadga muvofiqdir.

Quyida papka tuzilishiga misol keltirilgan:

Va main.scss:

Ranglarni nomlang

Shunday qilib, sizda veb-sayt dizayni bor va siz kodlash tartibidan boshlamoqchisiz. Loyihangizda ranglarni boshqarish uchun qanday oqilona yondashuv kerak? Shunchaki rang qoidalarini to'g'ridan-to'g'ri uslub qoidalariga yozishingiz mumkin. Ammo kelajakda bu yondashuv muammoli bo'lishi mumkin. Yaxshiyamki, CSS ham, Sass ham bizga o'zgaruvchilar beradi.

Sass-da har qanday qiymatni o'zgaruvchan sifatida saqlashingiz mumkin, shuning uchun rang qiymatini o'zgaruvchan sifatida saqlash maqsadga muvofiqdir. Ko'pincha biz rang qiymatini aniqlash uchun HEX (oltita raqamlar) dan foydalanamiz. Odamlar uchun HEX shifrga o'xshaydi, chunki bu kompyuterlar uchun mo'ljallangan format. Qaysi rang # 7fffd4 yoki # ffd700 deb yozilganligini aytish qiyin (agar siz ularni tushunsangiz, CAPTCHA sinovidan o'tolmasligingiz mumkin). Birinchisi - akuamarin, ikkinchisi - oltin. Shu ranglarda bunday ranglarga ega bo'lish osonroq bo'lmaydimi?

Ba'zi ranglar veb-sayt dizaynida o'ziga xos rollarga ega. Bir rang brend rangi sifatida ishlatilishi mumkin, ikkinchisi fon uchun mo'ljallangan. Garchi biz brauzer uchun kod yozsak ham, ranglarimizga mos keladigan tuzilmani yaratishimiz kerak. Dizaynerning yordamidan foydalanish juda yaxshi. Agar siz uni ranglar palitrasini tasvirlashga ishontira olmasangiz, uni o'zingiz qilishingiz mumkin.

Birinchidan, siz ranglaringizni nomlash bilan boshlashingiz kerak. Albatta, HEX qiymatini odam o'qiydigan nomga tarjima qilish qiyin. Baxtimizga, buning uchun bizda tegishli vositalar mavjud. Men nomi o'sha rang veb-saytidan foydalanaman, lekin siz istagan boshqa vositalardan foydalanishingiz mumkin.

Ranglaringiz uchun ismlar mavjud bo'lsa, ularga rollarni tayinlashingiz mumkin. Qaysi rang asosiy va qaysi biri ikkinchi darajali ekanligini aniqlash kerak. Agar ranglaringiz uchun rollarni qanday belgilashni bilmasangiz, Bootstrapning rang sxemasidan ilhom olishingiz mumkin.

Rangni sozlashga misol:

Flatten joylashtirilgan deklaratsiyalar

CSS preprosessoridan foydalanish nafaqat sizning vositalar to'plamingizga ba'zi foydali funktsiyalarni qo'shibgina qolmay, balki kodlarni tashkil qilishda ham yordam beradi. Eng yaxshi misol bu uslublar deklaratsiyasining joylashtirilishi. Sass-da, boshqa selektsionerlarda selektor qo'yish mumkin, shunda ular orasidagi bog'liqlikni ko'rish mumkin. Bu juda kuchli xususiyat, shuning uchun uni haddan tashqari ishlatish mumkin.

Sizga 3 darajadan ko'proq chuqurlikka bormaslikni maslahat beraman. Ushbu qoida selektsionerlarning o'ziga xosligi uchun ham, CSS protsessorlarida joylashtirilgan selektsionerlar uchun ham amal qiladi. Ushbu chegaradan oshib ketish nafaqat selektorning kuchini oshiribgina qolmay, balki sizning kodingizni o'qishni ham qiyinlashtirishi mumkin.

Quyidagi misolga qarang:

Ota-onalar ma'lumotlarini haddan tashqari oshirib yubormang

Sass-da selektorning ota-onasidan ma'lumot olish mumkin. Uy qurish bilan birgalikda siz ota-onalarning tanloviga muhtoj bo'lgan qoidalarni belgilashingiz mumkin. Misol uchun:

Ba'zida, & dan foydalanish adashtirishi mumkin. Mana bu selektorning noto'g'ri ishlatilishiga misol:

Ko'rib turganingizdek, ampersand selektori sizning uslubingizga keraksiz murakkablik qo'shishi va kodni o'qishni qiyinlashtirishi mumkin.

Xususiyatlarni mazmunli tartibda yozing

Siz o'zingizning xususiyatlaringizni saralashingiz shart emas, lekin buni qilishingiz kerak. To'g'ri tartiblangan xususiyatlar sizning kod uslubingiz mosligini ko'rsatadi. Bundan tashqari, bu sizning kodingizni skanerlashni qulayroq qiladi. Xususiyatlarni saralash jihatidan hech qanday haqiqat manbai yo'q. Siz ularni alifbo tartibida yoki boshqa biron bir afzallik bo'yicha saralashingiz mumkin. Men SMACSS metodologiyasining formatlash ko'rsatmalariga kiritilgan ozgina o'zgartirilgan qoidalardan foydalanaman. Menga tavsiya etilgan buyurtma:

  • Quti (pozitsiya, displey, kenglik, chegara va boshqalar)
  • Matn
  • Fon
  • Chegarasi
  • Boshqalar (Alifbo tartibida)

Klassik nom berish konvensiyasidan foydalaning

Sizning loyihangiz o'sganda, uslublar juda tartibsiz bo'lishi mumkin. Ayniqsa, mavjud qoidalarni uzaytirish kerak bo'lganda. Afsuski, CSS hech qanday foydali mexanizmlarni ta'minlamaydi, bu esa nomlar oralig'ida to'qnashuvni oldini oladi. Boshqacha qilib aytganda, CSS-da yozilgan barcha uslublar global ahamiyatga ega, shuning uchun kutilmaganda ba'zi xususiyatlarning ustiga yozib qo'yish mumkin.

CSS-ning kaskadli xususiyati tufayli juda aniq selektorlarni aniqlash juda muhimdir. Bu yuqori aniqlikdagi selektsionerlardan foydalanish kerak degani emas. Agar biron bir element uchun uslub qo'shishni xohlasangiz, yorliqlarni tanlash kabi umumiy tanlovchilarni chetlab o'tishingiz kerak.

Bunga misol:

Umid qilamanki, turg'un uslublarni yozish unchalik qiyin emas, chunki biz taniqli klass nomlaridan biri - BEM, OOCSS yoki SMACSS-dan foydalanishimiz mumkin. Men BEM-ni afzal ko'raman, bu Yandex ishlab chiqaruvchilari tomonidan yaratilgan juda mashhur metodologiya. Uning nomi - blok, modifikator va element so'zlarining qisqartmasi. Agar siz BEM bilan tanish bo'lmasangiz, uning hujjatlarini o'qib chiqishingizni maslahat beraman.

Tasdiqlashdan keyin bizning misolimiz:

Izohli media so'rovlarini yozing

Ommaviy so'rovlar veb-saytni rivojlantirishning muhim qismidir. Ularning yordami bilan biz foydalanuvchiga qarab turli xil piksellar sonini va tartibini o'zgartirishimiz mumkin. CSS-da media-so'rovlar bu foydalanuvchi brauzerida sinovdan o'tgan qoidalar to'plami. Amalga oshirilganda veb-saytga ommaviy so'rovlar blokida belgilangan uslublar qo'llaniladi.

Medialarning turlari va xususiyatlarini tavsiflaydigan so'rovlardan foydalanib, siz turli xil qurilmalarni maqsad qilishingiz mumkin. Ko'p qoidalar uyg'unligi tufayli media-so'rov osonlikcha murakkablashishi mumkin.

Media-so'rovlarni ishlab chiqaruvchiga qulayroq qilish uchun, biz qoidalarni o'zgaruvchiga tayinlashimiz mumkin. Sass-da qatorni oddiy CSS kodi sifatida # {} interpolyatsiya qavslaridan foydalanish mumkin.

Xuddi shu hiyla-nayrangni boshqa qoidalar uchun ham ishlatamiz. Bu murakkab @ qo'llab-quvvatlash qoidalarini aniqlash uchun qulay bo'lishi mumkin.

Modulli uslublarni qo'shing

CSS-da juda foydali tanlovchilar to'plami mavjud. Aksariyat hollarda siz sinf tanlagichi yoki avlod selektoridan foydalanasiz. Ammo modulli uslublarni yozish uchun samarali bo'lgan yana bir selektor mavjud. Bu qo'shni opa-singillar selektori, shuningdek, ortiqcha selektor sifatida ham tanilgan.

Tasavvur qilaylik, siz uslublarni faqat ba'zi elementlar selektor elementidan oldin bo'lganda ishlatishni xohlaysiz. Masalan, sarlavha bo'lsa, maqola matniga marj qo'shishingiz mumkin. Buni qanday amalga oshirishingiz mumkin:

Bu uslublarni aniqlashning juda qulay usuli va mening eng sevimli variantim. Ammo ba'zi savdo-sotiqlar mavjud. Birinchidan, bu eng zo'r tanlovchi emas. Agar siz modulyatsiyadan ko'ra samaradorlik haqida ko'proq qayg'ursangiz, undan foydalanmasligingiz kerak. Ikkinchidan, opa-singillar selektoridan foydalanish o'ziga xoslikni oshiradi, shuning uchun keyinchalik uning uslublarini qayta yozish qiyin bo'lishi mumkin. Axir, elementlarning mavjudligi asosida uslublarni qo'llamoqchi bo'lsangiz, uni ishlatishingiz kerak.

Keyingi o'qish

Endi siz o'qiladigan, saqlanadigan va modulli uslublarni qanday yozishni bilasiz. Agar sizga g'ururlanish uchun uslublarni qanday yozish haqida ko'proq maslahatlar kerak bo'lsa, ushbu maqolalarga qarang:

  • Landon Schropp tomonidan yutib yuborilmaydigan rang rangidagi o'zgaruvchilar
  • Jarno Rantanen tomonidan ishlab chiqilgan SCSS yoki o'zingizning uslub jadvalingizni bilmagan 16 ta ajoyib narsa.
  • W3C tomonidan ulashgan aka-uka-opa-singillar selektori xususiyatlari
  • John W. Long tomonidan modulli CSS nomli konventsiyalar
  • Mason Wendell tomonidan Sass-da veb-dizayn
  • John W. Long tomonidan Sass loyihasini qanday tuzish kerak

Sizga yoqdimi? tugmasini bosing! Rahmat!

Siz meni Twitter va Github-da topishingiz mumkin.