如何设计父元素和文本元素之间的级联字体样式关系

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;
        }
    }

这似乎是重复的和过度的，但是如果我仅将样式添加到P中，则作者可能不会使用P标签，如果我仅将样式应用于父，全球或其他段落样式，父母。我通常也使用锚标签颜色做同样的事情。有时我可以使用我的后端代码来执行标签，但是我对纯粹造型体系结构的解决方案确实更感兴趣。

别人做什么？这是一个糟糕的策略吗？迄今为止，上述样式对我来说是最可靠的。

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使用的任何Wysiwyg）将完全插入元素？无论是p还是div, span, blockquote, article, main, section，基本上是最常用的文本元素。

一些选择是：

1. 确保输出始终进入具有ID和/或类的容器（使其更难覆盖的样式）。
2. 确保Wysiwyg编辑器（如果使用一个）只会输出少数可控元素
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;
}

这样，您只写了一次样式。