
Когда при одном беглом взгляде на макет, ты уже понимаешь, как его разверстать, а строчки тегов превращаются в симфонию нот, делать пост с очередной реализацией менюшки или поддержки png как-то не хочется. Поневоле задаешься чем-то глобальным.
Очень многие, например, убиваются по оптимизации кода, экономя каждый байт. Это, в общем-то, оправдано, когда речь идёт о сайте с двумя-тремя типовыми страницами. Но при разработке крупных порталов, где каждая страница может иметь незначительное стилевое отличие от другой, такой подход к делу — вреден.
Отследить, как повлияет корректировка существующего правила на такой портал — проблематично. А если это ещё и не ваш портал? Если вас просто попросили внести пару десятков изменений? Тот ещё мозготряс.
В таком случае верстать лучше объектами или блоками (кому как нравится). Для тех, кто не знаком с термином ООП, объясню понятным языком.
Например, у нас есть дверь. Дверь обладает свойствами: она белая, прямоугольная и открыта. Теперь, если нам надо закрыть дверь, то мы просто меняем свойство «открытая» на «закрытая». Или добавить новое свойство — «застеклённая»… Довольно примитивное описание, но в целом ясно, я полагаю.
Ниже я займусь практикой. Вот такие есть у нас макеты списков в сайдбаре:

Типичный подход такой:
<li><a href="#">Новостной отдел</a></li>
<li><a href="#">Редакторския отдел</a></li>
<li><a href="#">Отдел корректора</a></li>
</ul>
<ul class="list-sidebar">
<li><a href="#">Газеты</a></li>
<li><a href="#">Журналы</a></li>
<li><a href="#">Постеры</a></li>
</ul>
<ul class="list-sidebar">
<li><a href="#">скачать PDF</a></li>
<li><a href="#">скачать PNG</a></li>
<li><a href="#">скачать DOC</a></li>
</ul>
list-style:none;
margin: 0px 0px 3px 0px;
}
.list-sidebar a{
text-decoration: underline;
color:#000;
padding: 0px 0px 0px 15px;
background: url('images/bullet.gif') no-repeat 0 1px;
}
.list-sidebar a:hover{
color:#333;
}
Более семантичный подход такой:
<li><a href="#">Новостной отдел</a></li>
<li><a href="#">Редакторския отдел</a></li>
<li><a href="#">Отдел корректора</a></li>
</ul>
<ul class="list-sidebar-products">
<li><a href="#">Газеты</a></li>
<li><a href="#">Журналы</a></li>
<li><a href="#">Постеры</a></li>
</ul>
<ul class="list-sidebar-download">
<li><a href="#">скачать PDF</a></li>
<li><a href="#">скачать PNG</a></li>
<li><a href="#">скачать DOC</a></li>
</ul>
list-style:none;
margin: 0px 0px 3px 0px;
}
.list-sidebar-division a, .list-sidebar-products a, .list-sidebar-download a{
text-decoration: underline;
color:#000;
padding: 0px 0px 0px 15px;
background: url('images/bullet.gif') no-repeat 0 1px;
}
.list-sidebar-division a:hover, .list-sidebar-products a:hover, .list-sidebar-download a:hover{
color:#333;
}
И, наконец, объектный подход
<li><a href="#">Новостной отдел</a></li>
<li><a href="#">Редакторския отдел</a></li>
<li><a href="#">Отдел корректора</a></li>
</ul>
<ul class="list-sidebar list-sidebar-products">
<li><a href="#">Газеты</a></li>
<li><a href="#">Журналы</a></li>
<li><a href="#">Постеры</a></li>
</ul>
<ul class="list-sidebar list-sidebar-download">
<li><a href="#">скачать PDF</a></li>
<li><a href="#">скачать PNG</a></li>
<li><a href="#">скачать DOC</a></li>
</ul>
list-style:none;
margin: 0px 0px 3px 0px;
}
.list-sidebar a{
text-decoration: underline;
color:#000;
padding: 0px 0px 0px 15px;
background: url('images/bullet.gif') no-repeat 0 1px;
}
.list-sidebar a:hover{
color:#333;
}
Если речь идёт о двух-трёх страницах, то тут и говорить не о чём: первые два варианта однозначно лучше.
В случае же многостраничного сайта мы, скорее всего, столкнёмся с тем, что позже центральный список надо сделать красным, верхнему — заменить буллиты, а нижний вообще удалить. В случае вёрстки объектами мы просто добавим или изменим свойства без опасения задеть остальное оформление, да и удалять лишние стили при такой вёрстке гораздо проще…
Видели бы вы, как разрастается CSS на порталах, созданных при стандартном подходе. Ведь удали из css-файла лишнюю строчку, и страшно представить, где это аукнется. В объектно-ориентированной вёрстке таких проблем нет.
Автор: Максим Покровский.
Комментарии:
pepelsbey
Вам будет о чём поговорить с Виталиком Харисовым —
<table class="l-my-cards l-my-cards-history">
<i class="b-card b-card-75 b-card-c7">
<ul class="b-foot b-foot_3columns">
…примеры отсюда.
Такой подход — пожалуй, самое эффективное решение, когда речь идёт о сложной вёрстке с библиотечными замашками.
Максим Покровский
Да. Код там грамотный. Жаль спецов, умеющих думать, а не мыслить шаблонно можно пересчитать на пальцах одной руки. Ну или они в тени держатся.
pepelsbey
Думаю тебе будет интересно послушать доклад Виталика на Яндекс.Субботнике 31 января. А если не повезло географически, то через недельку появится видео и сама презентация. Там как раз будет идти рассказ про такую ООП-методику, фреймворк и прочее.
Илья Азаров
макс, мы в общем то так и делаем. чтобы строчка стиля для блока ниче не могла менять глобально…
не нужен стал плагин календаря – можно смело из CSS выкидывать строки начинающиеся на .calendar (обычно они все одной кучей идут). ну и в таком духе.
Максим Покровский
Думаю тебе будет интересно послушать доклад Виталика на Яндекс.Субботнике 31 января. А если не повезло географически, то через недельку появится видео и сама презентация. Там как раз будет идти рассказ про такую ООП-методику, фреймворк и прочее.
Географически то мне повезло, но вот только далеко от столицы. :)
А видео где планируется выкладывать? У него в блоге?
pepelsbey
Видео будет через официальные каналы Яндекса, ну и я конечно об этом напишу.
Jman
Сейчас делаю инет магазин… и тоже пришёл к такому методу. Один класс для общих стилей второй класс или ID непосредственно описывающий данный блок. Тоесть если есть у нас блоки со скругленными границами пишем класс round-border и в зависимости от того что у нас в этом блоке назначаем ещё один класс (например search). ИМХО только чтобы использовать такое надо видеть весь проект на перёд. А не так как у нас любят — пока верстается главная, дизайнер дорисовывает внутряки.
Максим Покровский
ИМХО только чтобы использовать такое надо видеть весь проект на перёд. А не так как у нас любят — пока верстается главная, дизайнер дорисовывает внутряки.
Если знать наверняка, что после верстки ничего не поменятся, то такой метод не нужен. Объектная верстка как раз и нужна для динамично меняющихся проектов.
Никита Селецкий
Использую такой метод. Но если подходить к делу ещё более системно, то классы можно назвать без префиксов, а описывать в CSS в связке: .list-sidebar.download
Но при этом нужно вести докумментацию классов, чтобы класс download, где-нибудь случайно без примарного класса не использовать.
При этом очень важна позиция классов (чтоб наоборот не получилось — ul class=”download list-sidebar”), иначе можно сбить с толку IE 6.
Аноним
[...] Объектно ориентированная верстка [...]
Nata
да уж. было бы еще интересней посмотреть сами коды. а то чет их не видать. то есть они почему-то не отображаются.=(
Максим Покровский
да уж. было бы еще интересней посмотреть сами коды. а то чет их не видать. то есть они почему-то не отображаются.=(
Пофиксил. Баг codecolorers. Так всегда после обновления.
alexpts
Каждый раз мыслишь по-разному, когда-то упрощаешь для универсальности, а когда-то просто по банальному “просто я так хочу” можно навернуть такое, что потом сам в ужас придешь и никакой логики в этом нет. В целом, думаю, что ООП это полезная вещь, и ОО верстка имеет в будущем приоритет.
Скажите, что за плагин быстрого форматирования тэгов у вас стоит на блоге?