Studija slučaja
Nedavno je plutala Twitter anketa gdje je korisnik svojim sljedbenicima postavljao pitanje o CSS specifičnosti. Nažalost, nisam uspio pronaći izvorni tweet (komentar ispod ako ga slučajno nađete!), Ali duga priča, većina ljudi je krivo shvatila odgovor.
Ta Twitter anketa (i posljedice) dovele su do toga da sam prokrčio vlastito znanje o temi specifičnosti, a zauzvrat, počeo sam rješavati probleme sa specifičnostima u vlastitim projektima - što me dovodi do svrhe ovog posta.
U ovom ćemo postu preoblikovati CSS kôd iz mog projekta koji ima probleme sa CSS specifičnošću i koje treba popraviti.
CSS specifičnost
Definicija
MDN Web Docs opisuje specifičnost kao:
način na koji preglednici odlučuju koje su vrijednosti svojstva CSS-a najrelevantnije za element i stoga se primjenjuju.Pravila
Kad odlučuje koje vrijednosti CSS svojstva su najrelevantnije primijeniti na element, preglednik koristi izvorni poredak (tj. Kaskadu) CSS tabele stilova da to utvrdi. Ali ovo se pravilo primjenjuje kada CSS selektori imaju jednaku specifičnost. Što se događa kada je specifičnost jednog CSS selektora veća od drugog?
U tom će slučaju preglednici koristiti specifičnost CSS selektora da odrede koje će CSS izjave primijeniti. Što je veća specifičnost CSS selektora, to je vjerojatnije da će preglednici primijeniti njegove CSS deklaracije na drugu.
nav a { color: green; } a { color: red; }Na primjer, u gornjem primjeru, oba CSS selektora ciljaju isti HTML element, sidrenu oznaku. Da bi odredio koje CSS pravilo će se primijeniti na sidrenu oznaku, preglednik će izračunati vrijednost specifičnosti i provjeriti koje je najviše. U ovom slučaju, prvi selektor ima veću vrijednost specifičnosti, stoga će preglednik upotrijebiti svoje izjave za primjenu na sidrenu oznaku.
Ovdje bih želio naglasiti da iako ! Important nije CSS selektor, to je ključna riječ koja se koristi za prisilno nadjačavanje CSS pravila bez obzira na vrijednost specifičnosti, podrijetlo ili redoslijed izvora CSS selektora. Neki slučajevi upotrebe uključuju:
- Privremeni popravci (pomalo poput stavljanja selotejpa na nepropusnu cijev)
- Nadjačavanje linijskog stila
- Svrhe testiranja / otklanjanja pogrešaka
Koliko god se korisna ključna riječ ! Učinila korisnom , njena upotreba može biti više problematična nego korisna. S vremenom to može otežati održavanje CSS-a i može negativno utjecati na čitljivost vašeg lista stilova, posebno za sve ostale koji s njim rade ili će raditi u budućnosti.
Što nas dovodi do onoga što ćemo raditi danas - rješavanja problema sa specifičnostima u projektu.
Projekt
Nešto malo o projektu koji ćemo preoblikovati - to je odredišna stranica inspirirana Netflixom koristeći MovieDB-ov API.
Tablica stilova
Cilj je ukloniti ključnu riječ "! Important" iz CSS pravila na koju je primijenjena refaktoringom koda tako da slijedi pravila specifičnosti.
Ispod možete vidjeti tablicu stilova 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; } }Dakle, iz tabele stilova možemo vidjeti da je upotreba ključne riječi ! Important uglavnom usredotočena u odjeljku za medijske upite koji opisuje stilove koje bi preglednik trebao primijeniti kada je širina zaslona manja od 750 piksela.
Pa, što se događa kada iz CSS pravila uklonimo važnu ključnu riječ na koju je primijenjena? Pa, više nemamo "aduta" koji snažno nadjačava CSS pravila drugih CSS birača koji ciljaju isti HTML element. Dakle, preglednik će pogledati tablicu stilova kako bi utvrdio postoje li proturječna CSS pravila.
Ako postoje, tada će preglednik upotrijebiti izvorni redoslijed, specifičnost i važnost CSS selektora da bi odredio koja će se CSS pravila primijeniti na druga. Ako CSS birači s sukobljenim CSS pravilima imaju jednaku specifičnost, tada će preglednik upotrijebiti pravilo izvornog poretka i primijeniti CSS pravila CSS selektora koji dolazi niže u tablici stilova. Koristeći ove informacije, možemo vidjeti da ova situacija nije slučaj s našim tablicama stilova.
Ali, ako CSS selektori s sukobljenim CSS pravilima nemaju jednaku specifičnost, tada će preglednik primijeniti CSS pravila CSS selektora koji ima veću specifičnost. Iz našeg lista stilova možemo vidjeti da je to slučaj; CSS selektori u našem medijskom upitu imaju nižu specifičnost od CSS selektora u glavnom dijelu našeg lista stilova.
Sad kad smo identificirali problem, popravimo ga!
Prvo moramo pronaći odgovarajuće CSS selektore koji odgovaraju CSS selektorima u našem medijskom upitu.
.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 da CSS selektori u glavnom dijelu tabele stilova imaju veću specifičnost od odgovarajućih CSS selektora u medijskom upitu. Unatoč tome što se CSS selektori u medijskom upitu pojavljuju kasnije u tabeli stilova, zbog pravila specifičnosti (koja imaju prednost nad pravilima redoslijeda izvora), preglednik će primijeniti CSS pravila CSS selektora koja dolaze prije njega.
Da bismo to popravili, moramo povećati vrijednosti specifičnosti CSS selektora u medijskom upitu. Ako napravimo tako da CSS selektori koji ciljaju iste HTML elemente imaju jednaku specifičnost, tada će preglednik slijediti pravilo redoslijeda izvora. CSS pravila navedena u medijskom upitu (koja se nalaze niže u tablici stilova) primijenit će se kada je širina zaslona manja od 750 piksela.
Krajnji rezultat izgledat će ovako:
.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; } }I to je to! Uklonili smo sve tragove ključne riječi ! Important iz tabele stilova. Već vidimo da je tablicu stilova lakše čitati, a možete zamisliti da bi s našom obnovljenom tabelom stilova bilo puno lakše raditi i održavati (pogotovo ako će i drugi raditi na njoj).
Zaključak
Pa, što smo naučili?
Saznali smo kako preglednici određuju koje CSS stilove primijeniti pomoću redoslijeda izvora, specifičnosti i podrijetla selektora. Također smo saznali o problemima koji mogu nastati korištenjem ! Važnih u vašem CSS-u i zašto njegovu upotrebu treba svesti na minimum.
Ne moramo pribjegavati korištenju ! Važnog kako bismo popravili stvari - vani su puno bolja rješenja.
Koncept specifičnosti može vam trebati neko vrijeme da se dobro posvetite glavi, ali nadam se da vam dokumentiranjem postupka i korištenjem stvarnog projekta pomaže da bolje razumijete koncept specifičnosti i kako ga primijeniti u vlastitom CSS-u.
Dodatna sredstva
- MDN web dokumenti
- Batficity Mandy Michael
- CSS Ratovi specifičnosti Andyja Clarkea
- Vizualizator specifičnosti Francesco Schwarz.
- Kada koristite! Važan je pravi izbor Chrisa Coyiera
Projekt na kojem smo radili možete pronaći ovdje.