Question

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

现在我想只编写一次该样式，而不是每个面板重复一次。然而，我认为没有任何舒适的方式。

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

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

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

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

通过“揭示实现”，我的意思是（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中“揭示实现”。

显示实施是否存在安全问题？

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的类属性，因为你会编写几个分离结构和表示的类。

考虑你的情况我可能会创建一个面板类。面板{ 保证金：10px 0; 填充：10px; 显示：块 }

和面板显示类

.panel显示{ 背景颜色：＃1111e4 } .panel-display＆gt;一个{ 颜色：#FFF }

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

如何共享常见的CSS样式

1 个答案: