CSS: Приоритеты стилей и их влияние на элементы

Как выставляются приоритеты у стилей в CSS?

Cascading Style Sheets (CSS) – это каскадные таблицы стилей, где один элемент может получать стили из нескольких источников. Но какой стиль применится, если их несколько?

Таблица приоритетов CSS

Каждый селектор имеет свой "вес", который определяет его приоритет:

Чем выше суммарный вес селектора, тем выше его приоритет.

Примеры расчета приоритетов

Пример 1

<div id="main" class="wrap">Текст</div>

.wrap { font-size: 14px; }       /* Вес: 10 */
#main { font-size: 16px; }       /* Вес: 100 */
div { font-size: 13px; }         /* Вес: 1 */

Какой стиль применится?
Победит #main (вес 100 > 10 и 1).

Пример 2

div.wrap { font-size: 15px; }    /* Вес: 1 (div) + 10 (.wrap) = 11 */
.wrap { font-size: 20px; }       /* Вес: 10 */

Результат: div.wrap (11 > 10).

Как переопределить сложные селекторы?

Иногда встречаются "монстры" вроде:

#contact ul.header-nav li.header-list a.header-link {} /* Вес: 133 */

Перебить такой стиль сложно. Можно:

• Увеличить специфичность (добавить ID или классы).

• Использовать !important (но осторожно!).

Можно ли использовать !important?

Да, но только в крайних случаях, например:

• Если стиль прописан инлайново (style="...").

• Если чужие стили невозможно переопределить.

Пример:

#nav li { font-size: 13px !important; }

Рекомендации по написанию CSS

1. Избегайте избыточной вложенности
   Плохо:

   #contact-page li { ... }  
   #about-page li { ... }  

   
   

   Лучше:

   .nav-link { ... }  

   
   

2. Не злоупотребляйте длинными цепочками селекторов
   Плохо:

   .parent .child .grandchild a { ... }  

   
   

   Лучше:

   .menu-link { ... }  

   
   

3. Используйте классы вместо ID и тегов

   • Классы (class) – гибкие и переиспользуемые.

   • ID (#id) – только для уникальных элементов.

4. Разделяйте стили и JS-логику

   <a class="js-submit btn btn-default">Кнопка</a>

   
   

   • js-* – для JavaScript.

   • btn – для стилей.

Вывод

Приоритеты в CSS зависят от специфичности селекторов. Чем выше вес, тем важнее стиль. Старайтесь писать чистый, минимально вложенный код и избегайте !important. Используйте методологии (БЭМ, SMACSS) для удобства поддержки.