Zamonaviy CSS dinozavrlar uchun tushuntirilgan

Rayan Shimol tomonidan Dinozavr komiksidan olingan rasmlar

Veb-ishlab chiqaruvchisi sifatida o'rganish uchun eng oson va eng qiyin tillardan biri CSS g'alati deb hisoblanadi. Buni boshlash uchun, albatta, juda oson - siz ma'lum elementlarga qo'llaniladigan uslublar xususiyatlari va qiymatlarini aniqlaysiz va ... bu sizga kerak bo'lgan narsadir! Ammo kattaroq loyihalar uchun CSS-ni mazmunli tarzda tashkil etish murakkab va murakkablashadi. CSS-ning istalgan satrini bitta sahifadagi elementni o'zgartirish uchun o'zgartirish boshqa sahifalardagi elementlar uchun kutilmagan o'zgarishlarga olib keladi.

CSS-ning ajralmas murakkabligi bilan shug'ullanish uchun har xil turli xil ilg'or tajribalar yaratilgan. Muammo shundaki, eng yaxshi amaliyotlar bo'yicha hech qanday qat'iy kelishuv mavjud emas va ularning aksariyati bir-biriga zid bo'lib ko'rinadi. Agar siz birinchi marta CSS-ni o'rganmoqchi bo'lsangiz, bu hech narsa demaslik uchun yo'naltirilishi mumkin.

Ushbu maqolaning maqsadi CSS yondashuvlari va vositalari bugungi kunda qanday bo'lganligi haqida tarixiy kontekstni taqdim etishdir. Ushbu tarixni tushunish bilan har bir yondashuvni tushunish va ulardan sizning foydangizga qanday foydalanish kerakligi tushuniladi. Qani boshladik!

Asosiy uslub uchun CSS-dan foydalanish

Keling, oddiy veb-saytdan alohida indeks.css fayliga bog'langan oddiy index.html faylidan boshlaylik:




  
   Zamonaviy CSS 
  


  
Bu sarlavha.
  
    

Bu asosiy tarkib.

    

...

  
          

Bu alohida bo'lim.

    

...

     
Bu altbilgisi.

Hozir HTMLda biron bir sinf yoki iddan foydalanmayapmiz, shunchaki semantik teglar. Hech qanday CSS-ga ega bo'lmagan holda, veb-sayt quyidagicha ko'rinadi (to'ldirish matnidan foydalanib):

Jonli misolni ko'rish uchun bu erni bosing

Funktsional, ammo juda yoqimli emas. Index.css-da asosiy tipografiyani yaxshilash uchun CSS-ni qo'shishimiz mumkin:

/ * ASOSIY TIPOGRAFIYa * /
/ * https://github.com/oxalorg/sakura * /
html {
  shrift hajmi: 62,5%;
  shrift-oila: serif;
}
tanasi {
  shrift hajmi: 1.8rem;
  chiziq balandligi: 1.618;
  maksimal kenglik: 38em;
  chegara: avtoulov;
  rang: # 4a4a4a;
  fon rangi: # f9f9f9;
  to'ldirish: 13px;
}
@media (maksimal kenglik: 684 px) {
  tanasi {
    shrift hajmi: 1.53rem;
  }
}
@media (maksimal kenglik: 382 px) {
  tanasi {
    shrift hajmi: 1.35rem;
  }
}
h1, h2, h3, h4, h5, h6 {
  chiziq balandligi: 1.1;
  shrift-oila: Verdana, Jeneva, sans-serif;
  shriftning og'irligi: 700;
  ortiqcha to'ldirish: kesma so'z;
  so'z o'rash: break-word;
  -ms-word-break: break-all;
  so'z-break: break-word;
  -ms-defislar: avto;
  -moz-tire: avtomatik;
  -webkit-defislar: avto;
  defislar: avto;
}
h1 {
  shrift hajmi: 2.35em;
}
h2 {
  shrift hajmi: 2em;
}
h3 {
  shrift hajmi: 1.75em;
}
h4 {
  shrift hajmi: 1.5em;
}
h5 {
  shrift hajmi: 1.25em;
}
h6 {
  shrift hajmi: 1em;
}

Bu erda CSS-ning ko'p qismi tipografiyani (o'lchamdagi shriftlar, chiziq balandligi va hk) stilizatsiya qilishdan iborat bo'lib, ba'zi ranglar uchun uslublar va markazlashtirilgan tartibda joylashtirilgan. Ushbu xususiyatlarning har birini tanlash uchun yaxshi qadriyatlarni bilish uchun siz dizaynni o'rganishingiz kerak (bu uslublar sakura.css-dan olingan), ammo bu erda qo'llaniladigan CSS-ni o'qish juda qiyin emas. Natija quyidagicha ko'rinadi:

Jonli misolni ko'rish uchun bu erni bosing

Qanday farq! Bu CSS-ning va'dasi - dasturga yoki murakkab mantiqqa ehtiyoj sezmasdan uslubga hujjatni qo'shishning oddiy usuli. Afsuski, biz CSS-ni nafaqat tipografiya va ranglardan ko'proq foydalanganimizda (keyingi maqolada muhokama qilamiz) ranglar o'zgara boshlaydi.

Joylashtirish uchun CSS-dan foydalanish

1990-yillarda, CSS keng qabul qilinishidan oldin, sahifada tarkibni joylashtirishning ko'p variantlari mavjud emas edi. Dastlab HTML oddiy hujjatlar yaratish uchun til sifatida ishlab chiqilgan, yon panellar, ustunlar va hokazolarga ega dinamik veb-saytlarni yaratmagan. O'sha dastlabki kunlarda tartib ko'pincha HTML jadvallaridan foydalangan holda amalga oshirilgan - butun veb-sahifa jadvalni tashkil qilish uchun ishlatilishi mumkin edi. satrlar va ustunlardagi tarkib. Ushbu yondoshish foydalandi, ammo salbiy tomoni tarkib va ​​taqdimotning bir-biriga bog'langanligi edi - agar siz saytning tartibini o'zgartirishni xohlasangiz, bu katta hajmdagi HTML-ni qayta yozishni talab qiladi.

