Kako se spoprijeti s specifičnostmi CSS in kdaj uporabiti ključno besedo!

Študija primera

Pred kratkim je okoli Twitter plula anketa, kjer je uporabnik zasledovalcem postavil vprašanje o specifičnosti CSS. Na žalost nisem mogel najti prvotnega tvita (spodaj komentiraj, če ga slučajno najdeš!), Vendar na kratko, večina ljudi je odgovor dobila napačno.

Ta anketa na Twitterju (in posledice) me je pripeljala do tega, da sem se osredotočil na lastno znanje o temi specifičnosti, nato pa sem začel s popravljanjem težav s specifičnostjo v svojih projektih - kar me pripelje do namena te objave.

V tem prispevku bomo preoblikovali kodo CSS iz mojega projekta, ki ima težave s specifičnostjo CSS, ki jih je treba popraviti.

Specifičnost CSS

Definicija

MDN Web Docs opisuje specifičnost kot:

način, s katerim brskalniki odločajo, katere vrednosti lastnosti CSS so najpomembnejše za element in jih zato uporabljajo.

Pravila

Ko se odloča, katere vrednosti lastnosti CSS so najpomembnejše za uporabo v elementu, brskalnik za določitev tega uporabi izvorni vrstni red (tj. Kaskadno) sloga CSS. Toda to pravilo velja, kadar imajo izbirniki CSS enako specifičnost. Kaj se zgodi, ko je specifičnost enega izbirnika CSS večja od drugega?

V tem primeru bodo brskalniki uporabili specifičnost izbirnika CSS, da določijo, katere stavke CSS uporabiti. Večja kot je specifičnost izbirnika CSS, večja je verjetnost, da bodo brskalniki uporabili njegove izjave CSS nad drugim.

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

Na primer, v zgornjem primeru oba izbirnika CSS ciljata na isti element HTML, sidrno oznako. Da bi določil, katero pravilo CSS uporabiti za sidrno oznako, brskalnik izračuna vrednost specifičnosti in preveri, katero je najvišje. V tem primeru ima prvi izbirnik višjo vrednost specifičnosti, zato bo brskalnik uporabil svoje izjave za uporabo sidrne oznake.

Tu bi rad poudaril, da čeprav ! Important ni izbirnik CSS, je ključna beseda, ki se uporablja za prisilno preglasitev pravila CSS ne glede na vrednost specifičnosti, izvor ali vrstni red izbirnika CSS. Nekateri primeri uporabe vključujejo:

  • Začasni popravki (podobno kot da bi lepilni trak položili na netesno cev)
  • Preglasitev vrstnega oblikovanja
  • Namen testiranja / odpravljanja napak

Ne glede na to, kako uporabna ključna beseda ! Se zdi koristna , je uporaba le-te lahko bolj problematična kot koristna. Sčasoma lahko oteži vzdrževanje CSS-ja in lahko negativno vpliva na berljivost vašega sloga, zlasti za vse, ki z njim sodelujejo ali bodo sodelovali v prihodnosti.

Kar nas pripelje do tega, kar bomo počeli danes - odpravljanja težav s specifičnostmi v projektu.

Projekt

Nekaj ​​ozadja o projektu, ki ga bomo preoblikovali - to je ciljna stran, ki jo navdihuje Netflix in uporablja API za MovieDB.

Preglednica

Cilj je odstraniti ključno besedo "! Important" iz pravil CSS, za katero je bila uporabljena, tako da preoblikujemo kodo tako, da sledi pravilom specifičnosti.

Spodaj si lahko ogledate tabelo slogi za projekt.

@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; } }

Iz preglednice stilov torej lahko vidimo, da je uporaba ključne besede ! Important v glavnem osredotočena na odsek za predstavnostna sporočila, ki opisuje sloge, ki jih mora brskalnik uporabiti, ko je širina zaslona manjša od 750 slikovnih pik.

Torej, kaj se zgodi, ko ključno besedo ! Odstranimo iz pravil CSS, za katero je bila uporabljena? No, nimamo več "aduta", ki bi močno preglasil pravila CSS drugih izbirnikov CSS, ki ciljajo na isti element HTML. Torej, brskalnik bo pogledal tabelo slogov in ugotovil, ali obstajajo nasprotujoča si pravila CSS.

Če obstajajo, potem brskalnik, da bi določil, katera pravila CSS uporabiti za druga, uporabi izvorni vrstni red, specifičnost in pomembnost izbirnikov CSS. Če imajo izbirniki CSS z nasprotujočimi si pravili CSS enako specifičnost, potem bo brskalnik uporabil pravilo izvornega vrstnega reda in uporabil pravila CSS izbirnika CSS, ki se spodaj spusti v slogi. Na podlagi teh informacij lahko ugotovimo, da to ne velja za našo sliko.

Če pa izbirniki CSS z nasprotujočimi si pravili CSS nimajo enake natančnosti, bo brskalnik uporabil pravila CSS izbirnika CSS, ki ima večjo specifičnost. Iz našega obrazca lahko vidimo, da je temu tako; izbirniki CSS v naši medijski poizvedbi imajo nižjo specifičnost kot izbirniki CSS v glavnem delu našega sloga.

Zdaj, ko smo ugotovili težavo, jo odpravimo!

Najprej moramo poiskati ustrezne izbirnike CSS, ki se ujemajo z izbirniki CSS v naši medijski poizvedbi.

.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; ... } }

Vidimo lahko, da imajo izbirniki CSS v glavnem delu sloga višjo specifičnost kot ustrezni izbirniki CSS v medijski poizvedbi. Kljub temu, da se izbirniki CSS v medijski poizvedbi pojavijo kasneje v tabeli slogi, bo brskalnik zaradi pravil specifičnosti (ki imajo prednost pred pravili vrstnega reda) uporabil pravila CSS izbirnikov CSS, ki so pred njim.

Da bi to popravili, moramo v medijski poizvedbi povečati vrednosti specifičnosti izbirnikov CSS. Če naredimo tako, da imajo izbirniki CSS, ki ciljajo na iste elemente HTML, enako specifičnost, potem brskalnik upošteva pravilo vrstnega reda. Pravila CSS, opisana v medijski poizvedbi (ki se nahaja spodaj na slogovnem listu), se bodo uporabila, ko bo širina zaslona manjša od 750 slikovnih pik.

Končni rezultat bo videti takole:

.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; } }

In to je to! Odstranili smo vse sledove ! Pomembne ključne besede iz slogom. Že zdaj vidimo, da je tabelo slogi lažje brati, in lahko si predstavljate, da bi bilo z našo predelano tabelo slogov veliko lažje delati in jo vzdrževati (še posebej, če bodo na njej delali tudi drugi).

Zaključek

Torej, kaj smo se naučili?

Spoznali smo, kako brskalniki določajo, katere sloge CSS uporabiti z uporabo izvornega vrstnega reda, specifičnosti in izvora izbirnikov. Spoznali smo tudi težave, ki se lahko pojavijo z uporabo ! Pomembnega v vašem CSS, in zakaj bi bilo treba njegovo uporabo čim bolj zmanjšati.

Ni nam treba zateči k uporabi ! Pomembnega, da bi stvari popravili - tam je veliko boljših rešitev.

Koncept specifičnosti lahko traja nekaj časa, da si omislite glavo, vendar upam, da vam z dokumentiranjem postopka in uporabo resničnega projekta pomaga bolje razumeti koncept specifičnosti in kako ga uporabiti v svojem CSS-ju.

Dodatni viri

  • MDN spletni dokumenti
  • Batficity Mandy Michael
  • CSS Specificity Wars Andy Clarke
  • Vizualizator specifičnosti Francesco Schwarz.
  • Pri uporabi! Pomembna je prava izbira Chrisa Coyierja

Projekt, pri katerem smo delali, najdete tukaj.

Upam, da vam je bila ta objava všeč! Če bi, ❤️,? in delite! Do naslednjič! ✌️