Det vigtigste CSS-koncept at lære

Den Cascade er, hvordan CSS er designet fra starten, og der er en grund til det hedder CSS - Cascading Style Sheets!

Desværre har CSS et dårligt ry for det samme grundlæggende koncept, som det er bygget på.

Men hvad er Cascade nøjagtigt, og er den så dårlig, som de fleste får den til at lyde?

Introduktion

Lad os sige, at John skriver en masse CSS og derefter går ind i browseren for at teste den. Til sin overraskelse er de stilarter, han skrev, ikke anvendt på det element, han lige har stylet, i stedet for nogle andre stilarter!

Ser du det lige der? Det er en af ​​de værste ting, som alle klager over, når de siger "CSS suger".

Med CSS kan flere stilarter påvirke et enkelt element. Så du har en paragraphpå en webside. Men dette paragraphkan være stylet af enhver CSS-blok, bogstaveligt talt.

Det er som at have en global JavaScript-variabel, der kan manipuleres af enhver funktion i koden. En opskrift på katastrofe ser det ud til.

Men igen udgør Cascade den grundlæggende begrundelse for, hvordan CSS blev oprettet i første omgang.

Omfavn det?

Du kan ikke ændre det.

Hvad er kaskaden?

Kaskaden er, hvordan browseren bestemmer, hvilke stilarter der skal anvendes på et bestemt element. Det er så simpelt, og det giver et anstændigt interviewspørgsmål til en front-end-udvikler.

Heldigvis kan de mareridt, der er forbundet med kaskaden, forstås, da den styres af kun to faktorer:

  1. Elementvælgernes specificitet
  2. Rækkefølgen af ​​de stilarter, der skrives

Lad os se hurtigt på dem.

Selector specificitet

Du kan sammenligne vælgerens specificitet med, hvordan det menneskelige sind fortolker instruktioner.

Overvej f.eks. Nedenstående grafik:

Hvis jeg sagde til dig: "Giv mig den røde kasse.", Hvilken ville du så give mig? Der er to af dem!

Du kan stille opfølgningsspørgsmålet, "Hvilke af felterne, a eller b?" .

Eller du kan endda få fat i begge kasser! Er de ikke begge røde kasser?

Dette er den situation, browseren finder sig i, når han beskæftiger sig med specificitet.

Når du siger, skal du styre afsnittet med en rød baggrundsfarve ...

p { background-color: red;}

Da der kunne være mange afsnitelementer på siden, siger browseren "hvilket afsnit?"

Browseren kan ikke stille dig et opfølgningsspørgsmål, så det fortsætter og forsøger at style hvert afsnit på siden med en redbaggrund.

Men hvis du var gået i gang med at sige, skal du styre afsnittet med et klassenavn reddymed en rød baggrund:

p.reddy { background-color: red;}

Det er en mere specifik anmodning!

Nu styler browseren det eller de specifikke afsnitselementer, du har anmodet om.

Det er det!

Teknisk set kigger browseren på hver vælger, der målretter mod et bestemt element og tildeler "scores" til hver af dem, og den med en højere specificitetsscore vinder.

Den måde, det beregner scoringerne på, er enkel.

Antag, at browseren - mens du fortolker din CSS - havde 4 målindlæg.

  1. For hver inline-stil, der målretter mod et element ved hjælp af styleattributten, tildeles 1 mål til målindlægget (a).
  2. For hver idvælger tildeles 1 mål til indlægget (b).
  3. For hver classvælger, attributvælger og tilstedeværende pseudoklasser tildeles der 1 mål til indlægget (c).
  4. For hver elementvælger og pseudo-element tildeles der 1 mål til indlægget (d).

Den måde jeg husker dette på er ved at bruge akronymet SICAPEP:

Ved tildeling af point beregnes de samlede point ved sammenkædning som cifre i et firecifret tal.

Et eksempel på hurtig specificitet

Overvej følgende stilerklæringer:

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

Hvordan ville browseren beregne specificiteten "point" for disse vælgere?

#nav .removed > a:hover

Her er fordelingen:

(a) Der er ingen indbygget stil, så resultatet for det første målpost er 0.

(b) Der er en idvælger, #navdet er en score på 1 for det andet målstolpe.

(c) Der er også en classvælger .removedog en pseudoklasse-vælger :hover, der opsummerer til en score på 2 for det tredje målpost.

(d) Der er en elementvælger, adet er en score på 1 i det fjerde indlæg.

Her er den grafiske gengivelse af scores.

Den samlede specificitetsscore sammenkædes som 0121.

Som med almindelig matematik, 0001er mindre end 0005, og 0121er større end 0021.

Nu forstår du, hvordan specificitet beregnes.

Kan du forsøge at beregne specificiteten for den anden vælger li:last-child h3 .title?

Lad mig vide, hvad du kommer til i kommentarfeltet :)

Stilbestilling

Den anden faktor, der påvirker kaskaden, er rækkefølgen af ​​stilarter. Et virkelig grundlæggende eksempel kan ses med styling af det samme element i 2 forskellige kodeblokke.

For eksempel:

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

Selvom begge vælgere har samme specificitet, 0011kommer rækkefølgen af ​​regelsættet i spil.

Den anden erklæring vil tilsidesætte den førstnævnte, og afsnittet vil være blåt og ikke rødt.

Trick spørgsmål

I betragtning af nedenstående dokument, hvad ville farven på linkteksten have?

 Inline Styles and Specificity  #nav-force > ul > li > a.nav-link { color: blue; };     
  • Link
  • Blå eller rød?

    Bemærk, at linket er stylet både inline og inden for < / style> -blokken.

    Åh, hvis du føler dig selvsikker, skal du bare sige svaret højt - til dig selv.

    Men det virkelige svar er, at den integrerede stil altid vinder. Målet scorer i det første indlæg, som slår ethvert mål i et af de andre indlæg.

    Hvorfor?

    Den endelige specificitet vil være i størrelsesordenen tusinder - 1000 - og det slår 9 mål i det andet indlæg. 1000 er større end 0900.

    BEMÆRK: Som påpeget af Paul McCann i kommentarsektionen, er afsnittet ovenfor en overforenkling. Se på hvad han siger.

    Konklusion

    Forhåbentlig er du nu bevæbnet med den solide forståelse af, hvordan kaskaden fungerer. At lære mere avanceret CSS vil nu sandsynligvis komme lettere, og vigtigere, du ved nu, hvor du skal se, når du har de irriterende bugs.

    Ses senere!

    Klar til at blive Pro?

    Jeg har oprettet en gratis CSS-guide for straks at få dine CSS-færdigheder flammende. Få den gratis e-bog.