CSS sahnaga kirgandan so'ng tarkibni (HTML-da yozilgan) taqdimotdan (CSS-da yozilgan) alohida saqlashga kuchli turtki bo'ldi. Shunday qilib, odamlar HTML-dan barcha jadval kodini (boshqa jadvallarsiz) CSS-ga ko'chirish usullarini topdilar. Shuni ta'kidlash kerakki, HTML singari CSS ham sahifada tarkibni tuzish uchun mo'ljallanmagan, shuning uchun muammolarni ajratish bo'yicha dastlabki urinishlarni juda yaxshi bajarish qiyin edi.

Bu bizning yuqoridagi misolimiz bilan amalda qanday ishlashini ko'rib chiqaylik. Har qanday CSS tartibini aniqlashdan oldin, biz avval har qanday chiziqlar va to'ldirilgan qismlarni (sxemani hisoblashga ta'sir qiladigan) tiklaymiz va bo'limga aniq ranglarni beramiz (uni chiroyli qilish uchun emas, balki har bir makonni turli xil sxemalarni sinab ko'rishda ajratib ko'rsatish uchun).

/ * QAYTA ISHLASH VA RANGLAR UChUN * /
tanasi {
  chegarasi: 0;
  to'ldirish: 0;
  maksimal kenglik: meros;
  fon: #fff;
  rang: # 4a4a4a;
}
sarlavha
  shrift o'lchami: katta;
  matnni tekislash: markaz;
  to'ldirish: 0.3em 0;
  fon rangi: # 4a4a4a;
  rang: # f9f9f9;
}
nav {
  fon: #eee;
}
asosiy {
  orqa fon: # f9f9f9;
}
chetga {
  fon: #eee;
}

Endi veb-sayt vaqtincha quyidagicha ko'rinishga ega:

Jonli misolni ko'rish uchun bu erni bosing

Endi sahifadagi tarkibni joylashtirish uchun CSS-dan foydalanishga tayyormiz. Xronologik tartibda klassik suzish usuliga asoslangan uchta xil yondashuvni ko'rib chiqamiz.

Suzuvchi asos

CSS-ning float xususiyati dastlab rasmni chap yoki o'ngdagi ustunlar ichidagi rasmga osib qo'yish uchun joriy qilingan (ko'pincha siz gazetalarda ko'rasiz). 2000-yillarning boshlarida veb-ishlab chiquvchilar siz nafaqat rasmlarni, balki istalgan elementni ham suzishingiz mumkinligini, ya'ni tarkibiy qismlarni suzish orqali satrlar va ustunlar xayolotini yaratishingiz mumkinligidan foydalandilar. Shunga qaramay, suzuvchilar bu maqsadga mo'ljallanmagan, shuning uchun bu xayolotni yaratish muttasil ketishi qiyin edi.

2006 yilda A List Apart nashrida "In the Holy Grail" nomli mashhur maqola chop etildi, unda "Muqaddas Grail" deb nomlanuvchi - sarlavha, uchta ustun va altbilgisini yaratishga batafsil va puxta yondashilgan. Juda sodda tuzilishga o'xshash tovushlarni Muqaddas Grail deb atash mumkin, deb o'ylash juda aqldan ozgan, ammo o'sha paytda toza CSS-dan foydalanib, izchil tartibni yaratish juda qiyin bo'lgan.

Quyida ushbu maqolada tasvirlangan texnikaga asoslangan holda bizning misolimiz uchun suzishga asoslangan tartib mavjud:

/ * ASOSIY LAYUT * /
tanasi {
  padding-chap: 200px;
  padding-right: 190px;
  min-kengligi: 240px;
}
sarlavha
  chap-chap: -200px;
  chegara-o'ng: -190px;
}
asosiy, nav, chetga {
  lavozim: nisbiy;
  suzuvchi: chap;
}
asosiy {
  to'ldirish: 0 20px;
  kengligi: 100%;
}
nav {
  kengligi: 180px;
  to'ldirish: 0 10px;
  o'ng: 240px;
  chap-chap: -100%;
}
chetga {
  kengligi: 130px;
  to'ldirish: 0 10px;
  marj-o'ng: -100%;
}
altbilgisi {
  aniq: ikkalasi ham;
}
* html nav {
  chap: 150px;
}

CSS-ga nazar tashlasangiz, uni ishga tushirish uchun juda ko'p zarur bo'lgan bo'sh narsalar mavjudligini ko'rishingiz mumkin (manfiy chegaralar, aniq: ikkala mulk, qattiq kodli kengliklarni hisoblash va boshqalar) - maqola sabablarini tushuntirib beradigan yaxshi ish. har biri batafsil. Natija qanday ko'rinishda:

Jonli misolni ko'rish uchun bu erni bosing

Bu juda yaxshi, lekin ranglardan ko'rinib turibdiki, uchta ustun balandligi teng emas va sahifada ekranning balandligi to'ldirilmaydi. Ushbu muammolar suzishga asoslangan yondashuvga xosdir. Bo'limning chap yoki o'ng tomonidagi tarkibni joylashtirishi mumkin - CSS-da boshqa qismlarda tarkibning balandligini aniqlash uchun hech qanday yo'l yo'q. Flexbox-ga asoslangan tartibni yaratgandan so'ng, ko'p yillar o'tgach, bu muammoni hal qilish qiyin edi.

Flexbox-ga asoslangan tartib

