Kā risināt CSS specifikas problēmas un kad lietot svarīgo atslēgvārdu!

Gadījuma izpēte

Nesen notika Twitter aptauja, kurā lietotājs saviem sekotājiem uzdeva jautājumu par CSS specifiku. Diemžēl man neizdevās atrast oriģinālo tvītu (komentējiet zemāk, ja jums gadās to atrast!), Bet īss stāsts, lielākā daļa cilvēku atbildi ieguva nepareizi.

Šī Twitter aptauja (un tās sekas) lika man papildināt savas zināšanas par specifiskuma tēmu un, savukārt, lika man sākt risināt specifikas jautājumus savos projektos - kas mani noved pie šī ziņojuma mērķa.

Šajā ziņojumā mēs atjaunosim CSS kodu no sava projekta, kurā ir CSS specifiskuma problēmas, kuras ir jānovērš.

CSS specifika

Definīcija

Specifiskumu MDN tīmekļa dokumenti raksturo šādi:

līdzekļi, ar kuriem pārlūkprogrammas izlemj, kuras CSS rekvizītu vērtības ir visatbilstošākās elementam, un tāpēc tās tiek izmantotas.

Noteikumi

Izlemjot, kuras CSS rekvizītu vērtības ir visatbilstošākās elementam, pārlūks to nosaka CSS stila lapas avota secībā (ti, kaskādē). Bet šis noteikums tiek piemērots, ja CSS atlasītājiem ir vienāda specifika. Kas notiek, ja viena CSS selektora specifika ir augstāka par citu?

Tādā gadījumā pārlūkprogrammas izmantos CSS selektora specifiku, lai noteiktu, kādus CSS priekšrakstus lietot. Jo augstāka ir CSS selektora specifika, jo lielāka iespēja, ka pārlūkprogrammas tās CSS deklarācijas lietos pār citu.

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

Piemēram, iepriekšējā piemērā abi CSS atlasītāji mērķē uz to pašu HTML elementu - enkura tagu. Lai noteiktu, kurš CSS noteikums jāpiemēro enkura tagam, pārlūkprogramma aprēķina specifiskuma vērtību un pārbauda, ​​kura ir augstākā. Šajā gadījumā pirmajam atlasītājam ir augstāka specifiskuma vērtība, tāpēc pārlūks izmantos savas deklarācijas, lai piemērotu enkura tagam.

Es gribētu šeit norādīt, ka, lai arī ! Svarīgi nav CSS atlasītājs, tas ir atslēgvārds, kas tiek izmantots, lai spēcīgi ignorētu CSS kārtulu neatkarīgi no CSS atlasītāja specifikas vērtības, izcelsmes vai avotu secības. Daži lietošanas gadījumi ietver:

  • Pagaidu labojumi (mazliet kā līmlentes uzlikšana uz noplūdušas caurules)
  • Galvenais iekšējais stils
  • Pārbaudes / atkļūdošanas nolūkos

Tikpat noderīgi kā var šķist svarīga atslēgvārda izmantošana, tā lietošana var būt problemātiskāka nekā noderīga. Laika gaitā tas var apgrūtināt CSS uzturēšanu un tas var negatīvi ietekmēt jūsu stila lapas lasāmību, it īpaši visiem citiem, kas ar to strādās vai strādās nākotnē.

Kas mūs noved pie tā, ko mēs darīsim šodien - projekta specifikas problēmu novēršana.

Projekts

Neliela informācija par projektu, kuru mēs atjaunosim - tā ir Netflix iedvesmota galvenā lapa, izmantojot MovieDB API.

Stilu lapa

Mērķis ir noņemt atslēgvārdu “! Important” no CSS noteikumiem, uz kuriem tas ir lietots, pārveidojot kodu tā, lai tas sekotu specifikas noteikumiem.

Zemāk jūs varat redzēt projekta stilu.

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

Tātad, no stilu lapas redzam, ka svarīgā atslēgvārda ! Izmantošana galvenokārt tiek koncentrēta multivides vaicājumu sadaļā, kurā izklāstīti stili, kas pārlūkam jāpiemēro, ja ekrāna platums ir mazāks par 750 pikseļiem.

