объектно ориентированная вёрстка Как создать свой сайт > Вебмастеру > Создание своего сайта > Объектно-ориентированная вёрстка

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

Таких людей мог свалить либо выстрел, либо нож,
ну, в крайнем случае, большая доза спиртного, но никак не работа.
«Кошмар на улице Стачек», Андрей Кивинов.


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


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

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

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

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

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

пример списков

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

<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="#">Газеты</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-sidebar{
   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;
         }


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

<ul class="list-sidebar-division">
   <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-sidebar-division, .list-sidebar-products, .list-sidebar-download{
   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;
         }


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

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


⇓ 

Поделись ссылкой на Seoded.ru с друзьями, знакомыми и собеседниками в соцсетях и на форумах! А сам сайт добавь в закладки! Так победим.

Поделиться ссылкой на эту страницу в:

Полезные ссылки:

Заработок на спортивных ставках онлайн Как открыть запрещённый сайт

Ещё материалы по этой теме:

Область реагирования в дизайне интерфейсов Две системы устройства сайтов GetText Как бесплатно зарегистрировать домен в зоне org.ua? Как писать статьи для сайта
основан в 2008 г. © Все права на материалы сайта Seoded.ru принадлежат Алексею Вострову.
Копирование (полное или частичное) любых материалов сайта возможно только с разрешения автора и при указании ссылки на источник.
Ослушавшихся находит и забирает Бабайка!