样式问题 - 样式和样式表的方法答案

【问题标题】：A question of style - approaches to styling and stylesheets样式问题 - 样式和样式表的方法
【发布时间】：2010-09-21 06:31:35
【问题描述】：

我有一个网站，其主页顶部通常有新闻项目，有时（在特定时期内）新闻项目下方会有一个或多个“快速链接”，以引导用户访问感兴趣的页面。在这些之下是通常的宣传。

我们有这些网站的替代语言版本，它们通常不包含新闻项目或快速链接，但可能会不时包含。

以前，当外观不太动态时，每个部分都是绝对定位的，并适当配置了 top 属性。但由于需要更细微的变化，我发现自己在修改和更改基本 HTML 和样式表规则。

我的问题是人们如何看待这个问题的不同方法，他们有什么我没有考虑过的建议。达到预期的结果很容易，但我正在考虑使网站更易于阅读和调试的良好编码实践。

我可以为每个项目的每个变体设置单独的样式类：

.news {top: 100px; etc...;}
.news2 {top: 150px; etc...;}
.ql {top: 150px; etc...;}
.ql2 {top: 200px; etc...;}
.main {top: 200px; etc...;}
.main2 {top: 250px; etc...;}

...这似乎有点太冗长了。

或者，也许：

.news {etc...;}
.ql {etc...;}
.main {etc...;}
.top100 {top: 100px;}
.top150 {top: 150px;}
.top200 {top: 200px;}
.top250 {top: 250px;}

更紧凑一些，它使样式保持在样式表中并远离 HTML。

或者，甚至可能：

.news {etc...;}
.ql {etc...;}
.main {etc...;}

在 HTML 中：

<div class="news" style="top:100px;">
<div class="ql" style="top:150px;">
<div class="main" style="top:200px;">

这是最“直接”的解决方案，但显然某些样式在 HTML 中，从纯粹主义者的角度来看，这是“不可以”；这种观点有实际原因，但在这种情况下，这可能是处理将请求的各种任意更改的最简单方法。

注意：该网站是由第 3 方设计的（很糟糕），尽管我试图在没有完全重写的情况下挽救它。但是，该网站将重新开发，最早可能在 2009 年第三季度或第四季度。在那个阶段，我希望从一种绝对定位的方法转变为一种更灵活的方法 - 所以这个问题是关于什么在过渡期间做，也作为一般的风格问题。

【问题讨论】：

标签： html css

【解决方案1】：

.top100 {top: 100px;}
.top150 {top: 150px;}
.top200 {top: 200px;}
.top250 {top: 250px;}

这是一种不好的做法，因为您现在将样式信息添加到 HTML 中。最好使用描述性名称并将它们链接在一起。喜欢：

.news {top: 100px; etc...;}
.news2, .ql {top: 150px; etc...;}
.ql2, .main {top: 200px; etc...;}
.main2 {top: 250px; etc...;}

您可以稍后添加更多规则。

如果它真的是一个临时解决方案，请继续努力，让自己变得轻松。但是您现在大多数临时解决方案都会存在很多年。

【讨论】：

好吧，我们打算按照一个共同的主题重新开发所有集团网站，但鉴于我们在项目规划和需求规范方面的记录，我认为还会有更多工作比人们实际想象的要好 - 因此暂时可能会持续一段时间。

【解决方案2】：

那么，您是否在没有快速链接的情况下使用"<classname>"，在有快速链接的情况下使用“<classname>2"”？

你知道，你可以在一个元素上使用多个类名。例如，您可以拥有<elem class="<classname> quicklinks">。并在您的 CSS 中添加一个单独的 .quicklinks 类，以将所有内容再向下移动 50 像素。

然而，绝对定位并不意味着这样的事情。如果您将文本调整得这么大，事情就会开始重叠。

有可能只是快速链接的存在可用于使其他所有内容下拉，前提是您不要这样放置元素。

【讨论】：

正如我对 GameCat 所说，底层设计相对较差 - 布局应该是流畅的，但遗憾的是它不是。幸运的是，重新设计将改变。
@CJM - 抱歉，我刚刚阅读了我的问题并意识到代码示例没有转义，因此不可见。你现在应该能明白我的第一点了吧！

【解决方案3】：

其实最好的解决办法大概是这样的：

.news, .news2 {top: 100px; etc...;}
.news2 {top: 150px;}
.ql, .ql2 {top: 150px; etc...;}
.ql2 {top: 200px;}
.main, .main2 {top: 200px; etc...;}
.main2 {top: 250px;}

但我同意你的观点 GameCat...

谢谢

【讨论】：