Специфичност на CSS: Разбиране как стиловете се прилагат към уеб страници

Специфичността е алгоритъмът, използван от браузърите, за да определи кое CSS правило има предимство пред другите и в крайна сметка стойността на свойството, която да се приложи към конкретен елемент. Разбирането на тази концепция може да ни спести време, стилови конфликти и редове код, така че нека да се захванем с него.

Основи на CSS спецификата

Както беше казано по-рано Специфичността е алгоритъмът, използван от браузърите, за да определи какви CSS правила ще приложи към елемента, той основно се превежда като мярка за това колко специфичен е даден CSS селектор и определя кое CSS правило се прилага, когато две или повече правила са насочени същият елемент. Специфичността на селектор се изчислява въз основа на броя на селекторите, идентификаторите, използваните класове и теглото на всеки един.

Например, разгледайте следните CSS правила:

p {
  color: red;
}

#main p {
  color: blue;
}

В този случай второто правило има по-висока специфичност, тъй като е насочено към конкретен елемент с ID main, както и към pселектора. Следователно, ако и двете правила се прилагат за елемент p вътре в елемента main, второто правило има предимство и цветът на текста ще бъде син.

CSS селекторите могат да насочват към HTML елементи, като използват комбинация от имена на тагове, класове, идентификатори и атрибути.

Например следните селектори са насочени към различни HTML елементи:

h1 е насочен към всички h1 тагове на страница.
.highlight е насочен към всички елементи с клас highlight.
#header е насочен към елемента с ID header.

Когато две или повече CSS правила са насочени към един и същ HTML елемент, браузърът трябва да реши кое правило да приложи. Тук се намесва спецификата на CSS.

Тегла на специфичност

За да определи специфичността, алгоритъмът присвоява тегло на CSS декларацията и категория в зависимост от приоритета на селектора. Нека се потопим по-дълбоко в това как се изчислява спецификата:

ID колона

Означава се със символа # в CSS. Селекторът на ID е най-специфичният селектор и за всеки ID в съответстващ селектор алгоритъмът ще добави 1-0-0 към стойността на теглото.

Колона клас

Тази категория включва селектора на клас, обозначен със символа . в CSS, селектори на атрибути като [type="radio"] и псевдокласове като :hover, :nth-of-type(3n) и :required. За всеки от тези селектори алгоритъмът ще добави 0-1-0 към стойността на теглото.

Тип колона

Тази категория включва селектори на типове като p, h1 и td и псевдоелементи като ::before, ::placeholder и всякакви други селектори с нотация с двойно двоеточие. За всеки от тези селектори алгоритъмът ще добави 0-0-1 към стойността на теглото.

Без стойност

Има други селектори, които не добавят никаква стойност към изчислението на специфичността, като универсалния селектор * и псевдо-класа :where() и неговите параметри не се броят при изчисляване на теглото, така че тяхната стойност е 0-0-0, но те съвпадат с елементи. Също така комбинаторите, като +, >, ~ и ||, могат да направят селектор по-специфичен в това, което е избрано, но те не добавят никаква стойност към теглото на специфичността.

Други съображения

Имаме някои селектори на псевдокласове като :not(), :is(), :has(), които сами по себе си не добавят никаква тежест, но аргументите, предадени в тези селектори, го правят.

Вградени стилове

Когато вградените стилове се добавят към HTML елемент, те винаги ще имат предимство пред всички стилове, дефинирани в таблица със стилове. Това означава, че вградените стилове имат най-висока специфичност, която е еквивалентна на тегло на специфичност от 1-0-0-0 и могат да бъдат заменени само от флага !important.

<p style="color: purple">…</p>

!важно

Флагът !important в CSS може да се използва за замяна на всякакви други декларации, независимо от тяхната специфика. Технически флагът !important няма нищо общо със спецификата, но взаимодейства с нея и каскадата.

Въпреки това, ако има конфликтни декларации от същия произход и каскаден слой с набор от флагове !important, приложен към същия елемент, декларацията с по-голяма специфичност ще влезе в сила.

Въпреки че използването на !important за замяна на специфичността е възможно, това се счита за лоша практика и трябва да се избягва. Ако разбирате как работи спецификата на CSS, ще можете да постигнете същия резултат, без да се налага да използвате !important във вашия код.

Сравнение на колони