Fleksbox CSS xususiyati birinchi marta 2009 yilda taklif qilingan, ammo 2015 yilgacha keng tarqalgan brauzer qabul qilinmagan. Flexbox makonni bitta ustun yoki satr bo'ylab qanday taqsimlanishini aniqlash uchun ishlab chiqilgan bo'lib, bu foydalanishni taqqoslash uchun maketni aniqlash uchun eng yaxshi nomzodga aylantiradi. suzadi. Bu shuni anglatadiki, o'n yil davomida suzuvchi asosli sxemalardan foydalangandan so'ng, veb-ishlab chiquvchilar nihoyat CSS-dan layout uchun kerak bo'ladigan qopqoqlarni ishlatmasdan foydalanishlari mumkin edi.

Quyida Flexbox tomonidan o'rnatilgan saytda tavsiflangan texnikaga asoslangan bizning misolimiz uchun fleksbox-ga asoslangan tartib (Flexbox-ning turli xil namunalarini namoyish etadigan mashhur manba). Fleksbox-ni ishlashi uchun HTML-dagi uchta ustun atrofida qo'shimcha o'rash bo'limi kerakligini unutmang.




  
   Zamonaviy CSS 
  


  
Bu sarlavha.
  
    
      

Bu asosiy tarkib.

      

...

    
                

Bu alohida bo'lim.

      

...

       
  
Bu altbilgisi.

Va bu erda CSS-da fleksbox kodi mavjud:

/ * FLEXBOX ASOSIY LAYOUT * /
tanasi {
  min balandlik: 100vh;
  displey: egiluvchan;
  egiluvchan yo'nalish: ustun;
}
.idish {
  displey: egiluvchan;
  egiluvchanlik: 1;
}
asosiy {
  egiluvchanlik: 1;
  to'ldirish: 0 20px;
}
nav {
  egiluvchanlik: 0 0 180px;
  to'ldirish: 0 10px;
  buyurtma: -1;
}
chetga {
  egiluvchanlik: 0 0 130px;
  to'ldirish: 0 10px;
}

Shunday qilib, suzish usuliga asoslangan usulga qaraganda, ixchamroq! Fleksboxning xususiyatlari va qadriyatlari birinchi qarashda bir oz chalkash, ammo u suzuvchi asosli sxemalar bilan zarur bo'lgan salbiy chiziqlar singari ko'p sonli to'siqlarga bo'lgan ehtiyojni yo'q qiladi - katta yutuq. Natija qanday ko'rinishga ega:

Jonli misol uchun bu erni bosing

Juda ham yaxshi! Ustunlar barchasi bir xil balandlikda va sahifaning to'liq balandligini egallaydi. Qaysidir ma'noda, bu mukammal bo'lib tuyuladi, ammo ba'zi bir kamchiliklar mavjud. Biri brauzerni qo'llab-quvvatlash - hozirgi kunda har bir zamonaviy brauzer flexbox-ni qo'llab-quvvatlaydi, ammo ba'zi eski brauzerlar hech qachon bo'lmaydi. Yaxshiyamki brauzer sotuvchilari ushbu eski brauzerlarni qo'llab-quvvatlashni tugatish uchun veb-dizaynerlar uchun yanada izchil rivojlanish tajribasini yaratishga katta urinishmoqda. Yana bir kamchilik, biz belgilash uchun

ni qo'shishimiz kerakligi - bu oldini olish yaxshi bo'lar edi. Ideal dunyoda, har qanday CSS rejasi HTML-ni o'zgartirishni talab qilmaydi.

Eng katta kamchilik, CSS-dagi kod - bu fleksbox suzuvchi hacklarning ko'pini yo'q qiladi, lekin kodni aniqlash uchun unchalik ifodali emas. Flexbox CSS-ni o'qish va sahifada barcha elementlarning qanday joylashishi haqida vizual tushuncha olish qiyin. Fleksbox-ga asoslangan sxemalarni yozishda bu juda ko'p taxmin qilish va tekshirishga olib keladi.

Shuni yana bir bor ta'kidlash kerakki, Fleksbox bitta ustun yoki satr ichidagi kosmik elementlar uchun yaratilgan - u butun sahifani yaratish uchun mo'ljallanmagan! Bu xizmat ko'rsatadigan ish bo'lsa ham (float-based layout-ga qaraganda ancha yaxshi), lekin bir nechta satrlar va ustunlar bilan sxemalarni boshqarish uchun alohida spetsifikatsiya ishlab chiqilgan. Ushbu spetsifikatsiya CSS grid deb nomlanadi.

Izgaraga asoslangan tartib

CSS-panjara birinchi marta 2011 yilda taqdim etilgan (flexbox taklifidan keyin ham o'tmay), ammo brauzerlarda keng tarqalish uchun ko'p vaqt kerak bo'ldi. 2018 yil boshiga kelib, CSS tarmog'ini zamonaviy brauzerlarning aksariyati qo'llab-quvvatlamoqda (hatto bir yil yoki ikki yil oldin juda yaxshilanish).

Quyida ushbu CSS fokuslari maqolasidagi birinchi usulga asoslangan bizning misolimiz uchun panjara asosidagi maket. Shuni esda tutingki, ushbu misol uchun biz flexbox-ga asoslangan tartib uchun qo'shishimiz kerak bo'lgan

dan qutulishimiz mumkin - asl HTML-ni o'zgartirmasdan ishlatishimiz mumkin. CSS-ning ko'rinishi quyidagicha.

/ * GRID-ASOSIY LAYOUT * /
tanasi {
  displey: panjara;
  min balandlik: 100vh;
  panjara-shablon-ustunlar: 200px 1fr 150px;
  panjara-shablon-satrlar: min-tarkib 1fr-min-tarkib;
}
sarlavha {
  panjara qatori: 1;
  panjara ustuni: 1/4;
}
nav {
  panjara qatori: 2;
  panjara ustuni: 1/2;
  to'ldirish: 0 10px;
}
asosiy {
  panjara qatori: 2;
  panjara ustuni: 2/3;
  to'ldirish: 0 20px;
}
chetga {
  panjara qatori: 2;
  panjara ustuni: 3/4;
  to'ldirish: 0 10px;
}
altbilgisi {
  panjara qatori: 3;
  panjara ustuni: 1/4;
}

Natijada moslashuvchan qutiga asoslangan tartib bilan vizual ravishda bir xil bo'ladi. Ammo, bu erda CSS kerakli tartibni aniq ifoda etadigan darajada yaxshilandi. Ustunlar va qatorlarning o'lchami va shakli tanani tanlagichda aniqlanadi va paneldagi har bir element to'g'ridan-to'g'ri uning pozitsiyasiga qarab belgilanadi.

Chalkashtirishi mumkin bo'lgan narsalardan biri ustunning boshlanish / tugash nuqtasini belgilaydigan grid-ustun xususiyati. Bu chalkash bo'lishi mumkin, chunki ushbu misolda 3 ta ustun mavjud, ammo raqamlar 1 dan 4 gacha. Quyidagi rasmga qaraganingizda aniqroq bo'ladi:

Jonli misolni ko'rish uchun bu erni bosing

Birinchi ustun 1 dan 2 gacha va 2 ustundan boshlanadi, ikkinchi ustun 2 dan 3 gacha va uchinchi ustun 3 dan boshlanadi va 4 ga tugaydi. Sarlavha butun varaqni yoyish uchun 1/4 dan iborat panjara ustuniga ega. , nav birinchi ustunni va boshqalarni qamrab olish uchun 1/2 panjara ustuniga ega va hokazo.

Agar siz panjara sintaksisiga o'rgansangiz, u aniq CSS-da maketni ifodalashning ideal usuli bo'ladi. Panjara asosidagi tuzilishning birdan-bir salbiy tomoni brauzerni qo'llab-quvvatlash bo'lib, u o'tgan yil davomida yana yaxshilandi. Aslida tartib uchun ishlab chiqilgan CSS-ning birinchi haqiqiy vositasi sifatida CSS tarmog'ining ahamiyatini oshirib yuborish qiyin. Qaysidir ma'noda veb-dizaynerlar har doim ijodiy sxemalarni tuzishda juda ehtiyotkorlik bilan munosabatda bo'lishlari kerak edi, chunki hozirgi vaqtgacha vositalar turli xil shlyapalar va echimlardan foydalangan holda juda zaif edi. Endi CSS tarmog'i mavjud bo'lsa, bunda ilgari hech qachon bo'lmagan iloji boricha qiziqarli vaqtlarni yaratish uchun yangi ijodiy maket dizaynlarini yaratish mumkin!

Yangi sintaksis uchun CSS preprosessoridan foydalanish

Hozircha biz asosiy uslublar va tartib uchun CSS-dan foydalanganmiz. Endi biz CSS bilan ishlash tajribasini CSS pre-protsessorlaridan boshlab til sifatida ishlash tajribasini yaxshilashga yordam beradigan vositalarga murojaat qilamiz.

CSS-ning dastlabki protsessori sizga brauzer tushunadigan CSS-ga aylantirilgan boshqa tildan foydalangan holda uslublarni yozishga imkon beradi. Brauzerlar yangi xususiyatlarni amalga oshirishda juda sust bo'lgan kunlarda bu juda muhim edi. CSS-ning birinchi yirik protsessori 2006 yilda chiqarilgan Sass edi. Unda yangi ixcham sintaksis mavjud (qavslar o'rniga kirish belgisi, nuqta-vergul va hokazo yo'q) va CSS-da etishmayotgan xususiyatlar, masalan, o'zgaruvchilar, yordamchi funktsiyalar va hisob-kitoblar mavjud. Oldingi misollarimizdagi ranglar bo'limi Sassni o'zgaruvchilar bilan ishlatish kabi ko'rinishga ega:

$ quyuq rang: # 4a4a4a
$ ochiq rang: # f9f9f9
$ yon rang: #eee
tanasi
  rang: $ quyuq rang
  
sarlavha
  fon rangi: $ quyuq rang
  rang: $ och rang
  
asosiy
  orqa fon: $ och rang
nav, chetga
  orqa fon: $ yon rang

Qayta ishlatiladigan o'zgaruvchilar $ belgisi bilan qanday belgilanishini va qavs va nuqta-vergullarni olib tashlab, toza ko'rinadigan sintaksisni yaratishga e'tibor bering. Sass-dagi tozalovchi sintaksisi yoqimli, ammo o'zgaruvchilar kabi xususiyatlar o'sha paytda inqilobiy bo'lgan, chunki ular toza va xizmat qiladigan CSS-ni yozish uchun yangi imkoniyatlarni ochib berishdi.

Sass-dan foydalanish uchun siz Sass kodini oddiy CSS-ga kompilyatsiya qilish uchun ishlatiladigan Ruby-ni o'rnatishingiz kerak. Keyin Sass gem-ni o'rnatishingiz kerak bo'ladi, so'ngra .sass fayllaringizni .css fayllariga aylantirish uchun buyruq satrida buyruqni bajaring. Buyruqning ko'rinishiga misol:

sass - soat ko'rsatkichi.sass indeksi.css

Ushbu buyruq index.sass nomli faylda yozilgan Sass kodini indeks.css nomli faylda odatiy CSSga o'zgartiradi (- - argument, kirish tejashni o'zgartirganda, istalgan vaqtda ishlashni buyuradi, bu qulay).

Ushbu jarayon "qurish bosqichi" sifatida tanilgan va 2006 yilda qaytib kirishga sezilarli to'siq bo'lgan. Agar siz Ruby kabi dasturlash tillariga o'rgangan bo'lsangiz, bu jarayon juda oson. Ammo o'sha paytda ko'plab ishlab chiqaruvchilar faqat HTML va CSS-lar bilan ishlashgan, ammo bunday vositalarni talab qilmagan. Shunday qilib, kimdir CSS pre-protsessor tomonidan taqdim etilgan xususiyatlarga ega bo'lishi uchun butun ekotizimni o'rganishi juda katta savol edi.

