4

在我的页面上,我有几个块(div)具有相同的样式(菜单面板、信息面板backgroundborder页脚面板,...)。

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


我研究的一种方法是引入一个专门的类(例如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++ 中。有什么办法可以做到这一点?我对此表示怀疑,但也许...

如果没有那么还有其他方法吗?

4

1 回答 1

3

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

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

对我来说,这正是我会做的方式。

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

揭示实施是否存在安全问题?

Harry Roberts 的一些精选帖子:

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类,填充属性对我来说有点悬停在结构和表现的边界上。结构性的,因为它改变了它所应用的任何元素的布局,表现性的,因为填充改变了它在页面上的外观。

在理想的世界中,您永远不需要包含 的类属性menu box bordered left_column,因为您将编写几个将结构和表示分开的类。

考虑您的情况,我可能会创建一个面板类 .panel{ margin:10px 0; 填充:10px;显示:块}

和一个面板显示类

.panel-display{ 背景色:#1111e4 } .panel-display > a{ color:#fff }

通过这种方式,我可以在不影响网站结构的情况下玩演示文稿。(nb我不确定这是否对你有帮助!,这对我来说似乎是合乎逻辑的)

于 2013-01-15T09:45:52.467 回答