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

Question

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

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

Раньше, когда внешний вид был менее динамичным, каждая секция была абсолютно позиционирована, а верхний атрибут настроен соответствующим образом. Но поскольку требовались более тонкие вариации, я обнаружил, что я рубя и изменяю как базовый HTML, так и правила стилей.

Мой вопрос в том, что люди думают о различных подходах к этой проблеме, и есть ли у них какие-либо предложения, которые я не рассматривал. Достижение желаемого результата легко, но я думаю о хорошей практике кодирования, которая упрощает чтение сайта & debug.

я мог бы иметь отдельные классы стилей для каждой вариации каждого элемента:

.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, чтобы переместить все вниз еще на 50 пикселей.

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

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

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

Благодаря