Css отменить наследование: Наследование (inherit initial unset) | CSS — Примеры

Leave a Comment / Css / By /

Содержание

Решение проблемы наследования CSS-стилей — Супер-пупер школа программирования — LiveJournal

Один мой хороший друг и коллега Юра Поздняков (ypozdnyakov ) подсказал решение для проблемы, опубликованной в статье Проблема наследования CSS стилей. Как оказалось, я не до конца понимал суть работы CSS-селекторов, и Юра открыл мне глаза. Оказывается, что всякий селектор, который выбирает некоторый элемент, не выбирает его дочерние элементы. Мне так всегда казалось, потому что когда я просматривал некий элемент в файрбаге, то в списке CSS-правил элемента фигурировали и селекторы родительских компонентов. На самом деле, стиль родительского компонента будет применен к дочернему лишь в том случае, если его значение в дочернем компоненте равно inherit. Вы скажете: «Ха! Так это ж очевидно!» Я понимаю, что это очевидно, но пока ты это сам не прочувствуешь, пока сам с этим не столкнешься, это будет лежать в твоей голове бессмысленным грузом.

О наследовании CSS

Вот пример, который полностью перевернул мое представление о CSS:

DOM:
<div>
    <div>
        <a href="#">blablabla</a>
    </div>
</div>
CSS:
. application .component
{
    font-family: Comic Sans MS;
}
.mylink
{
    font-family: Arial;
}

Как вы думаете, каким шрифтом будет выведена ссылка? Если исходить из понятия «Какой из селекторов круче?», то шрифт будет Comic Sans MS. Очевидно, первый селектор круче второго, потому что в нем целых два класса против одного. Но на самом деле правильный ответ — Arial! Почему? Потому что первый селектор выбирает только лишь компонент <div>, и его действие не распространяется на дочерний компонент <a href=»#»>blablabla</a>.

Как же так? А почему же тогда, если удалить второе CSS-правило, то шрифт будет Comic Sans MS, ведь этот селектор не выбирает дочерний компонент?

CSS:
.application .component
{
    font-family: Comic Sans MS;
}

Все дело в том, что по умолчанию в любом браузере шрифт всех ссылок установлен в значение inherit. Последний приведенный CSS-файл эквивалентен следующему:

CSS:
a
{
    font-family: inherit;
}
.application . component
{
    font-family: Comic Sans MS;
}

Так как ссылка наследует шрифт родителя, то мы и получаем шрифт Comic Sans MS. Честно, когда я это впервые понял, мой мозг просто взорвался =)

Решение

Решение проблемы наследования CSS-стилей, по нашему с Юрой мнению, заключается во внедрении стандарта построения DOM и CSS-файлов. Ниже перечислены правила, описывающие данный стандарт:

1. Не использовать !important

Все это знают, но все равно делают. Делают, потому-что так проще. Когда какой-то стиль в течение 20 минут не хочет прикручиваться куда надо, обычно сдаются и ставят этот проклятый !important. Но это плохо, потому что !important-important нету. И если этот самый !important испортит жизнь другим компонентам, то справиться с этим будет еще сложнее. Лучше поступить так: внимательно всмотреться в CSS-правила и найти-таки несоответствие стандартам, перечисленным в данной статье. Это несоответствие с большой долей вероятности и будет служить причиной проблемы.

2. Ни один CSS-селектор не должен содержать записи вида #myid

По той же самой причине, по которой нельзя использовать !important, нельзя использовать и селекторы по идентификаторам. Ибо они всегда круче. У них сильно высокий приоритет. Кроме того, вы не можете дать разным компонентам один и тот же идентификатор, поэтому подобные селекторы не дают возможности использовать CSS в полной мере. Лучше прикрутить к компонентам какие-то классы, и заменить все селекторы по идентификаторам селекторами по классам.

3. Правильно именовать классы

Для каждого компонента ввести уникальный класс x, и классы всех дочерних элементов определять как x-y. Пример:

DOM:
<div>
    <div>
        <a href="#">Update</a>
        <a href="#">Cancel</a>
    </div>
    <a href="#">www.blablabla.com</a>
</div>

Это гарантирует, что все классы имеют уникальные имена.

4. CSS-файл приложения должен для всех тегов переопределить стили, использующие по умолчанию значение inherit

Пример:

a
{
    font-family: Serif;
    . ..
}
div
{
    color: black;
    ...
}
...

