Hech kim menga hech qachon CSS haqida o'rgatmagan narsalar.

Unsplash-da Jantine Doornbos surati

Ushbu xabar hech qachon men bilan ishlagan hech kimni tanqid qilmaydi, bu CSS haqida yaqinda shaxsiy tadqiqotlar olib borganimda o'rgangan muhim narsalar ro'yxati.

Ko'plab ishlab chiquvchilar CSS haqida ko'p narsalarga ahamiyat bermaydilar, ammo bu yangilik emas. Siz buni onlayn suhbatlar orqali yoki ba'zi do'stlaringiz va hamkasblaringiz bilan suhbat orqali kuzatishingiz mumkin.

Ammo, jamiyatda biz o'rganadigan ko'p narsa tengdoshlar bilan bilim almashishdan kelib chiqadi va natijada men ba'zan CSS haqida muhim narsalar borligini tushunib etaman, chunki boshqa odamlar hech qachon o'rganishga harakat qilmagan. Ko'proq.

Buni tuzatishga harakat qilish uchun men shaxsiy tadqiqotlarimni olib borishga qaror qildim va CSS-ni yaxshiroq tushunish va yozish uchun qiziqarli va foydali deb o'ylaydigan tushunchalarning kichik ro'yxatini tuzdim.

Ushbu ro'yxat aniq emas, u faqat so'nggi bir necha kun ichida men o'rgangan yangi narsalarni o'z ichiga oladi va boshqalarga yordam bera oladigan narsalarni aytib berishni xohlaydi.

Terminologiya

Har bir dasturlash tilida bo'lganidek, tushunchalarni tavsiflash uchun ishlatiladigan maxsus atamalar mavjud. CSS dasturlash tili bo'lib, u hech qanday farq qilmaydi va ba'zi terminologiyalarni o'rganish muloqotga yordam berish uchun yoki hatto o'zingizning shaxsiy bilimlaringiz uchun ham muhimdir.

Avlod kombinati

Bilasizmi, sizning uslubingizdagi tanlovchilar orasidagi ozgina bo'sh joy. U aslida nomga ega va uning nomi avlodlar kombinatoridir.

Avlod kombinati

Tartib, bo'yoq va kompozit

Ushbu atamalar brauzerning qanday ishlashini ko'proq bilishi mumkin, ammo bu hali ham muhim, chunki ba'zi CSS xususiyatlari ko'rsatilayotgan quvur liniyasining turli bosqichlariga ta'sir qiladi.

1. Tartib

Joylashtirish bosqichi - bu element ekranda qancha joy egallashini hisoblash. CSS-da "tartib" xususiyatini o'zgartirish (masalan: kenglik, balandlik) brauzer boshqa barcha elementlarni tekshirishi va sahifani "aks ettirishi" kerakligini anglatadi, bu zararlangan joylarni qayta to'ldirib, ularni birlashtiradi.

2. Bo'yoq

Ushbu jarayon elementlarning har bir vizual qismi (ranglar, chegaralar va hk) uchun piksellarni to'ldiradigan jarayondir. Elementlarni chizish odatda bir nechta qatlamlarda amalga oshiriladi.

"Bo'yoq" xususiyatini o'zgartirish sahifaning tartibiga ta'sir qilmaydi, shuning uchun brauzer layn qadamini o'tkazib yuboradi, lekin baribir bo'yoqni bajaradi.

Ko'pincha bo'yoq quvur liniyasining eng qimmat qismidir.

3. Kompozit

Birlashtirish bu to'g'ri tartibda qatlamlarni chizish kerak bo'lgan qadamdir. Ba'zi elementlar bir-birining ustiga chiqishi mumkinligi sababli, ushbu qadam elementlarning belgilangan tartibda paydo bo'lishiga ishonch hosil qilish uchun muhimdir.

Agar siz CSS-ni sxemasini yoki bo'yog'ini talab qilmaydigan o'zgartirsangiz, brauzer faqat kompozitsiyani bajarishi kerak.

Turli CSS xususiyatlarini ishga tushirish tafsilotlari uchun siz CSS Triggerlarini ko'rishingiz mumkin.

CSS ishlashi

Avlod selektsiyasi qimmatga tushishi mumkin

Sizning arizangiz qanchalik katta bo'lishiga qarab, faqat avlod selektsiyasidan ko'proq o'ziga xos xususiyatlardan foydalanish haqiqatan ham qimmatga tushishi mumkin. Brauzer har bir avlod elementini mosligini tekshiradi, chunki munosabatlar ota-onalar va bolalar uchun cheklanmagan.

Masalan:

Avlod selektoriga misol

Brauzer bizning #nav bo'limimiz ichidagi havolalarga kirishdan oldin sahifadagi barcha havolalarni baholaydi.

Buning yanada samarali usuli bu bizning #nav elementimiz ichidagi har bir ga .navigatsiya-bog'lanishning o'ziga xos selektorini qo'shishdir.

Brauzer tanlovchilarni o'ngdan chapga o'qiydi

Men buni bilishim kerak edi kabi his qilyapman, chunki bu juda muhim, lekin men bilmadim ...

CSS-ni tahlil qilishda brauzer CSS-ni tanlagichlarni o'ngdan chapga o'rnatadi.

Agar quyidagi misolga qarasak:

Brauzer o'ngdan chapga o'qiydi

Qabul qilingan qadamlar: