Svarbiausia mokytis CSS koncepcija

Cascade“ yra tai, kaip CSS buvo kuriamas nuo pat pradžių, ir yra priežastis, kodėl ji vadinama CSS - „Cascading Style Sheets“!

Deja, CSS turi prastą reputaciją dėl tos pačios pagrindinės koncepcijos, kuria remiasi.

Bet kas iš tikrųjų yra „Kaskadas“ ir ar jis toks blogas, kaip dauguma žmonių priverčia jį skambėti?

Įvadas

Tarkime, Jonas parašo krūvą CSS ir tada patenka į naršyklę, kad ją išbandytų. Jo nuostabai, jo parašyti stiliai netaikomi jo ką tik sukurtam elementui, o kai kurie kiti stiliai yra!

Jūs matote tai čia pat? Tai vienas blogiausių dalykų, dėl kurių visi skundžiasi sakydami „CSS sucks“.

Naudojant CSS, keli stiliai gali paveikti vieną elementą. Taigi, jūs turite paragraphtinklalapį. Bet tai paragraphgali būti sukurtas bet kurio CSS bloko, pažodžiui.

Tai panašu į visuotinį „JavaScript“ kintamąjį, kurį galima valdyti bet kuria kodu esančia funkcija. Atrodo, katastrofos receptas.

Bet vėlgi, „Cascade“ yra pagrindinis argumentas, kodėl pirmiausia buvo sukurta CSS.

Priimti jį?

Na, tu negali jo pakeisti.

Kas yra kaskada?

Kaskada yra tai, kaip naršyklė nustato, kokius stilius taikyti konkrečiam elementui. Tai taip paprasta, ir tai kelia padorų interviu klausimą „front-end“ kūrėjui.

Laimei, košmarus, susijusius su kaskadu, galima suprasti, nes tai lemia tik du veiksniai:

  1. Elementų selektorių specifika
  2. Rašomų stilių tvarka

Greitai pažvelkime į tuos.

Selektoriaus specifika

Galite palyginti selektoriaus specifiką su tuo, kaip žmogaus protas interpretuoja nurodymus.

Pavyzdžiui, apsvarstykite toliau pateiktą grafiką:

Jei aš tau pasakyčiau: „Perduok man raudoną dėžę.“, Kurią man perduotum? Yra du iš jų!

Galite užduoti tolesnį klausimą: „Kuris iš langelių, a ar b?“ .

Arba jūs netgi galite patraukti abi dėžes! Ar ne jie abu raudoni langeliai?

Šioje situacijoje naršyklė atsiduria spręsdama specifiką.

Kai sakote, pastraipą suformuokite raudona fono spalva ...

p { background-color: red;}

Kadangi puslapyje gali būti daug pastraipų elementų, naršyklė sako „kokia pastraipa?“

Naršyklė negali užduoti jums tolesnio klausimo, todėl eina į priekį ir bando suformuoti kiekvieną puslapio pastraipą su redfonu.

Tačiau, jei jūs ketinote sakyti, suformuokite pastraipą klasės pavadinimu reddyraudonu fonu:

p.reddy { background-color: red;}

Tai konkretesnis prašymas!

Dabar naršyklė sukurs stilių konkretaus (-ių) paragrafo elemento (-ų), kurio (-ų) paprašėte.

Viskas!

Techniškai naršyklė apžvelgia kiekvieną pasirinkiklį, nukreipiantį į konkretų elementą ir kiekvienam iš jų priskiriančius „balus“, o tas, kurio specifiškumo balas yra aukštesnis, laimi.

Rezultatų skaičiavimo būdas yra paprastas.

Tarkime, kad naršyklė, aiškindama savo CSS, turėjo 4 tikslo įrašus.

  1. Kiekvienam įterptam stiliui, kuris nukreiptas į elementą, naudojant styleatributą, 1 tikslas priskiriamas tikslo įrašui (a).
  2. Kiekvienam idpasirinkėjui priskiriamas 1 tikslas paskelbti (b).
  3. Kiekvienam classpasirinkėjui, atributų parinkėjui ir pseudoklasėms priskiriamas po 1 tikslą (c).
  4. Kiekvienam elementų selektoriui ir pseudoelementui priskirtas 1 tikslas (d).

