Вопрос стиля - подходы к стилю и таблицы стилей
У меня есть сайт, на котором обычно есть новости в верхней части главной страницы, а иногда (для определенных периодов) есть одна или несколько «быстрых ссылок» под новостями, чтобы направлять пользователей на страницы, представляющие интерес. Под ними - обычная аннотация.
У нас есть альтернативные языковые версии этих сайтов, которые часто не содержат ни новостей, ни быстрых ссылок, но могут время от времени содержать их.
Раньше, когда внешний вид был менее динамичным, каждая секция позиционировалась абсолютно, с соответствующим образом настроенным верхним атрибутом. Но поскольку потребовались более тонкие вариации, я обнаружил, что рублю и меняю как базовый 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 года. На этом этапе я надеюсь перейти от абсолютно позиционированного подхода к более гибкому - поэтому этот вопрос заключается в том, что сделать в промежутке, а также как общий вопрос стиля.
Ответы 3
.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...;}
Позже вы сможете добавить другие правила.
Если В самом деле - временное решение, сделайте это проще для себя. Но вы сейчас, когда большинство временных решений остаются на много лет.
Итак, вы используете "<classname>" там, где нет быстрых ссылок, и <classname>2", когда они есть?
Вы знаете, что вы можете использовать более одного имени класса для элемента. Так что у вас может быть, например, <elem class = "<classname> quicklinks">. И создайте отдельный класс .quicklinks в вашем CSS, чтобы переместить все вниз еще на 50 пикселей.
Однако абсолютное позиционирование не предназначено для подобных вещей. Если вы измените размер текста настолько, что все начнет накладываться друг на друга.
Возможно, что само наличие быстрых ссылок может быть использовано для раскрытия всего остального, при условии, что вы не размещаете свои элементы таким образом.
Как я сказал GameCat, основной дизайн относительно плох - макет должен быть плавным, но, к сожалению, это не так. К счастью, в редизайне все изменится.
@CJM - извините, я только что прочитал свой вопрос и понял, что образцы кода не экранированы и, следовательно, не видны. Теперь вы должны понять мою первую мысль!
Собственно, лучшее решение, наверное, таково:
.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 ...
Спасибо
Что ж, мы, являются, намереваются повторно разработать все сайты группы в соответствии с общей темой, но, учитывая наш опыт планирования проекта и спецификации требований, я думаю, что будет намного больше работы, чем люди на самом деле думают - и, таким образом, временная может быть на какое-то время.