A question of style - approaches to styling and stylesheets

Question

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.

Answer 1

.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.

Answer 2

So, are you using "<classname>" for where there are no quick links, and "<classname>2" for when there are?

You can use more than one classname on an element, you know. So you can have <elem class="<classname> quicklinks"> for example. And have a separate .quicklinks class in your CSS to move everything down another 50px.

Absolute positioning isn't meant for things like that however. If you resized your text so big, things would start overlapping.

It's possible that just the very presence of the quick links can be used to make everything else drop down, providing you don't position your elements like that.

Answer 3

Actually, the best solution is probably this:

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

But I take your point(s) GameCat...

Thanks