Тем самым мы избавились от проблемы наследования. Мы объявили правила наиболее низкого приоритета, которые гарантируют, что непредсказуемого наследования стилей не будет. Если же вам хочется, чтобы какой-то стиль у некоторого компонента унаследовался от родителя, объявите его отдельно:

.my-favorite-component .my-favorite-component-toolbar
{
    color: #700;
}
.my-favorite-component .my-favorite-component-toolbar-button
{
    color: inherit;
}

5. Все остальные селекторы строятся только из классов и псевдоклассов

Можно, при желании, добавлять еще класс самого компонента. В итоге, получим примерно следующее:

CSS-файл моего любимого компонента
.my-favorite-component
{
    background-color: #FDD;
    border-radius: 4px;
    border: 1px solid #999;
    padding: 5px;
}
.my-favorite-component .my-favorite-component-toolbar-button
{
    background-color: #008;
    font-family: Helvetica;
}
.my-favorite-component .
 
 my-favorite-component-link
{
    color: black;
    text-decoration: none;
}
.my-favorite-component:hover .my-favorite-component-link
{
    color: blue;
    text-decoration: underline;
}
...

Это гарантирует, что стили будут применяться ровно к тем компонентам, о которых мы говорим. Тем самым решается проблема приоретизации.

Важно! Не допускайте селекторов вида:

.application .application-main-panel a
{
    color: black;
}

Это испортит вам всю жизнь. Данный стиль будет прикручиваться ко всем дочерним ссылкам и перебивать их своим высоким приоритетом. Используйте такие селекторы лишь в том случае, если совершенно уверены, что внутри .application-main-panel не может быть вложенных компонентов произвольного вида.

6. (опционально) Для компонентов определить стили по умолчанию

Пример:

.my-favorite-component a
{
    color: black;
    font-family: Comic Sans MS;
}
.my-favorite-component div
{
    margin: 5px;
}
...

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

Заключение

Я надеюсь, что эта статья поможет вам решить многие проблемы, возникающие при верстке веб-страниц, избавит вас от необходимости добавлять !important где попало и сделает программирование еще проще и интереснее.

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

Продолжение: Решение проблемы наследования CSS-стилей — замечания

Tags: Проблема наследования CSS-стилей

Наследование в CSS. — it-black.ru

Наследование в CSS. — it-black.ru

Наследованием называется перенос правил форматирования для элементов, находящихся внутри других.

Такие элементы являются дочерними, и они наследуют некоторые стилевые свойства своих родителей, внутри которых располагаются.

Например, пусть у на web-странице есть заголовок и параграф, которые должны иметь текст красного цвета. Мы можем отдельно к параграфу и заголовку применить соответствующий стиль, который установит нужный цвет шрифта:


<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Наследование стилей в CSS3</title>
        <style>
            p {color: red;}
            h3 {color: red;}
        </style>
    </head>
    <body>
        <h3>Наследование стилей</h3>
        <p>Текст про наследование стилей в CSS 3</p>
    </body>
</html>

Однако поскольку и элемент

p, и элемент h3 находятся в элементе body, то они наследуют от этого контейнера – элемента body многие стили. И чтобы не дублировать определение стиля, можно написать так:


<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Наследование стилей в CSS3</title>
        <style>
            body {color: red;}
        </style>
    </head>
    <body>
        <h3>Наследование стилей</h3>
        <p>Текст про наследование стилей в CSS 3</p>
    </body>
</html>
Значение inherit

С помощью inherit можно указать, чтобы элемент наследовал значение свойства у своего предка. Такое значение доступно практически для каждого свойства в CSS.

Например, чтобы заставить теги <p> унаследовать рамку border от своего предка <body>, необходимо записать:


p { 
border: inherit; 
}

Однако не ко всем свойствам CSS применяется наследование стилей. Например, свойства, которые представляют отступы (margin, padding) и границы (border) элементов, не наследуются.

Узнать, наследуется ли то или иное свойство, можно в стандарте CSS. Если в колонке «Inherited?» напротив нужного свойства стоит «yes», значит оно наследуется.

Кроме того, браузеры по умолчанию также применяют ряд предустановленных стилей к элементам. Например, заголовки имеют определенную высоту и т.д.

!important

Если после значения CSS свойства поставить пробел и написать !important, то это свойство всегда и везде будет иметь наивысший приоритет. Пример записи:


p{
color:red !important;
}

Благодаря тому, что наследование существует, можно экономить очень большое количество времени, сил и места в коде. Если бы таких правил не существовало, трудно представить, насколько бы усложнилась работа программиста.