Как унаследовать стили от родительского элемента?

Question

[Алёна]

Задача.
В конструкторе сайтов можно редактировать цвет текста для элементов `data-component="text"`.

Упрощённый пример разметки:

<div data-component="text">
  <p class="text-noble-grey">
    Lorem ipsum.
  </p>
</div>

В редакторе стилей цвет устанавливается инлайном, да ещё и с `!important`:

<div data-component="text" style="color: rgb(153, 0, 255) !important;">
  <p class="text-noble-grey">
    Lorem ipsum.
  </p>
</div>

Чтобы было понятно, вот как выглядит интерфейс конструктора:


Также, помимо стилей, которые можно применять через wysiwyg редактор стилей, к элементам применяются стили из CSS-файлов, вот один из них:

.text-noble-grey {
    color: #999;
}

Проблема заключается в том, что в данном случае CSS не наследует цвет шрифта от родителя. "Сильнее" оказывается стиль из каскада...

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

В голову приходит только одно решение — при редактировании цвета JS'ом проходиться в том числе и по дочерним элементам тоже. Устанавливая им, например, стиль
color: inherit;
Но точно ли это нужно?

Comments

[Сергей delphinpro]

уберите класс .text-noble-grey
или перепишите его стили

[Алёна]

Сергей delphinpro, как можно переписать его стили?

[Сергей delphinpro]

Алёна, например так

.text-noble-grey {
    color: inherit;
}

[Алёна]

Сергей delphinpro, То есть, вы предлагаете вообще отказаться от того, чтобы текст был серого цвета?

[Сергей delphinpro]

Я озвучил решение для унаследования стилей родителя.

А если бы предлагал, то предложил бы отказаться от использования убогих конструкторов =)

[Алёна]

Сергей delphinpro, c color: inherit понятно. Я его упоминала в тексте вопроса, но у меня более универсальное решение, с которым у параграфа всё же останется серый цвет текста.

Получается, вы полагаете, что при данной логике работы ничего сделать нельзя, чтобы стили наследовались?

Логика такая: хочется, чтобы, если ничего не указано родителю, цвет был серым — из CSS-файлов. Но если у родителя цвет установлен (инлайново), то чтобы он был сильнее.

Я ещё думала о том, что, может, дополнить стили чем-то вроде

div[data-component][style*="color"] * {
    color: inherit !important;
}

(Этот способ работает.)
Но мучают смутные сомнения.

предложил бы отказаться от использования убогих конструкторов =)

Увольняться пока не планирую :)

[NaN]

Алёна, хотелось бы узнать, ради интереса, на какой работе используют конструкторы?
Там же столько мусора, одни костыли и код ужасный.

[Алёна]

KornevaViktoria, дааа, всё верно... Мусор, костыли, писали вообще непонятно как, непонятно кто. Делаем сервис, в котором качество сайтов в плане интерфейса не особо важно, поэтому выбранный конструктор подходит. Главное, чтобы можно было быстро собрать в wysiwyg из готовых блоков приемлимо выглядящие странички.
А основная задача сервиса – генерация однотипных сайтов и трекинг лидов на них. (Лиды — звонки и сабмиты форм.)

[NaN]

Алёна, а, ну тогда понятно. =(