Объектно-ориентированная вёрстка

    Когда при одном беглом взгляде на макет, ты уже понимаешь, как его разверстать, а строчки тегов превращаются в симфонию нот, делать пост с очередной реализацией менюшки или поддержки png как-то не хочется. Поневоле задаешься чем-то глобальным.

    Очень многие, например, убиваются по оптимизации кода, экономя каждый байт. Это, в общем-то, оправдано, когда речь идёт о сайте с двумя-тремя типовыми страницами. Но при разработке крупных порталов, где каждая страница может иметь незначительное стилевое отличие от другой, такой подход к делу — вреден.

    Отследить, как повлияет корректировка существующего правила на такой портал — проблематично. А если это ещё и не ваш портал? Если вас просто попросили внести пару десятков изменений? Тот ещё мозготряс.

    В таком случае верстать лучше объектами или блоками (кому как нравится). Для тех, кто не знаком с термином ООП, объясню понятным языком.

    Например, у нас есть дверь. Дверь обладает свойствами: она белая, прямоугольная и открыта. Теперь, если нам надо закрыть дверь, то мы просто меняем свойство «открытая» на «закрытая». Или добавить новое свойство — «застеклённая»… Довольно примитивное описание, но в целом ясно, я полагаю.

    Ниже я займусь практикой. Вот такие есть у нас макеты списков в сайдбаре:

    Типичный подход такой:

    Более семантичный подход такой:

    И, наконец, объектный подход

    Если речь идёт о двух-трёх страницах, то тут и говорить не о чём: первые два варианта однозначно лучше.

    В случае же многостраничного сайта мы, скорее всего, столкнёмся с тем, что позже центральный список надо сделать красным, верхнему — заменить буллиты, а нижний вообще удалить. В случае вёрстки объектами мы просто добавим или изменим свойства без опасения задеть остальное оформление, да и удалять лишние стили при такой вёрстке гораздо проще…

    Видели бы вы, как разрастается 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
Каждый раз мыслишь по-разному, когда-то упрощаешь для универсальности, а когда-то просто по банальному “просто я так хочу” можно навернуть такое, что потом сам в ужас придешь и никакой логики в этом нет. В целом, думаю, что ООП это полезная вещь, и ОО верстка имеет в будущем приоритет.
Скажите, что за плагин быстрого форматирования тэгов у вас стоит на блоге?