Sådan håndteres CSS-specificitetsproblemer, og hvornår du skal bruge det! Vigtige nøgleord

En casestudie

For nylig var der en Twitter-afstemning, der svævede rundt, hvor brugeren stillede deres tilhængere et spørgsmål om CSS-specificitet. Desværre kunne jeg ikke finde den originale tweet (kommentar nedenfor, hvis du tilfældigvis finder den!) Men lang historie kort, flertallet af mennesker fik svaret forkert.

Denne Twitter-afstemning (og dens efterfølgende) førte til, at jeg forstærkede min egen viden om emnet specificitet og fik mig igen til at begynde at løse specificitetsproblemer i mine egne projekter - hvilket bringer mig til formålet med dette indlæg.

I dette indlæg vil vi omlægge CSS-kode fra et projekt af mig, der har CSS-specificitetsproblemer, der har brug for at blive rettet.

CSS-specificitet

Definition

Specificitet beskrives af MDN Web Docs som:

det middel, hvormed browsere bestemmer, hvilke CSS-egenskabsværdier der er mest relevante for et element og derfor anvendes.

Regler

Når man beslutter, hvilke CSS-egenskabsværdier, der er mest relevante at anvende på et element, bruger browseren kildearrangementet (dvs. kaskaden) i CSS-stilarket til at bestemme dette. Men denne regel gælder, når CSS-vælgerne har samme specificitet. Hvad sker der, når specificiteten af ​​en CSS-vælger er højere end en anden?

I så fald bruger browsere specificiteten af ​​en CSS-vælger til at bestemme, hvilke CSS-udsagn der skal anvendes. Jo højere specificiteten af ​​en CSS-vælger er, desto mere sandsynligt vil browsere anvende sine CSS-erklæringer over en anden.

nav a { color: green; } a { color: red; }

For eksempel i eksemplet ovenfor er begge CSS-vælgerne målrettet mod det samme HTML-element, ankermærket. For at bestemme hvilken CSS-regel, der skal anvendes på ankermærket, beregner browseren specificitetsværdien og kontrollerer, hvilken der er den højeste. I dette tilfælde har den første vælger en højere specificitetsværdi, derfor bruger browseren sine erklæringer til at gælde for ankermærket.

Jeg vil gerne påpege her, at selvom ! Vigtig ikke er en CSS-vælger, er det et nøgleord, der bruges til kraftigt at tilsidesætte en CSS-regel uanset specificitet, oprindelse eller kilde rækkefølge for en CSS-vælger. Nogle brugssager inkluderer:

  • Midlertidige rettelser (lidt som at lægge tape på et utæt rør)
  • Tilsidesættelse af integreret styling
  • Test / debugging formål

Så nyttigt som at bruge det ! Vigtige nøgleord kan synes, kan brugen af ​​det være mere problematisk end nyttigt. Over tid kan det gøre det vanskeligt at vedligeholde din CSS, og det kan påvirke læsbarheden af ​​dit typografiark negativt, især for alle andre, der er eller vil arbejde med det i fremtiden.

Hvilket bringer os til, hvad vi skal gøre i dag - løse specifikke problemer i et projekt.

Projektet

En lille baggrund om det projekt, vi refaktorer - det er en Netflix-inspireret destinationsside, der bruger MovieDBs API.

Stilarket

Målet er at fjerne nøgleordet "! Vigtig" fra CSS-reglerne, som det er blevet anvendt på, ved at omlægge koden, så den følger specificitetsregler.

Nedenfor kan du se stilarket til projektet.

