在我的页面上,我有几个块(div
)具有相同的样式(菜单面板、信息面板background
、border
页脚面板,...)。
现在我想只写一次这种风格,而不是为每个面板重复它。然而,我没有看到任何舒适的方式来做到这一点。
我研究的一种方法是引入一个专门的类(例如panelClass
)来捕获常见的面板样式。然后在 (X)HTML 中,我只需将该类添加到每个应该是面板的元素中。
但这感觉不对。毕竟我将在 (X)HTML 中“揭示实现”。我不再能够轻松透明地更改内容,因为这需要修改 (X)HTML。
更不用说它引入了类的顺序问题(因此如果需要,CSS属性将被覆盖的顺序)。
编辑:(对科林答案的扩展解释)
通过“揭示实现”,我的意思是(X)HTML(“内容”)与 CSS(“表示”)的联系比我希望的要强得多。也许我正在追求一个遥不可及的理想(甚至可能是一个虚幻或虚幻的理想!)但我试图将“内容”与“演示”分开。
因此,拥有一个类menu
并不坏,因为它描述的是“内容”而不是“呈现”。而使用类似的类(我从引用的文章和该站点上的其他一些文章中了解到的)menu box bordered left_column
是不好的,因为它将演示与内容混合在一起。一旦你开始添加这样的类,你可能会直接将该 CSS 添加到style
属性中。它肯定会做更多的工作和不可维护的结果,但在概念上(当涉及内容 - 呈现分离时)它不会产生任何影响。
现在我确实意识到,在现实生活中,对于真实页面(丰富而美观)来说,将内容与演示完全分开几乎是不可能的。但是您仍然可以(应该?)至少尝试这样做。
也只需看看文章末尾的“但是”应用于 CSS 的单一职责原则。在我看来,island
他使用的课程已经是演示性的,因为它没有描述内容。它描述了如何显示它。一旦您看到他在内容方面没有共同点的元素上使用(或可能使用)该类的广泛程度,这一点就会立即显而易见。
结束编辑
另一种方法是使用选择器分组。所以我会有类似的东西:
#menu, #info, #footer {
background: /* ... */
border: /* ... */
}
这避免了修改 (X)HTML 的需要。但仍然会导致订单问题。并且也很难对样式进行逻辑分组。特别是如果它们分布在许多文件中。
我认为我真正想要的是能够命名一组属性并以某种方式将它们导入选择器中。例如#include
,在 C++ 中。有什么办法可以做到这一点?我对此表示怀疑,但也许...
如果没有那么还有其他方法吗?