{"draftJsState":{"blocks":[{"data":{"image":{"id":"65eb23b00fe2f30fb193c20a"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"coc9d"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Специфика CSS - это про то, какие стили применяются к элементам: чем конкретнее селектор CSS, тем больше веса он имеет при определении стиля элемента.","type":"unstyled","key":"e0446"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Возьмем следующий HTML и CSS в качестве примера:","type":"unstyled","key":"fo64a"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"

\n ...\n

","type":"blockquote","key":"cmojg"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"blockquote","key":"d3o8"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"7912c"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Побеждает белый цвет, так как селектор id более специфичен и имеет больший вес.","type":"unstyled","key":"bcnbh"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Существует пять основных уровней, которые определяют специфику стиля, от наименее специфического к наиболее специфичному:","type":"unstyled","key":"96lco"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"1. Элемент","type":"header-two","key":"fqgug"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"article {\n background-color: black;\n}","type":"blockquote","key":"22kub"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"bdk9j"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"2. Класс","type":"header-two","key":"8oa1e"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":".css-class {\n background-color: black;\n}","type":"blockquote","key":"75ktk"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"ccf96"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"3. ID","type":"header-two","key":"1re4o"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"#css-id {\n background-color: black;\n}","type":"blockquote","key":"51tfn"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"d8aa3"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"4. Inline стили","type":"header-two","key":"84lcj"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"

...

","type":"blockquote","key":"19ml1"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"9i34i"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"5. !important","type":"header-two","key":"bh61i"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"article {\n background-color: black !important;\n}","type":"blockquote","key":"53dem"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"8fbqo"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Можно использовать комбинацию этих атрибутов.","type":"unstyled","key":"2j6sk"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Тут вступает в действие система весов.","type":"unstyled","key":"5ifto"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Поскольку пять различных факторов влияют на специфичность CSS, мы используем пять чисел, чтобы отслеживать, сколько раз мы видим тип селектора. Мы начинаем вес с нулевой специфичностью, которая представлена как (0, 0, 0, 0, 0). Это: !important, Inline, ID, Класс, Элемент. При наличии уровня выставляется единица.","type":"unstyled","key":"8v4ga"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Пример:","type":"unstyled","key":"bume4"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"

\n ...\n

","type":"blockquote","key":"3s660"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"blockquote","key":"975p0"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"4f8l3"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"#css-rocks section будет весить 0, 0, 1, 0, 1","type":"unstyled","key":"e234r"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"article#css-rocks section.css-history рассчитать немного сложнее.","type":"unstyled","key":"6jou7"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Для этого воспользуемся таблицей","type":"unstyled","key":"a3nvl"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Селектор: | Тип: | Вес:\narticle | Element | (0, 0, 0, 0, 1)\n#css-rocks | Id | (0, 0, 1, 0, 1)\nsection | Element | (0, 0, 1, 0, 2)\n.css-history | Class | (0, 0, 1, 1, 2)","type":"blockquote","key":"drgoi"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Получаем финальный вес 0, 0, 1, 1, 2","type":"unstyled","key":"ecin0"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Сравним два смешанных селектора:","type":"unstyled","key":"f2dui"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"#css-rocks section: 0, 0, 1, 0, 1","type":"unstyled","key":"bsk5u"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"article#css-rocks section.css-history: 0, 0, 1, 1, 2","type":"unstyled","key":"dsfih"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Второй имеет больший вес, значит победит белый фон.","type":"unstyled","key":"7t47q"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":59,"offset":0,"style":"BOLD"}],"text":"Что произойдет, если два стиля имеют одинаковую специфику ?","type":"unstyled","key":"b2eke"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Тот, который объявлен позже, побеждает.","type":"unstyled","key":"1v0fb"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"article {\n background-color: black;\n}\narticle {\n background-color: white;\n}","type":"blockquote","key":"b36ji"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"4vee4"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Побеждает белый фон.","type":"unstyled","key":"1gi6t"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":18,"offset":0,"style":"BOLD"}],"text":"Атрибут !important применяется не ко всем стилям в селекторе, а только к тому стилю, к которому приставлен.","type":"unstyled","key":"20uth"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"article .css-history {\n background-color: black !important; /* (1, 0, 0, 1, 1) */\n color: white; /* (0, 0, 0, 1, 1) */\n}","type":"blockquote","key":"f9ssk"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"40b47"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":16,"offset":0,"style":"BOLD"}],"text":"Полезные советы:","type":"unstyled","key":"6eu4u"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"При попытке переопределить стиль, проверьте, не мешают ли этому излишние id.","type":"ordered-list-item","key":"6vko2"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Используйте вспомогательные классы. Например, если элементу .card необходимо задавать разные цвета фона, добавьте дополнительные классы, соответствующие цвету фона.","type":"ordered-list-item","key":"10ap6"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"В каких случаях использовать !important. Желательно, только в экстренных. Например, когда срочно надо поправить стиль перед презентацией. Использовать как временную меру.","type":"ordered-list-item","key":"fhhnv"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":15,"offset":0,"style":"BOLD"}],"text":"Вредные советы:","type":"unstyled","key":"i579"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"1. Используйте несколько идентификаторов в одном селекторе. Это запутает всех, кто будет читать ваш код, в том числе и вас.","type":"unstyled","key":"eqh7m"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"#css-rocks#css-rocks {\n background-color: black; /* (0, 0, 2, 0, 0) */\n}\n#css-rocks {\n background-color: white; /* (0, 0, 1, 0, 0) */\n}","type":"blockquote","key":"e8t5b"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"ff0dn"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"2. Если этого недостаточно для крупного пакостника, то попробуйте вот что:","type":"unstyled","key":"4g3u9"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"

\n ...\n

","type":"blockquote","key":"aa9a"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"499rr"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Теперь ваш стиль невозможно переопределить через CSS файл.","type":"unstyled","key":"8dngc"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":40,"offset":0,"style":"BOLD"}],"text":"Данная статья подготовлена по источнику:","type":"unstyled","key":"nvp9"},{"data":{},"depth":0,"entityRanges":[{"key":0,"length":48,"offset":0}],"inlineStyleRanges":[],"text":"Colin Miller. The Basic Guide to CSS Specificity.","type":"unstyled","key":"bu32m"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"marker","key":"YnIrnEud2JZBlMrwJDub"}],"entityMap":{"0":{"data":{"url":"https://colinjmiller.medium.com/the-basic-guide-to-css-specificity-b89726c0c0bc"},"mutability":"MUTABLE","type":"LINK"}}},"mentions":[]}