@import url("//fonts.googleapis.com/css?family=Montserrat:400,400i,700"); body { margin: 0; padding: 0; overflow-x: hidden; } .wrapper { width: 100%; } .wrapper #header { position: fixed; z-index: 300; padding: 15px; width: calc(100% - 30px); display: flex; justify-content: space-between; align-items: center; background: linear-gradient(to bottom, black 0%, transparent 100%); } .wrapper #header #brand-logo { color: #d32f2f; text-shadow: 1px 1px 2px black; letter-spacing: 5px; text-transform: uppercase; font-family: Montserrat; font-weight: bold; font-size: 22px; } .wrapper #header #menu-icon { display: none; } .wrapper #header .nav-link, .wrapper #header .icon { color: #bdbdbd; cursor: pointer; } .wrapper #header .nav-menu { width: 400px; display: flex; justify-content: space-around; align-items: center; } .wrapper #header .nav-link { padding: 5px 10px; font-size: 15px; font-family: century gothic; text-decoration: none; transition: background-color 0.2s ease-in; } .wrapper #header .nav-link:hover { color: #c62828; background-color: rgba(0, 0, 0, 0.7); } .wrapper #header .icon { font-size: 16px; } .wrapper #header .icon:hover { color: #c62828; } .wrapper #site-banner, .wrapper #categories { width: 100%; } .wrapper #site-banner { height: 550px; background-image: url("//s1.gifyu.com/images/rampage_2018-1024x576.jpg"); background-size: cover; background-position: center; background-repeat: no-repeat; background-attachment: fixed; } .wrapper #site-banner .main-movie-title, .wrapper #site-banner .watch-btn, .wrapper #site-banner .main-overview { position: absolute; z-index: 3; } .wrapper #site-banner .main-movie-title, .wrapper #site-banner .watch-btn { text-transform: uppercase; } .wrapper #site-banner .main-movie-title { top: 120px; left: 20px; background: -webkit-linear-gradient(#ff9100, #dd2c00); -webkit-background-clip: text; -webkit-text-fill-color: transparent; font-size: 55px; font-family: Montserrat; font-weight: bold; } .wrapper #site-banner .main-overview { width: 400px; top: 230px; left: 25px; color: #fafafa; line-height: 25px; font-family: helvetica; } .wrapper #site-banner .watch-btn { width: 150px; height: 35px; top: 350px; left: 25px; border: none; border-radius: 20px; color: #fafafa; cursor: pointer; transition: all 0.2s ease-in; background-color: #ff0000; box-shadow: 1px 5px 15px #940000; } .wrapper #site-banner .watch-btn:hover { color: #F5F5F5; background-color: #940000; } .wrapper .after { position: relative; top: 0; left: 0; z-index: 2; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.3); } .wrapper #categories { padding: 30px 0; display: flex; flex-direction: column; background: linear-gradient(to top, #090909 0%, #000000 100%); overflow: hidden; } .wrapper #categories .category { margin: 30px 0; } .wrapper #categories .category-header, .wrapper #categories .content { margin-left: 20px; color: #B0BEC5; font-family: helvetica; } .wrapper #categories .category-header { margin-bottom: 50px; font-weight: normal; letter-spacing: 5px; } .wrapper #categories .content { position: relative; right: 0; display: flex; justify-content: flex-start; transition: all 3s ease-in-out; } .wrapper #categories .movie { margin-right: 10px; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; } .wrapper #categories .movie-img { transition: all 0.2s ease-in; } .wrapper #categories .movie-img:hover { -webkit-filter: contrast(1.1); filter: contrast(1.1); -webkit-transform: scale(1.05); transform: scale(1.05); cursor: pointer; } .wrapper #footer { width: 100%; height: 120px; background-color: #090909; display: flex; align-items: flex-end; justify-content: flex-start; } .wrapper #footer #copyright-label { margin-left: 20px; padding: 10px; color: rgba(255, 255, 255, 0.3); opacity: 0.7; letter-spacing: 2px; font-family: helvetica; font-size: 12px; } //Media Query @media (max-width: 750px) { .nav-menu { visibility: hidden; } #menu-icon { display: block !important; font-size: 22px; } .main-movie-title { font-size: 45px !important; } .main-overview { width: 350px !important; font-size: 14px !important; } .watch-btn { width: 130px !important; height: 25px !important; font-size: 13px; } .movie-img { width: 170px; } }

Så vi kan se fra stilarket, at brugen af ​​det ! Vigtige nøgleord hovedsagelig er fokuseret i sektionen medieforespørgsel, der skitserer de stilarter, som browseren skal anvende, når skærmbredden er mindre end 750 pixels.

Så hvad sker der, når vi fjerner det ! Vigtige nøgleord fra CSS-reglerne, som det er blevet anvendt på? Nå, vi har ikke længere et "trumfkort", der kraftigt tilsidesætter CSS-reglerne for andre CSS-vælgere, der er målrettet mod det samme HTML-element. Så browseren vil se på stilarket for at se, om der er nogen modstridende CSS-regler.

