如何共享常见的CSS样式

在我的页面上，有几个块（

div

）在

背景和
边框方面具有相同的样式（菜单面板、信息面板、页脚面板等）

现在我只想写一次这种风格，而不是在每个面板上重复。然而，我看不到任何舒适的方式来做到这一点


我研究的一种方法是引入一个专用类（例如
panelClass
），它将捕获常见的面板样式。然后在（X）HTML中，我只需将该类添加到每个应该是面板的元素中

但这感觉不对。毕竟，我将在（X）HTML中“揭示实现”。我不再能够轻松透明地更改内容，因为这需要修改（X）HTML

更不用说它引入了类的顺序问题（以及CSS属性在需要时被覆盖的顺序）

编辑：（对科林答案的扩展解释）

通过“显示实现”，我的意思是，（X）HTML（“内容”）与CSS（“表示”）的联系比我希望的要紧密得多。也许我追求的是一个遥不可及的理想（甚至可能是一个不真实或虚假的理想！），但我试图将“内容”与“展示”分开

因此，拥有一个类
菜单
并不坏，因为它描述的是“内容”而不是“表示”。而使用类似左边框的菜单框
之类的类（我从引用的文章和该网站上的少数其他文章中了解到的）是不好的，因为它混合了演示和内容。一旦您开始添加此类类，您很可能会将CSS直接添加到
style
属性中。这肯定会有更多的工作和无法维护的结果，但在概念上（关于内容表示分离），这不会有什么不同

现在我确实意识到，在现实生活中，对于真实的页面（丰富而漂亮），几乎不可能将内容与呈现完全分开。但你至少可以（应该？）尝试一下

另外，请看文章末尾的“但是”。在我看来，他使用的
island
类已经具有代表性，因为它没有描述内容。它描述了如何显示它。一旦你们看到他在内容上并没有任何共同点的元素上广泛使用（或者可能已经使用）这个类，这一点就显而易见了

结束编辑


另一种方法是使用选择器分组。所以我想说：

#menu, #info, #footer {
  background: /* ... */
  border: /* ... */
}

这避免了修改（X）HTML的需要。但仍然会导致订单问题。同时也使得风格的逻辑分组变得困难。特别是如果它们分布在多个文件中


我想我真正想要的是能够命名一组属性，并以某种方式在选择器中导入它们。例如C++中的代码> <代码>。有没有办法做到这一点？我怀疑，但也许

如果没有，那么还有其他方法吗？
使用类定义样式是正确的方法

我研究的一种方法是引入一个专用类（例如panelClass），它将捕获常见的面板样式。然后在（X）HTML中，我只需将该类添加到每个应该是面板的元素中

对我来说，这正是我要做的

但这感觉不对。毕竟，我将在（X）HTML中“揭示实现”

公开实现是否存在安全问题

Harry Roberts的几篇精选文章：




我发现他使用CSS的风格让人大开眼界，这可能会对你有所帮助

更新

根据您的更新，我同意您的意见，您应该尝试将结构与演示分离，尽管有时我们无法完全管理它。我不知道这是否完全可能

我部分不同意
孤岛
类，padding属性对我来说有点徘徊在结构和表示的边界上。结构化是因为它改变了应用它的任何元素的布局，呈现性是因为填充改变了它在页面上的外观

在理想情况下，您不应该需要包含左边框菜单框的class属性，因为您将编写两个类来分离结构和表示

考虑到您的案例，我可能会创建一个panel类
.小组{
利润率：10px0；
填充：10px；
显示：块
}

和一个面板显示类

.面板显示器{
背景色：#1111e4
}
.面板显示>a{
颜色：#fff
}

通过这种方式，我可以在不影响网站结构的情况下进行演示。
（注意：我不确定这是否对你有帮助！我觉得这似乎是合乎逻辑的）
你也可以使用
更少的
我认为最好的解决方案是使用选择器分组的方法-它清晰自然。我不同意这会导致订单问题。我已经扩展了我的问题，更多地解释了“显示实现”。你能在这里给出一个更具体的例子，而不是链接吗？