親要素とテキスト要素の間にカスケードフォントスタイルの関係を設定する方法

Question

これはかなり基本的なことですが、いつも私にとっては奇妙なものでした。コンテンツ作成者が正しいマークアップを使用するとは必ずしも期待できないコンテンツ管理システムのサイトを開発しています。多くの場合、彼らはpタグが何であるかを知らない。

これで、グローバルな段落スタイルとは別のスタイルにする必要がある説明要素があるとします。その内部はテキストで、理想的には段落タグになりますが、誰が知っているのでしょうか、おそらくそうではないでしょう。

.description { 
     font-family: $LatoLight; 
     color: white; 
     font-size: 16px; 
     line-height: 1.25; 

     p { 
      font-family: $LatoLight; 
      color: white; 
      font-size: 16px; 
      line-height: 1.25; 
     } 
    } 

これはrepetativeとやり過ぎのように思えるが、私は唯一のpにスタイルを追加する場合、著者は、APを使用することはできません。この問題を回避するには、私は親にし、段落タグに両方のスタイルを追加しますタグを使用し、親にスタイルを適用するだけでは、グローバルスタイルや他の段落スタイルが親スタイルを追い越します。私は一般的にアンカータグの色でも同じことをします。時には私のバックエンドコードでタグを実行することもできますが、私は本当に純粋にスタイリングアーキテクチャからのソリューションにもっと興味があります。

他の人はどうしますか？これは悪い戦略ですか？今日まで、上記のスタイリングは私にとって最も信頼できるものでした。

Answer 1

あなたはこれを試すことができます：

.description { 
    font-family: $LatoLight; 
    color: white; 
    font-size: 16px; 
    line-height: 1.25; 

    *{ 
     font-family: inherit; 
     color: inherit; 
     font-size: inherit; 
     line-height: inherit; 
    } 
} 

Answer 2

は、安全に（または任意のWYSIWYGが使用されている）著者は全く要素を挿入すると仮定することはできますか？基本的に最も一般的に使用されるテキスト含有要素であるpまたはdiv, span, blockquote, article, main, sectionになります。

いくつかのオプションは、次のようになります。

1. 出力は常に（上書きすることがスタイル難しくする）idと/またはクラスの入った容器に入っていることを確認します。
2. これまでどのようなWYSIWYGエディタ（1を使用している場合）のみ出力
3. 制御可能な要素の一握りだけで、多くのHTML要素が実際に存在しない要素

の一握りを使用するには、著者を掲載しますことを確認してくださいとにかく選ぶ

CSS：あなたは一度だけ、あなたのスタイルを書いている

.description, 
.description p, 
.description span, 
.description td, 
.description article, 
.description main, 
.description blockquote, 
.description section, 
.description any_selector_here, 
.description div { 
    font-family: $LatoLight; 
    color: white; 
    font-size: 16px; 
    line-height: 1.25; 
} 

この方法です。