Hvis der er, for at bestemme hvilke CSS-regler, der skal anvendes over en anden, bruger browseren kildearrangementet, specificiteten og betydningen af ​​CSS-vælgerne. Hvis CSS-vælgerne med modstridende CSS-regler har samme specificitet, bruger browseren kildeforskriftereglen og anvender CSS-reglerne i CSS-vælgeren, der kommer lavere ned i stilarket. Ved hjælp af disse oplysninger kan vi se, at denne situation ikke er tilfældet for vores stilark.

Men hvis CSS-vælgerne med modstridende CSS-regler ikke har samme specificitet, vil browseren anvende CSS-reglerne i CSS-vælgeren, der har højere specificitet. Vi kan se fra vores stilark, at dette er tilfældet; CSS-vælgerne i vores medieforespørgsel har lavere specificitet end CSS-vælgerne i hoveddelen af ​​vores stilark.

Nu hvor vi har identificeret problemet, lad os løse det!

Først skal vi finde de tilsvarende CSS-vælgere, der matcher CSS-vælgerne i vores medieforespørgsel.

.wrapper #header #menu-icon { display: none; } .wrapper #site-banner .main-movie-title { ... font-size: 55px; ... } .wrapper #site-banner .main-overview { width: 400px; ... } .wrapper #site-banner .watch-btn { width: 150px; height: 35px; ... } @media (max-width: 750px) { #menu-icon { display: block !important; ... } .main-movie-title { font-size: 45px !important; } .main-overview { width: 350px !important; font-size: 14px !important; } .watch-btn { width: 130px !important; height: 25px !important; ... } }

Vi kan se, at CSS-vælgerne i hoveddelen af ​​stilarket har højere specificitet end de tilsvarende CSS-vælgere i medieforespørgslen. På trods af CSS-vælgerne i medieforespørgslen, der vises senere i stilarket, vil browseren anvende CSS-reglerne for de CSS-vælgere, der kommer foran den, på grund af specificitetsregler (som har forrang over kildeforskrifteregler).

For at løse dette skal vi øge specificitetsværdierne for CSS-vælgerne i medieforespørgslen. Hvis vi sørger for, at CSS-vælgerne, der målretter mod de samme HTML-elementer, har samme specificitet, så vil browseren følge kildeforskriftereglen. CSS-reglerne, der er skitseret i medieforespørgslen (der findes nederst i stilarket), vil blive anvendt, når skærmbredden er mindre end 750 pixels.

Slutresultatet vil se sådan ud:

.wrapper #header #menu-icon { display: none; } .wrapper #site-banner .main-movie-title { ... font-size: 55px; ... } .wrapper #site-banner .main-overview { width: 400px; ... } .wrapper #site-banner .watch-btn { width: 150px; height: 35px; ... } @media (max-width: 750px) { .wrapper #header #menu-icon { display: block; ... } .wrapper #site-banner .main-movie-title { font-size: 45px; } .wrapper #site-banner .main-overview { width: 350px; font-size: 14px; } .wrapper #site-banner .watch-btn { width: 130px; height: 25px; font-size: 13px; } }

Og det er det! Vi har fjernet alle spor af det ! Vigtige nøgleord fra stilarket. Allerede kan vi se, at stilarket er lettere at læse, og du kan forestille dig, at vores refaktoriserede typografiark ville være meget lettere at arbejde med og vedligeholde (især hvis andre også vil arbejde på det).

Konklusion

Så hvad har vi lært?

Vi har lært om, hvordan browsere bestemmer, hvilke CSS-stilarter der skal anvendes, ved hjælp af vælgernes kildeordre, specificitet og oprindelse. Vi har også lært om de problemer, der kan opstå ved at bruge ! Vigtig i din CSS, og hvorfor brugen af ​​den skal holdes på et minimum.

Vi behøver ikke at ty til at bruge ! Vigtigt for at ordne ting - der er meget bedre løsninger derude.

Begrebet specificitet er et, der kan tage et stykke tid at få hovedet rundt, men jeg håber, at det ved at dokumentere processen og bruge et rigtigt projekt hjælper dig med bedre at forstå begrebet specificitet og hvordan du anvender det i din egen CSS.

Yderligere ressourcer

  • MDN Web Docs
  • Batficity af Mandy Michael
  • CSS Specificity Wars af Andy Clarke
  • Specificity Visualizer af Francesco Schwarz.
  • Når du bruger! Vigtigt er det rigtige valg af Chris Coyier

Du kan finde det projekt, vi har arbejdet med her.

Jeg håber du nød dette indlæg! Hvis du gjorde det, ❤️,? og del! Indtil næste gang! ✌️