По старшинству. Когда порядок в CSS важен

24.08.2016
17520
Подпишитесь, чтобы получать новые статьи на почту

Старший аспирант «Нетологии» Алёна Батицкая перевела статью Криса Койера Precedence in CSS (When Order of CSS Matters) о приоритетности в CSS. 

В обычный день, когда вы пишете CSS, вы вряд ли задумываетесь о приоритетности. Это и не нужно! Вам придется  вспомнить об этом ровно в тот момент, когда у вас случится совпадение селекторов с одинаковой специфичностью.

Специфичность подразумевает, что порядок имеет значение. Стили, расположенные ниже по каскаду, выигрывают. 

В пределах одной таблицы стилей

Предположим, у нас есть HTML-разметка: 

DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="UTF-8">
  <title>Документtitle>
  <link rel="stylesheet" href="styles.css">
head>
<body>
  <div class="module module-foo module-bar">
    Содержимое
  div>
body>
html>

Порядок атрибутов в HTML значения не имеет. Все дело в порядке внутри таблицы стилей. Давайте посмотрим внимательнее на background:

/*
  У всех селекторов ниже одинаковая специфичность
*/

.module {
  background: #ccc;
  padding: 20px;
  max-width: 400px;
  margin: 20px auto;
}

.module-foo {
  background: orange;
}

/* Объявлен ПОСЛЕДНИМ, выигрывает это свойство/значение */
.module-bar {
  background: lightblue; /* Я выйграл! */
}

Живой пример

Намеренно запутанный пример

Подсчет порядка свойств не ограничивается одной таблицей стилей. Последовательность подключения css-файлов в документе имеет даже большее значение.
Посмотрите на этот документ, в котором есть три отдельных...хм... давайте назовем их кусками стилей. 

Куски расположились в

, внутри тега

Университет интернет-профессий