风格的问题 - 样式和样式表的方法 [英] A question of style - approaches to styling and stylesheets

问题描述

我有一个网站通常在首页顶部有新闻项目，有时（在特定时间段），新闻项目下方会有一个或多个快速链接，以引导用户访问主题兴趣的网页。

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

以前，当外观不太动态时，每个部分都被绝对定位，并且正确配置了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 ...;} 
  

...看起来有点太冗长。 b
$ b

或者：

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

或者，甚至：

  .news {etc ...;} 
 .ql {etc ...;} 
 .main {etc ...;} 
 
 <$ c> 
 $ c>< div class =newsstyle =top：100px;> 
< div class =qlstyle =top：150px;> 
< div class =mainstyle =top：200px;> 
  
这是最直接的解决方案，但显然有些样式是在HTML中纯粹主义者的观点是不否认;这种观点有实际的原因，但是在这种情况下，这可能是处理要求的各种任意更改的最简单方法。
 
 
 
注意： （不好）由第三方设计，虽然我已经试图拯救它没有完全重写它。然而，该网站将重新开发，可能早在2009年第三季度或第四季度。在这个阶段，我希望从绝对定位的方法，到更流行的一个，所以这个问题是关于什么
解决方案
 
 。 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 ...;} 
  
稍后可以添加更多规则。
 
 
 
如果真的是一个临时解决方案，请继续，让自己容易。但你现在最多的临时解决方案坚持了很多年。
 
I have a site that usually has news items at the top of the homepage, and sometimes (for specific periods) will have one or more 'quicklinks' beneath the news items, to guide users to pages of topical interest. Beneath those is the usual blurb.

We have alternative language versions of these sites, which often don't contain either the news items or the quicklinks, but may do from time to time.

Previously, when the appearance was less dynamic, each section was absolutely positioned, with a top attribute configured appropriately. But as more subtle variations were required, I find myself chopping and changing both the base HTML and the stylesheet rules. 

My question is what do people think about the different approaches to this problem, and do they have any suggestions that I haven't considered. Achieving the desired result is easy, but I'm thinking of good coding practice that makes the site easier to read & debug.

I could have separate style classes for each variation of each item:
.news {top: 100px; etc...;}
.news2 {top: 150px; etc...;}
.ql {top: 150px; etc...;}
.ql2 {top: 200px; etc...;}
.main {top: 200px; etc...;}
.main2 {top: 250px; etc...;}
...which seems a little too verbose.

Or, perhaps:
.news {etc...;}
.ql {etc...;}
.main {etc...;}
.top100 {top: 100px;}
.top150 {top: 150px;}
.top200 {top: 200px;}
.top250 {top: 250px;}
Somewhat more compact, and it keeps the styling in the stylesheet and away from the HTML.

Or, perhaps even:
.news {etc...;}
.ql {etc...;}
.main {etc...;}
in HTML:
<div class="news" style="top:100px;">
<div class="ql" style="top:150px;">
<div class="main" style="top:200px;">
This is the most 'direct' solution, but clearly some of the styling is in the HTML which from a purists point of view is a 'no-no'; There are practical reasons for this view, but in this case, this is probably the easiest way to handle the varied and arbitrary changes that will be requested.

Note: The site was (poorly) designed by a 3rd party, although I have tried to rescue it without entirely re-writing it. However, the site will be re-developed, possibly as early as Q3 or Q4 2009. At that stage, I'd hope to be moving away from a absolutely positioned approach, to one that is more fluid - so this question is about what to do in the interim, and also as a general question of style.
解决方案
.top100 {top: 100px;}
.top150 {top: 150px;}
.top200 {top: 200px;}
.top250 {top: 250px;}
Is a bad practice, because you now add style information into the HTML.
Better use descriptive names and link them together. Like:
.news {top: 100px; etc...;}
.news2, .ql {top: 150px; etc...;}
.ql2, .main {top: 200px; etc...;}
.main2 {top: 250px; etc...;}
You can add more rules later.

If it really is a temporary solution, go ahead and make it easy for yourself. But you now that most temporary solutions stick around for a lot of years.

                        
这篇关于风格的问题 - 样式和样式表的方法的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！