Вопрос стиля - подходы к стилю и таблицам стилей

Question

У меня есть сайт, на котором обычно есть новостные элементы в верхней части главной страницы, а иногда (для определенных периодов) под новостными элементами будет одна или несколько «быстрых ссылок», чтобы направлять пользователей на страницы, представляющие актуальный интерес. Под ними - обычная реклама.

У нас есть альтернативные языковые версии этих сайтов, которые часто не содержат ни новостей, ни быстрых ссылок, но могут время от времени делать это.

Ранее, когда внешний вид был менее динамичным, каждый раздел был абсолютно позиционирован с соответствующим образом настроенным атрибутом 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, который с точки зрения пуристов означает «нет-нет»; Для этого представления есть практические причины, но в этом случае это, вероятно, самый простой способ обработки различных и произвольных изменений, которые будут запрошены.

Примечание. Сайт был (плохо) спроектирован третьей стороной, хотя я пытался спасти его, не переписав его полностью. Тем не менее, сайт будет переработан, возможно, уже в третьем или четвертом квартале 2009 года. На этом этапе я хотел бы перейти от абсолютно позиционированного подхода к более гибкому подходу - так что этот вопрос о том, что делать в промежутке, а также как общий вопрос стиля.

Answer 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...;}

Вы можете добавить больше правил позже.

Если это на самом деле - временное решение, сделайте это сами. Но теперь вы понимаете, что большинство временных решений остаются в течение многих лет.

Answer 2

Итак, вы используете "<classname>" для тех мест, где нет быстрых ссылок, и "<classname>2" для тех мест, где есть быстрые ссылки?

Знаете, вы можете использовать более одного имени класса для элемента. Таким образом, вы можете иметь <elem class="<classname> quicklinks"> например. И есть отдельный класс .quicklinks в вашем CSS, чтобы переместить все еще на 50px.

Однако абсолютное позиционирование не предназначено для подобных вещей. Если вы измените размер текста так сильно, что все начнёт перекрываться.

Вполне возможно, что само присутствие быстрых ссылок может быть использовано для того, чтобы все остальное выпало, если вы не позиционируете свои элементы таким образом.

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

Спасибо