2009 yilda Less CSS protsessori chiqdi. U shuningdek Ruby-da yozilgan va Sass-ga o'xshash xususiyatlarni taklif qilgan. Asosiy farq, CSS-ga imkon qadar yaqinroq bo'lish uchun yaratilgan sintaksis edi. Bu shuni anglatadiki, har qanday CSS kodi yaroqsizdir. Mana, masalan, Less sintaksisidan foydalangan holda yozilgan xuddi shu misol:

@ qorong'i rang: # 4a4a4a;
@ ochiq rang: # f9f9f9;
@ yon rang: #eee;
tanasi {
  rang: @ to'q rang;
}
  
sarlavha
  fon rangi: @ quyuq rang;
  rang: @ ochiq rang;
}
  
asosiy {
  fon: @ ochiq rang;
}
nav, chetga {
  fon: @ yon rang;
}

Bu deyarli bir xil (o'zgaruvchilar uchun $ o'rniga @ prefiksi), ammo Sass misolidagi kabi, CSS bilan bir xil jingalak qavslar va yarim chiziqlar bilan. Ammo CSS-ga yaqinligi, uni ishlab chiquvchilarga uni qabul qilishni osonlashtirdi. 2012 yilda Less kompilyatsiya qilish uchun Ruby o'rniga JavaScript (xususan Node.js) dan foydalanish uchun qayta yozilgan. Bu "Ruby" dagi hamkasblariga qaraganda tezroq ish qildi va Node.js-ni o'z ish oqimlarida ishlatayotgan dasturchilar uchun yanada qiziqarli qildi.

Ushbu kodni odatiy CSS-ga o'zgartirish uchun avval Node.js-ni o'rnatib, Less-ni o'rnatib, quyidagicha buyruqni bajaring:

lessc index.less index.css

Ushbu buyruq index.less deb nomlangan faylda yozilgan Less kodni index.css nomli oddiy CSS-ga o'zgartiradi. Shuni esda tutingki, lessc buyrug'i fayllarni o'zgarishlarni ko'rish usuliga (sass buyrug'idan farqli o'laroq) kelmaydi, ya'ni avtomatik ravishda ko'rish va kompilyatsiya qilish uchun boshqa vositani o'rnatish kerak bo'ladi va jarayonga biroz murakkablik qo'shadi. Shunga qaramay, buyruq satri vositalaridan foydalanishga odatlangan dasturchilar uchun bu qiyin emas, lekin CSS pre-protsessoridan foydalanishni istagan boshqalar uchun kirish uchun jiddiy to'siqdir.

Less mindshare-ga ega bo'lganligi sababli, Sass-ning ishlab chiquvchilari 2010-yilda SCSS deb nomlangan yangi sintaksisni qo'shib moslashdilar (bu CSS-ning Less-ga o'xshash to'plami edi). Shuningdek, ular RubS Sass dvigatelining C / C ++ porti bo'lgan LibSassni chiqardilar, bu esa uni tez va turli tillarda ishlatishga qodir qildi.

Yana bir alternativ CSS protsessor - bu 2010 yilda chiqqan, Node.js-da yozilgan va Sass yoki Less-ga nisbatan toza sintaksisga e'tibor qaratadigan Stylus. Odatda CSS protsessorlari haqidagi suhbatlar ushbu uchta eng mashhur (Sass, Less va Stylus) mavzulariga qaratiladi. Oxir-oqibat, ularning taklif etadigan xususiyatlari jihatidan juda o'xshash, shuning uchun siz ulardan birini tanlashda xatoga yo'l qo'yishingiz mumkin emas.