Tātad, kas notiek, kad mēs noņemam svarīgo atslēgvārdu no CSS noteikumiem, kuriem tas ir piemērots? Nu, mums vairs nav “trumpis”, kas stingri ignorētu citu CSS atlasītāju CSS noteikumus, kuri mērķē uz to pašu HTML elementu. Tātad, pārlūkprogramma apskatīs stilu lapu, lai redzētu, vai ir pretrunīgi CSS noteikumi.

Ja tādi ir, tad, lai noteiktu, kuri CSS noteikumi jāpiemēro citam, pārlūks izmantos CSS atlasītāju avotu secību, specifiku un nozīmi. Ja CSS atlasītājiem ar pretrunīgiem CSS noteikumiem ir vienāda specifika, pārlūkprogramma izmantos avota secības kārtulu un piemēros CSS selektora CSS kārtulas, kas stila lapā atrodas zemāk. Izmantojot šo informāciju, mēs varam redzēt, ka šī situācija nav mūsu stila lapas gadījumā.

Bet, ja CSS atlasītājiem ar pretrunīgiem CSS noteikumiem nav vienādas specifikas, pārlūkprogramma lietos CSS atlasītāja CSS noteikumus, kuriem ir augstāka specifika. Mēs no savas stila lapas redzam, ka tas tā ir; CSS atlasītājiem mūsu multivides vaicājumā ir zemāka specifika nekā CSS atlasītājiem mūsu stila lapas galvenajā daļā.

Tagad, kad esam identificējuši problēmu, novērsīsim to!

Vispirms mums ir jāatrod attiecīgie CSS selektori, kas atbilst mūsu multivides vaicājumam CSS selektoriem.

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

Mēs varam redzēt, ka CSS atlasītājiem stila lapas galvenajā daļā ir augstāka specifika nekā atbilstošajiem CSS atlasītājiem multivides vaicājumā. Neskatoties uz CSS atlasītājiem multivides vaicājumā, kas parādās vēlāk stila lapā, specifikas noteikumu dēļ (kuriem ir prioritāte pār avotu pasūtīšanas kārtulām), pārlūkprogramma piemēros CSS atlasītāju CSS kārtulas, kas ir pirms tā.

Lai to novērstu, mums jāpalielina CSS atlasītāju specifiskuma vērtības multivides vaicājumā. Ja mēs to izdarīsim tā, lai CSS atlasītājiem, kas mērķē uz tiem pašiem HTML elementiem, būtu vienāda specifika, pārlūkprogramma ievēros avota secības kārtulu. CSS kārtulas, kas izklāstītas multivides vaicājumā (tas atrodas stila lapā zemāk), tiks lietotas, ja ekrāna platums ir mazāks par 750 pikseļiem.

Gala rezultāts izskatīsies šādi:

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

Un viss! Mēs no stila lapas esam noņēmuši visas svarīgā atslēgvārda pēdas . Jau tagad mēs varam redzēt, ka stilu lapa ir vieglāk lasāma, un jūs varat iedomāties, ka mūsu atjaunoto stilu lapu būtu daudz vieglāk strādāt un uzturēt (it īpaši, ja citi arī pie tā strādās).

Secinājums

Tātad, ko mēs esam iemācījušies?

Mēs esam uzzinājuši par to, kā pārlūkprogrammas nosaka atlasāmos CSS stilus, izmantojot avotu secību, specifiku un atlasītāju izcelsmi. Mēs esam arī iemācījušies par problēmām, kas var rasties, izmantojot ! Svarīgs jūsu CSS un kāpēc tās izmantošana būtu jāsamazina līdz minimumam.

Lai labotu lietas, mums nav jāizmanto ! Svarīgs - ir daudz labāku risinājumu.

Konkrētības jēdziens ir tāds, kas var aizņemt kādu laiku, lai apietu galvu, taču es ceru, ka, dokumentējot procesu un izmantojot reālu projektu, tas palīdz labāk izprast specifiskuma jēdzienu un to, kā to pielietot savā CSS.

Papildu resursi

  • MDN tīmekļa dokumenti
  • Batija Maikla Maikls
  • CSS specifiskuma kari, kuru autors ir Endijs Klārks
  • Frančesko Švarca specifikas vizualizators.
  • Lietojot!, Svarīga ir Krisa Koijera pareizā izvēle

Projektu, pie kura strādājam, varat atrast šeit.

Es ceru, ka jums patika šis ieraksts! Ja jūs to izdarījāt, ❤️,? un dalieties! Līdz nākamajai reizei! ✌️