de Muna Mohamed

Cum să abordați problemele de specificitate CSS și când să utilizați cuvântul cheie! Important

Un studiu de caz

Cum sa abordati problemele de specificitate CSS si cand sa

Recent, a existat un sondaj pe Twitter plutind în jurul valorii de unde utilizatorul le-a adresat adepților o întrebare despre specificitatea CSS. Din păcate, nu am reușit să găsesc tweet-ul original (comentează mai jos dacă se întâmplă să-l găsești!), Dar pe scurt, majoritatea oamenilor au greșit răspunsul.

Sondajul respectiv de pe Twitter (și consecințele acestuia) m-a determinat să mă străduiesc pe propriile cunoștințe despre subiectul specificității și, la rândul meu, m-a făcut să încep să rezolv problemele de specificitate în propriile proiecte – ceea ce mă aduce la scopul acestei postări.

În această postare, vom refactura codul CSS dintr-un proiect de-al meu care are probleme de specificitate CSS care trebuie reparate.

Specificitatea CSS

Definiție

Specificitatea este descrisă de Documente Web MDN la fel de:

mijloacele prin care browserele decid ce valori ale proprietății CSS sunt cele mai relevante pentru un element și, prin urmare, aplicate.

Reguli

Atunci când decide ce valori ale proprietății CSS sunt cele mai relevante de aplicat unui element, browserul folosește ordinea sursă (adică cascada) din foaia de stil CSS pentru a determina acest lucru. Dar această regulă se aplică atunci când selectoarele CSS au specificitate egală. Ce se întâmplă când specificitatea unui selector CSS este mai mare decât alta?

Cum sa abordati problemele de specificitate CSS si cand sa

În acest caz, browserele vor utiliza specificitatea unui selector CSS pentru a determina ce instrucțiuni CSS să aplice. Cu cât este mai mare specificitatea unui selector CSS, cu atât este mai probabil ca browserele să-și aplice declarațiile CSS peste altul.

nav a {
  color: green;
}

a {
  color: red;
}

De exemplu, în exemplul de mai sus, ambii selectori CSS vizează același element HTML, eticheta de ancorare. Pentru a determina ce regulă CSS se aplică etichetei de ancorare, browserul va calcula valoarea specificității și va verifica care dintre acestea este cea mai mare. În acest caz, primul selector are o valoare de specificitate mai mare, prin urmare browserul își va folosi declarațiile pentru a aplica eticheta de ancorare.

Aș dori să subliniez aici că, deși !important nu este un selector CSS, este un cuvânt cheie care este utilizat pentru a suprascrie cu forță o regulă CSS, indiferent de valoarea specificității, originea sau ordinea sursă a unui selector CSS. Unele cazuri de utilizare includ:

  • Remedii temporare (un pic ca și punerea unei benzi adezive pe o țeavă cu scurgeri)
  • Stilul liniar suprasolicitat
  • Scopuri de testare / depanare

La fel de util ca utilizarea !important cuvântul cheie poate părea, utilizarea acestuia poate fi mai problematică decât utilă. De-a lungul timpului, poate face dificilă întreținerea CSS și poate afecta negativ lizibilitatea foii de stil, în special pentru oricine altcineva care va lucra sau va lucra cu ea în viitor.

Ceea ce ne aduce la ceea ce vom face astăzi – rezolvarea problemelor de specificitate într-un proiect.

Proiectul

1611475927 871 Cum sa abordati problemele de specificitate CSS si cand sa

Un mic background despre proiect, pe care îl vom refactura – este o pagină de destinație inspirată de Netflix care folosește API-ul MovieDB.

Foaia de stil

Scopul este de a elimina “!important” cuvânt cheie din regulile CSS la care a fost aplicat refactorizând codul astfel încât să respecte regulile de specificitate.

Mai jos, puteți vedea foaia de stil pentru proiect.

@import url("https://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("https://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;
  }
}

Deci, putem vedea din foaia de stil că utilizarea fișierului !important cuvântul cheie este concentrat în principal în secțiunea de interogare media care prezintă stilurile pe care browserul ar trebui să le aplice atunci când lățimea ecranului este mai mică de 750 de pixeli.

Deci, ce se întâmplă când eliminăm !important cuvânt cheie din regulile CSS la care a fost aplicat? Ei bine, nu mai avem un „atu” care să anuleze cu forță regulile CSS ale altor selectoare CSS care vizează același element HTML. Deci, browserul se va uita la foaia de stil pentru a vedea dacă există reguli CSS conflictuale.

Dacă există, atunci pentru a determina ce reguli CSS să se aplice peste altele, browserul va utiliza ordinea sursă, specificitatea și importanța selectorilor CSS. Dacă selectorele CSS cu reguli CSS conflictuale au specificitate egală, atunci browserul va folosi regula comenzii sursă și va aplica regulile CSS ale selectorului CSS care se află mai jos în foaia de stil. Folosind aceste informații, putem vedea că această situație nu este cazul pentru foaia noastră de stil.

Dar, dacă selectoarele CSS cu reguli CSS conflictuale nu au specificitate egală, atunci browserul va aplica regulile CSS ale selectorului CSS care are o specificitate mai mare. Din foaia noastră de stil putem vedea că acesta este cazul; selectorii CSS din interogarea noastră media au specificitate mai mică decât selectorii CSS din partea principală a foii noastre de stil.

Acum, că am identificat problema, să o rezolvăm!

Mai întâi trebuie să localizăm selectorii CSS corespunzători care se potrivesc cu selectorii CSS în interogarea noastră media.

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

Putem vedea că selectorii CSS din partea principală a foii de stil au o specificitate mai mare decât selectorii CSS corespunzători din interogarea media. În ciuda faptului că selectorii CSS din interogarea media apar mai târziu în foaia de stil, din cauza regulilor de specificitate (care au prioritate față de regulile de comandă sursă), browserul va aplica regulile CSS ale selectorilor CSS care îi aparțin.

Pentru a remedia acest lucru, trebuie să creștem valorile de specificitate ale selectoarelor CSS din interogarea media. Dacă o facem astfel încât selectoarele CSS care vizează aceleași elemente HTML să aibă specificitate egală, atunci browserul va urma regula comenzii sursă. Regulile CSS prezentate în interogarea media (care se află mai jos în foaia de stil) vor fi aplicate atunci când lățimea ecranului este mai mică de 750 de pixeli.

Rezultatul final va arăta astfel:

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

Si asta e! Am eliminat toate urmele !important cuvânt cheie din foaia de stil. Deja putem vedea că foaia de stil este mai ușor de citit și vă puteți imagina că foaia noastră de stil refactorizată ar fi mult mai ușor de lucrat și de întreținut (mai ales dacă și alții vor lucra la ea).

Concluzie

Deci, ce am învățat?

Am aflat despre modul în care browserele determină ce stiluri CSS să aplice utilizând ordinea sursă, specificitatea și originea selectorilor. De asemenea, am aflat despre problemele care pot apărea prin utilizarea !important în CSS și de ce utilizarea acestuia trebuie menținută la un nivel minim.

Nu trebuie să recurgem la utilizare !important pentru a remedia lucrurile – există soluții mult mai bune acolo.

Conceptul de specificitate este unul care poate dura ceva timp pentru a vă întoarce capul, dar sper că prin documentarea procesului și utilizarea unui proiect real, vă ajută să înțelegeți mai bine conceptul de specificitate și cum să-l aplicați în propriul CSS.

Resurse aditionale

Puteți găsi proiectul la care am lucrat aici.

Sper că v-a plăcut această postare! Dacă ai făcut-o, ❤️,? și împărtășește! Până la data viitoare! ✌️