След като алгоритъмът определи теглото на всеки селектор, той продължава да ги сравнява, за да определи кой стил ще бъде приложен към елемента.

Това се прави чрез сравняване на стойностите отляво надясно, колона по колона. Селекторът с по-висока стойност в най-лявата колона има предимство, независимо от стойностите в другите колони. Ако най-левите колони са равни, сравнението се премества във втората колона и така нататък, докато бъде определен победител.

Ако конкуриращите се селектори имат еднакви стойности и в трите колони, последният деклариран стил получава предимство.

Примери за специфични изчисления

<!DOCTYPE html>
<html>
<head>
  <style>
    h1 {
      /* 0-0-1 */
      color: red;
    }

    .container h1 {
      /* 0-1-1 */
      color: blue;
    }

    #heading {
      /* 1-0-0 */
      color: green;
    }
  </style>
</head>
<body>
  <div class="container">
    <h1 id="heading">Hello World!</h1>
  </div>
</body>
</html>

В този пример имаме три CSS правила, насочени към елемента h1 с различни тежести на специфичност на селектора.

Първото CSS правило се прилага за всички h1 елементи и има тегло на специфичност 0-0-1.

Второто CSS правило се прилага за всички h1 елементи в елемент с клас container, неговото специфично тегло е 0-1-1.

И накрая, третото CSS правило се прилага към елемента с атрибут id heading и има тегло на специфичност 1-0-0.

Тези три правила могат да се прилагат към елемента h1 в HTML, така че сега алгоритъмът трябва да определи кое от тях има най-голяма тежест. Сравнявайки трите опции, третото CSS правило има най-голяма специфичност, като е 1-0-0, така че това е това, което ще бъде приложено към елемента h1, което ще направи цвета на текста му зелен.

Значение на разбирането на спецификата на CSS

Нека да разгледаме някои причини защо разбирането на спецификата на CSS е важно:

Избягвайте конфликтите

Това е една от основните причини да разберем как работи спецификата на CSS. Когато две или повече правила са насочени към един и същи елемент, правилото с най-голяма специфичност ще има предимство. Като използвате по-конкретни селектори, можете да гарантирате, че желаните от вас стилове се прилагат, дори когато има други конфликтни стилове на страницата.

Осигурете поддръжка

Тъй като вашата CSS кодова база расте, може да стане предизвикателство да проследите кои селектори се използват и как те влияят на различни елементи на страницата. Като използвате специфични и последователни селектори, можете да направите кода си по-лесен за четене и поддръжка във времето.

Предотвратяване на ненужни замени

Използването на прекалено общи селектори, като например селектори на елементи или селектори със заместващи знаци, може да доведе до неволни отмени. Като използвате по-специфични селектори, можете да избегнете ненужни замени и да гарантирате, че вашите стилове се прилагат по предназначение.

Подобряване на производителността

Използването на по-специфични селектори също може да подобри ефективността на вашите уеб страници. Когато използвате общи селектори, като селектори на елементи, браузърът трябва да търси във всички елементи на страницата, за да приложи стиловете. Това може да забави процеса на изобразяване, особено на страници с много елементи. Като използвате по-специфични селектори, можете да ограничите броя на елементите, които трябва да се търсят, което води до по-бързо време за изобразяване.

Последни мисли

Доброто разбиране на CSS ни позволява да пишем ефективни и организирани стилове, което може да направи нашия код по-поддържаем и по-лесен за работа в дългосрочен план. Това може също да доведе до по-добро потребителско изживяване, тъй като добре внедрените стилове могат да подобрят производителността на нашите уеб приложения.

Присъединете се към Medium с моята реферална връзка — Каролина Рамирес
Прочетете всяка история от Каролина Рамирез (и хиляди други писатели в Medium). Вашият членски внос директно...carodigital.medium.com

Ако искате да подкрепите моето писане и хиляди други, можете да се присъедините към Medium като член, като използвате моята реферална връзка. Всеки член, който се регистрира чрез моята връзка, ще ми позволи да получа малка част от вашия членски внос. Благодаря ви!

Повече съдържание в PlainEnglish.io. Регистрирайте се за нашия безплатен седмичен бюлетин. Присъединете се към нашата общност Discord и ни последвайте в Twitter, LinkedIn и YouTube.

Научете как да изградите осведоменост и приемане за вашия стартъп с Circuit.