Tai prisimenu naudodamas akronimą SICAPEP:

Priskiriant taškus, visi taškai apskaičiuojami susiejant , kaip skaitmenys iš 4 skaitmenų.

Greito konkretumo pavyzdys

Apsvarstykite šias stiliaus deklaracijas:

#nav .removed > a:hover {}
li:last-child h3 .title {}

Kaip naršyklė apskaičiuotų šių pasirinkėjų specifiškumo „taškus“?

#nav .removed > a:hover

Štai suskirstymas:

a) Nėra įterptinio stiliaus, todėl pirmojo vartų posto rezultatas yra 0.

(b) Yra vienas idatrinkėjas, #navtai yra 1 balas už antrą vartų postą.

(c) Taip pat yra vienas classpasirinkėjas .removedir vienas pseudo klasės pasirinkimas :hover, kuris sudaro trečiojo įvarčio 2 balą.

d) Yra vienas elementų parinkiklis, atai yra 1 balas ketvirtame įraše.

Pateikiame grafinį balų vaizdą.

Bendras specifiškumo balas sujungiamas kaip 0121.

Kaip ir įprastos matematikos atveju, 0001yra mažesnė 0005ir 0121didesnė nei 0021.

Dabar jūs suprantate, kaip apskaičiuojamas konkretumas.

Ar galite pabandyti apskaičiuoti kito pasirinkiklio specifiškumą li:last-child h3 .title?

Praneškite man, ką pasiekėte komentarų skiltyje :)

Stiliaus tvarka

Antras kaskadą veikiantis veiksnys yra stilių tvarka. Tikrai paprastą pavyzdį galima pamatyti suformavus tą patį elementą 2 skirtinguose kodų blokuose.

Pavyzdžiui:

p.reddy { background: red;}p.reddy { background: blue;}

Nors abiejų pasirinkėjų specifika yra vienoda, 0011žaidžiama taisyklių rinkinio tvarka.

Antroji deklaracija pakeis pirmąją, pastraipa bus mėlyna, o ne raudona.

Keblus klausimas

Atsižvelgiant į toliau pateiktą dokumentą, kokia būtų nuorodos teksto spalva?

 Inline Styles and Specificity  #nav-force > ul > li > a.nav-link { color: blue; };     
  • Link
  • Mėlyna ar raudona?

    Atkreipkite dėmesį, kad nuoroda yra sukurta tiek įterpta, tiek < / style> bloke.

    O, jei jaučiatės užtikrintai, tiesiog pasakykite atsakymą garsiai - sau.

    Tačiau tikrasis atsakymas yra tas, kad visada laimi linijinis stilius. Įvarčiai yra įmušti pirmame įraše, kuris muša visus įvarčius bet kuriame kitame įraše.

    Kodėl?

    Galutinis konkretumas bus maždaug tūkstančiai - 1000 - ir tai muša 9 įvarčius antrajame įraše. 1000 yra didesnis nei 0900.

    PASTABA: Kaip pažymėjo Paulas McCannas komentarų skyriuje, aukščiau pateikta pastraipa yra pernelyg paprastas dalykas. Pažvelk į tai, ką jis sako.

    Išvada

    Tikimės, kad dabar esate ginkluotas tvirtai suprasdamas, kaip veikia kaskada. Išmokti pažangesnę CSS dabar tikriausiai bus lengviau, ir, dar svarbiau, dabar jūs žinote, kur ieškoti, kai turite tų nemalonių klaidų.

    Susimatysime veliau!

    Pasirengęs tapti profesionalu?

    Aš sukūriau nemokamą CSS vadovą, kad jūsų CSS įgūdžiai būtų nedelsiant įsiplieskę. Gaukite nemokamą el. Knygą.