Biroq, ba'zi odamlar CSS protsessorlari kamroq talab qilinmoqda, degan xulosaga kelishadi, chunki brauzerlar ba'zi xususiyatlarini (masalan, o'zgaruvchilar va hisob-kitoblar) amalga oshirishni boshlaydilar. Bundan tashqari, CSS protsessorlarini eskirgan (aniq tortishuvsiz emas) holga keltirishi mumkin bo'lgan CSS postprocessing deb nomlanuvchi yana bir yondashuv mavjud bo'lib, biz keyingi bosqichga o'tamiz.

Transformatsion xususiyatlar uchun CSS postprosessoridan foydalanish

CSS postprocessor sizning CSS-ni tahlil qilish va haqiqiy CSS-ga aylantirish uchun JavaScript-dan foydalanadi. Shu ma'noda, u CSS protsessoriga juda o'xshaydi - siz uni bitta muammoni echishda boshqacha yondashuv deb hisoblashingiz mumkin. Asosiy farq shundan iboratki, CSS preprosessor o'zgartirilishi kerak bo'lgan narsani aniqlash uchun maxsus sintaksisdan foydalansa, CSS postprosessor oddiy CSS-ni tahlil qilishi va uni biron bir maxsus sintaksisiz o'zgartirishi mumkin. Bu eng yaxshi misol bilan tasvirlangan. Yuqorida sarlavha teglarini sozlash uchun biz oldin CSSning bir qismini ko'rib chiqaylik:

h1, h2, h3, h4, h5, h6 {
  -ms-defislar: avto;
  -moz-tire: avtomatik;
  -webkit-defislar: avto;
  defislar: avto;
}

Qalin harflar bilan ta'minlangan narsalar sotuvchi prefikslar deb ataladi. Sotuvchi prefikslari brauzerlar CSS-ning yangi xususiyatlarini eksperimental ravishda qo'shganda yoki sinovdan o'tkazishda foydalanadilar, bu esa ishlab chiqaruvchilarga ushbu yangi CSS xususiyatlaridan foydalanishni yakunlashda foydalanishga imkon beradi. Bu erda -ms prefiksi Microsoft Internet Explorer-ga, -moz prefiksi - Mozilla Firefox-ga, -webkit-prefiksi esa webkit renderlash vositasidan foydalanadigan brauzerlarga (Google Chrome, Safari va Operaning yangi versiyalari kabi).

Ushbu CSS xususiyatlaridan foydalanish uchun barcha turli sotuvchi prefikslarini eslab qolish juda zerikarli. Agar kerak bo'lsa, sotuvchiga old qo'shimchalarni avtomatik ravishda joylashtiradigan vositaga ega bo'lish yaxshi bo'lar edi. Buni CSS protsessorlari yordamida echib olishimiz mumkin. Masalan, siz SCSS-ga o'xshash narsa qilishingiz mumkin:

@mixin defislari ($ qiymati) {
  -ms-defislar: $ qiymati;
  -moz-defislar: $ qiymati;
  -webkit-defislar: $ qiymati;
  defislar: $ qiymati;
}
h1, h2, h3, h4, h5, h6 {
  @ defis kiriting (avto);
}

Bu erda biz Sass mixin xususiyatidan foydalanmoqdamiz, bu sizga CSS sonini bir marta aniqlashga va uni boshqa joyda qayta ishlatishga imkon beradi. Ushbu fayl oddiy CSS-ga tuzilganda, har qanday @ o'z ichiga olgan iboralar mos keladigan @mixin-dan CSS bilan almashtiriladi. Umuman olganda, bu yomon echim emas, lekin siz har bir aralashtiruvchini oldindan sotuvchini talab qiladigan har qanday CSS xususiyatini aniqlash uchun javobgarsiz. Ushbu aralash ta'riflar parvarish qilishni talab qiladi, chunki brauzerlar CSS muvofiqligini yangilaganligi sababli endi sizga kerak bo'lmagan maxsus sotuvchi prefikslarini olib tashlashni xohlashingiz mumkin.

Aralashmalardan foydalanish o'rniga oddiy CSS-ni yozish va prefikslarni talab qiladigan xususiyatlarni avtomatik ravishda aniqlash vositasiga ega bo'lish yaxshi bo'lar edi. CSS postprosessor aynan shu narsani bajarishga qodir. Masalan, agar siz autoprefiks plagini bilan PostCSS-dan foydalansangiz, hech qanday sotuvchi prefiksisiz to'liq CSS-ni yozishingiz mumkin va post-protsessorga qolgan ishlarni bajarishga ruxsat berishingiz mumkin:

h1, h2, h3, h4, h5, h6 {
  defislar: avto;
}

Ushbu kodda CSS postprosessorini ishlatsangiz, natija defislar bo'ladi: avtomatik; satr barcha etkazib beruvchilarning barcha prefikslari bilan almashtiriladi (to'g'ridan-to'g'ri boshqarish kerak bo'lmagan avtoprefiks plaginida ko'rsatilganidek). Demak, siz oddiy CSS-ni biron bir moslik yoki maxsus sintaksis haqida tashvishlanmasdan yozishingiz mumkin, bu juda yaxshi!

PostCSS uchun avtoprefiksdan tashqari plaginlar mavjud, ular sizga juda yoqimli narsalarni qilishga imkon beradi. Cssnext plagini eksperimental CSS xususiyatlaridan foydalanishga imkon beradi. CSS modullari plaginlari nomlarning ziddiyatini oldini olish uchun avtomatik ravishda sinflarni o'zgartiradi. Stylelint plagin CSS-dagi xatolar va nomuvofiq konventsiyalarni aniqlaydi. Ushbu vositalar, haqiqatan ham oxirgi yoki ikki yilda ishlab chiqarishni boshladi, bunda ilgari hech qachon mumkin bo'lmagan ishlab chiquvchilarning ish oqimlari namoyish etildi!

Biroq, ushbu yutuq uchun pul to'lash kerak. CSS postprocessorini o'rnatish va undan foydalanish PostCSS kabi CSS preprosessoridan foydalanish bilan solishtirganda ko'proq jalb qilinadi. Siz nafaqat buyruq satri yordamida vositalarni o'rnatishingiz va ishga tushirishingiz kerak, balki alohida plaginlarni o'rnatishingiz va sozlashingiz kerak va yanada murakkab qoidalar to'plamini (masalan, qaysi brauzerlarni va boshqalarni) aniqlab olishingiz kerak, masalan PostCSS-ni to'g'ridan-to'g'ri ishga tushirish o'rniga. buyruq satri, ko'plab ishlab chiquvchilar uni Grunt, Gulp yoki veb-paket kabi sozlanadigan tuzilish tizimlariga birlashtiradilar, bu sizning oldingi ish oqimida ishlatishingiz mumkin bo'lgan barcha turli xil vositalarni boshqarishga yordam beradi.

Eslatma: Agar siz ilgari hech qachon ishlatmagan bo'lsangiz, zamonaviy frontend tizimini yaratish uchun zarur bo'lgan barcha qismlarni o'rganish juda qiyin bo'lishi mumkin. Agar siz noldan boshlamoqchi bo'lsangiz, mening zamonaviy JavaScript izohlangan dinozavrlar uchun maqolamni ko'ring, u oldingi dastur ishlab chiqaruvchisi uchun ushbu zamonaviy xususiyatlardan foydalanish uchun zarur bo'lgan JavaScript-ning barcha vositalarini o'z ichiga oladi.

Shuni ta'kidlash kerakki, CSS postprosessorlari atrofida munozaralar mavjud. Ba'zilar terminologiyaning chalkashligini ta'kidlaydilar (bitta argument ularning barchasini CSS protsessorlari deb atash kerak, boshqa bir dalil shunchaki ularni CSS protsessorlari deb nomlash kerak va hokazo). Ba'zilar CSS postprosessorlari CSS protsessorlariga bo'lgan ehtiyojni butunlay yo'q qiladi, deb hisoblashadi, ba'zilari ularni birgalikda ishlatish kerak deb hisoblashadi. Qanday bo'lmasin, CSS-ning postprocessoridan qanday foydalanishni o'rganish, agar CSS-da mumkin bo'lgan narsaning chetini bosib o'tmoqchi bo'lsangiz, bunga arziydi.

Barqarorlik uchun CSS metodologiyasidan foydalanish

CSS-ning dastlabki protsessorlari va CSS-ning post-protsessorlari kabi vositalar CSS-ni rivojlantirish tajribasini yaxshilash uchun uzoq yo'lni bosib o'tishadi. Ammo CSS-ning yirik kod bazalarini saqlash muammosini hal qilish uchun ushbu vositalarning o'zi etarli emas. Buni hal qilish uchun odamlar CSS-ni qanday yozish haqida turli xil qo'llanmalarni hujjatlashtirishni boshladilar, odatda CSS metodologiyasi deb nomlanadi.

Biz biron bir CSS metodologiyasini o'rganishdan oldin, vaqt o'tishi bilan CSSni saqlash qiyin bo'lgan narsani tushunishimiz kerak. Asosiy muammo CSS-ning global tabiati - siz belgilagan har bir uslub sahifaning har bir qismiga global ravishda qo'llaniladi. Noyob sinf nomlarini saqlab qolish uchun batafsil nomlash konventsiyasini ishlab chiqish yoki biron bir elementga qaysi uslub qo'llanilishini aniqlash uchun o'ziga xoslik qoidalari bilan kurashish sizning vazifangiz bo'ladi. CSS metodologiyalari bu og'riqli nuqtalarni katta kodli bazalarga ega bo'lmaslik uchun CSS-ni yozish uchun uyushgan usulni ta'minlaydi. Keling, ba'zi mashhur metodologiyalarni qo'pol xronologik tartibda ko'rib chiqaylik.

OOKSS

OOCSS (Ob'ektga yo'naltirilgan CSS) birinchi marta 2009 yilda ikkita asosiy tamoyil atrofida tashkil etilgan metodologiya sifatida taqdim etildi. Birinchi qoida - bu alohida tuzilish va teri. Bu CSSni terini aniqlash uchun (ranglar, shriftlar va boshqalar kabi) strukturani (tartib kabi) CSS bilan birlashtirmaslik kerak degan ma'noni anglatadi. Bu dasturni "qayta terishni" osonlashtiradi. Ikkinchi tamoyil - bu alohida idish va tarkib. Bu elementlarni qayta ishlatilishi mumkin bo'lgan ob'ektlar deb o'ylash demakdir, bunda ob'ekt sahifada joylashganligidan qat'i nazar bir xil ko'rinishi kerak.

OOCSS puxta o'ylangan ko'rsatmalar beradi, ammo yondashuvning o'ziga xos xususiyatlariga mos kelmaydi. Keyinchalik SMACSS kabi yondashuvlar asosiy tushunchalarni oldi va ishni boshlashni osonlashtirish uchun qo'shimcha tafsilotlarni qo'shdi.

SMACSS

SMACSS (CSS uchun kengaytiriladigan va modulli arxitektura) 2011 yilda CSS-ni 5 ta alohida toifalarga - bazaviy qoidalar, tartib qoidalari, modullar, davlat qoidalari va mavzu qoidalari yozishga asoslanadigan metodologiya sifatida kiritilgan. SMACSS metodologiyasi, shuningdek, ba'zi nomlash konventsiyalarini tavsiya qiladi. Joylashtirish qoidalari uchun sinf nomlarini l- yoki layout- bilan prefiks qilgan bo'lar edingiz. Shtat qoidalariga ko'ra, siz yashirin yoki qulagan kabi davlatni tavsiflovchi sinf nomlarini oldingiz.

SMACSS OOCSS-ga nisbatan yondashuvda ko'proq o'ziga xos xususiyatlarga ega, ammo CSS qoidalarini qaysi toifaga kiritish kerakligi to'g'risida qaror qabul qilishda hali ham puxta o'ylashni talab qiladi. Keyinchalik BEM kabi yondashuvlar qabul qilinishni osonlashtirish uchun ba'zi qarorlarni bekor qildi.

BEM

BEM (Blok, Element, Modifikator) 2010 yilda foydalanuvchi interfeysini mustaqil bloklarga bo'lish g'oyasi atrofida tashkil etilgan metodologiya sifatida taqdim etilgan. Blok - bu qayta ishlatiladigan komponent (masalan,

sifatida belgilangan qidiruv shakli bo'lishi mumkin). Element - bu blokdan mustaqil ravishda qayta foydalanib bo'lmaydigan qismidir (masalan, sifatida belgilangan qidiruv shaklidagi tugma bo'lishi mumkin). . Modifikator - bu blok yoki elementning ko'rinishini, holatini yoki holatini belgilaydigan ob'ekt (masalan, kabi narsalar o'rniga sizda Qidiruv < / tugmasi> ni bosing.

Agar ushbu misolga birinchi munosabatingiz dahshatga qaytish bo'lsa, siz yolg'iz emassiz - ko'p odamlar ushbu metodologiyani CSS-ning eng yaxshi amaliyotlarini to'liq buzilishi deb bilishgan. Shu bilan birga, turli xil stsenariylarda ushbu eng yaxshi amaliyotning samaradorligini shubha ostiga qo'yish g'oyasi atrofida ko'plab ajoyib muhokamalar bo'lib o'tdi. Ushbu maqola juda yaxshi ish qiladi, chunki tashvishlarni an'anaviy ravishda ajratish HTMLga bog'liq bo'lgan CSS-ni yaratishga imkon beradi (BEM kabi metodologiyadan foydalanganda ham), atom yoki funktsional yondashuv CSS-ga bog'liq HTML yaratish haqida. Yomon emas, lekin yaqin tekshiruv natijasida CSS va HTML o'rtasidagi muammolarni haqiqiy ajratish hech qachon to'liq amalga oshirib bo'lmasligini ko'rishingiz mumkin!

Boshqa CSS metodologiyasi, JS-dagi CSS kabi CSS va HTML har doim bir-biriga bog'liq bo'lib, shu bilan birga eng munozarali metodologiyalarga olib keladi ...

JS-da CSS

JS-da CSS 2014 yilda alohida uslublar jadvalida emas, balki to'g'ridan-to'g'ri har bir tarkibiy qismda CSS uslublarini aniqlash atrofida tashkil etilgan metodologiya sifatida joriy etildi. Reaktiv Javascript tizimiga yondoshish sifatida joriy qilingan (bu alohida HTML-fayl o'rniga to'g'ridan-to'g'ri JavaScript-da tarkibiy qism uchun HTML-ni aniqlash bo'yicha munozarali yondashuvni o'z ichiga olgan). Dastlab metodologiya ichki uslublardan foydalanilgan, ammo keyinchalik amalga oshirilgan dasturlar CSS-ni yaratish uchun JavaScript-dan foydalangan (tarkibiy qismga asoslangan noyob klass nomlari bilan) va uni hujjatlar yorlig'i bilan hujjatga qo'shish uchun.

JS metodologiyasida CSS tashvishlarni ajratish bo'yicha CSS-ning o'rnatilgan eng yaxshi amaliyotiga yana bir bor qarshi. Buning sababi shundaki, biz Internetdan foydalanish usuli vaqt o'tishi bilan keskin o'zgarib ketdi. Dastlab veb asosan statik veb-saytlardan tashkil topgan - bu erda HTML tarkibini CSS taqdimotidan ajratish juda ma'no beradi. Hozirgi vaqtda veb dinamik veb-ilovalarni yaratishda ishlatiladi - bu erda narsalarni qayta ishlatiladigan tarkibiy qismlar bilan ajratish mantiqiy.

JS metodologiyasida CSS-ning maqsadi, o'zlarining kapsullangan HTML / CSS / JS-dan tashkil topgan qattiq chegaralari bo'lgan tarkibiy qismlarni aniqlash, shunday qilib bitta komponentdagi CSS-ning boshqa qismlarga ta'sir qilish imkoniyati bo'lmasligi kerak. React birinchi bo'lib keng tarqalgan qabul qilingan ramkalardan biri bo'lib, bu qismlarni qattiq chegaralar bilan surib qo'ydi va Angular, Ember va Vue.js singari boshqa asosiy ramkalarga ta'sir ko'rsatdi. Shuni ta'kidlash kerakki, JS metodologiyasida CSS nisbatan yangi va bu fazoda juda ko'p tajribalar olib borilmoqda, chunki ishlab chiquvchilar veb-ilovalar uchun komponentlar asrida CSS-ning eng yaxshi tajribalarini yaratishga harakat qilmoqdalar.

U erda mavjud bo'lgan CSS-ning turli xil metodologiyalaridan mahrum bo'lish juda oson, ammo bitta to'g'ri yondashuv yo'qligini yodda tutish kerak - siz ularni yetarlicha murakkab CSS-ga ega bo'lganda foydalanishingiz mumkin bo'lgan turli xil vositalar deb o'ylashingiz kerak. kod bazasi. Sizning foydangizga ishlarni tanlash uchun puxta o'ylangan turli xil variantlarga ega bo'lish va yaqinda ushbu fazoda yuz bergan barcha tajribalar har bir ishlab chiqaruvchiga foyda keltiradi!

Xulosa

Shunday qilib, bu qisqacha aytganda zamonaviy CSS. Biz tipografik xususiyatlarga ega asosiy uslublar uchun CSS-dan foydalanganmiz, CSS-ni float, fleksbox va panjara asosidagi yondashuvlardan foydalangan holda CSS-ni ishlatib, o'zgaruvchilar va aralashmalar kabi yangi sintaksis uchun CSS-ning protsessoridan foydalanganmiz, sotuvchi prefikslarni qo'shish kabi transformatsion xususiyatlar uchun CSS postprocessoridan foydalanganmiz. , va CSS uslublarining global xususiyatini engish uchun barqarorlik uchun CSS metodologiyasidan foydalanish. Oldindan tanlanganlar, o'tishlar, animatsiyalar, shakllar, dinamik o'zgaruvchilar kabi CSS taklif qiladigan ko'plab boshqa funktsiyalarni o'rganish imkoniga ega bo'lmadik - ro'yxat davom etadi. CSS bilan qoplash uchun juda ko'p joy bor - kimdir oson desa, ehtimol uning yarmini bilmaydi!

Zamonaviy CSS, albatta, o'zgarishi va tez sur'atlar bilan rivojlanishini davom ettirish bilan ishlashda asabiylashishi mumkin. Ammo vaqt o'tishi bilan Internet qanday rivojlanganligining tarixiy kontekstini eslab qolish juda muhim va u erda CSS-ning eng yaxshi tajribalari Internet bilan birga rivojlanishiga yordam beradigan aniq vositalar va metodologiyalarni yaratishga tayyor bo'lgan ko'plab aqlli odamlar borligini bilish yaxshi. . Dasturchi bo'lish uchun juda ajoyib vaqt, va umid qilamanki, ushbu ma'lumot sayohatingizda sizga yordam beradigan yo'l xaritasi bo'lib xizmat qilishi mumkin!

@ Ryanqnorth-ning 2003 yildan beri eng bema'ni absurdistik hazillarini ijro etgan Dinozavr komiksiga yana bir bor minnatdormiz (dinozavrlar Internetni boshqargan paytlarda).