如何共享常见的CSS样式

Question

在我的页面上，我有几个与background和border（菜单面板，信息面板，页脚面板等）具有相同样式的块（div）。

现在我只想写一次这种风格，而不是为每个面板重复一次。但是我看不到任何这样做的舒服方式。

---

一种方法，我调查是引入一个专用的类（如panelClass），将捕获的共同面板样式。然后在（X）HTML中，我只是将该类添加到应该是面板的每个元素。

但是这并不正确。毕竟我会在（X）HTML中“揭示实现”。我不再能够透明地改变事情，因为这需要修改（X）HTML。

更不用说，它引入了类的顺序问题（因此，如果需要，CSS属性将被覆盖的顺序）。

编辑：（对歌林的回答扩展的解释）

通过“揭示实施”我的意思是，（X）HTML（“内容”）是更强烈连接到CSS（“该演示文稿“）比我希望他们成为。也许我正在追求一个无法实现的理想（甚至可能是一个虚幻的或虚拟的！），但我试图将“内容”与“演示文稿”分开。

因此有一个类menu并不坏，因为它描述了“内容”而不是“呈现”。在使用时（我从引用的文章和该网站上的其他人了解的内容），使用类似menu box bordered left_column的类很不好，因为它将表示与内容混合在一起。一旦你开始添加这样的类，你可能会很好地将该CSS添加到style属性中。它肯定会有更多的工作和一个不可维护的结果，但在概念上（关于内容呈现分离时）它不会产生影响。

现在我明白了，在现实生活中真实的网页（丰富而美观）实际上不可能将内容与演示完全分开。但是你仍然可以（应该？）至少尝试。

也只是看文章末尾的“但是”The single responsibility principle applied to CSS。在我看来，他使用的island课程已经是表现性的，因为它没有描述内容。它描述了如何显示它。这一点很明显，一旦你看到他使用（或可能使用过）关于内容上没有任何共同点的类的广泛程度。

编辑完

---

另一种方法是使用选择分组。所以我会有这样的：

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

这可以避免需要修改（X）的HTML。但仍然会导致订单问题。而且也使得逻辑上将样式分组变得困难。特别是如果它们分布在许多文件中。

---

我认为我真正想要的是能够命名一组属性，并以某种方式将它们导入到选择器中。例如C++中的#include。有什么办法可以做到这一点？我怀疑它，但也许...

如果不是那么是否有任何其他方法？

Answer 1

使用类来定义样式是正确的方法。

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

对于我来说，这正是我会做到这一点。

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

是那里揭示实施的安全问题？

从哈利·罗伯茨几个选择的文章：

http://csswizardry.com/2012/04/my-html-css-coding-style/

http://csswizardry.com/2012/04/the-single-responsibility-principle-applied-to-css/

http://csswizardry.com/2012/05/keep-your-css-selectors-short

我发现他使用CSS眼开的风格，它可以帮助你

更新

从您的更新继，我同意你的意见，你应该尝试和表现独立结构，虽然会有时间，我们不能完全管理。无论是否完全可能，我都不知道。

我不同意部分对island类，padding属性对我那种徘徊在结构和表象的边界。因为它改变了它应用到的任何元素的布局，因为填充改变了它在页面上的外观。

在一个理想的世界里，你永远不需要一个包含menu box bordered left_column的类属性，因为你会编写几个类来分离结构和表示。我想创建一个面板类 。 padding：10px; 显示：块 }

和面板显示类

.panel显示{ 背景色：＃1111e4 } 。panel-display> a { color：#fff }

这样我就可以在不影响网站结构的情况下播放演示文稿。 （我不确定这是否对你有帮助！），这对我来说似乎是合乎逻辑的）