A Question Of Style - Approaches To Styling And Stylesheets

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

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

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

Solution 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