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

Сделал за последнее время:

Добавил в портфель около 48-и новых работ:
Сделал очень много всяких штук при работе над поддержкой сайтов.
Как бы это теперь в портфель запихнуть?

Заказать мне работу

06.01

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

Комментарии (13) CSS, HTML

Когда при одном беглом взгляде на макет, ты уже понимаешь как его разверстать, а строчки тегов превращаются в симфонию нот, делать пост с очередной реализацией менюшки или поддержки 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>

Если речь идет о двух-трех страницах то тут и говорить не о чем: первые два варианта однозначно лучше. В случае же многостраничного сайта мы скорее всего столкнемся с тем что позже центральный список надо сделать красным, верхнему заменить буллиты, и нижний, вообще удалить. В случае верстки объектами, мы просто добавим или изменим свойства без опасения задеть остальное оформление, да и удалять лишние стили при такой верстке гораздо проще… Видели бы вы как разрастается css на порталах созданных при стандартном подходе, ведь удали из css файла лишнюю строчку и страшно представить где это аукнется. В ОО верстке таких проблем нет.

Метки:CSS, HTML, верстка, ооп

Также интересно будет почитать про:
Плагин Add code to RSS: Я уже делился (http://pokrovskii.com/kak-vyvesti-v-rss-meta-dannye/) способом которым можно расширить вашу RSS ленту. Его недостаток заключался в том, что после каждого аптейта необходимо было проделвать процедуру заново. Тогда я написал плагин (спасибо...
Структурируем HTML. Версия Покровского.: Про чистый код я уже рассказывал. Теперь о красоте будем говорить.— Первое правило - это соблюдение иерархии отступов. Для этого, диво как хорош notepad++ Вот, например, как выглядит хорошо структированный...
Центрирование “плавающего” меню: Потрясающее в своей элегантности решение. Обязательно должно быть на заметке у каждого.html, body { margin: 0; padding: 0; font-family:Tahoma, Arial, Helvetica, sans-serif; background-color: #fff; }.navi { width: 775px; /*Устанавливаем фиксированную ширину*/ position: relative; overflow: hidden; font-size: .8em; border: 1px...
Переходим на em: Сейчас мы за одну минуту перестанем указывать размеры шрифта в пикселях и станем указывать их в em. (давно вообщем то пора)Итак, вот такая конструкция:html{ font-size:100.01%; } body{ font-size:62.5%; }font-size:100.01%; - установили шрифт стандартного размера (16px)....
Кирилица в комментариях: Столкнулся с проблемной обработкой кириллических комментариев CSS в IE 6..ff{ color:green; /*Кириллический комментарий*/ } .ie6{ display:none; color:red; }Такая...

1
pepelsbey (06.01.2009) #
Вам будет о чём поговорить с Виталиком Харисовым —
<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">
…примеры отсюда.
Такой подход — пожалуй, самое эффективное решение, когда речь идёт о сложной вёрстке с библиотечными замашками.
2
Максим Покровский (07.01.2009) #
Да. Код там грамотный. Жаль спецов, умеющих думать, а не мыслить шаблонно можно пересчитать на пальцах одной руки. Ну или они в тени держатся.
3
pepelsbey (07.01.2009) #
Думаю тебе будет интересно послушать доклад Виталика на Яндекс.Субботнике 31 января. А если не повезло географически, то через недельку появится видео и сама презентация. Там как раз будет идти рассказ про такую ООП-методику, фреймворк и прочее.
4
Илья Азаров (07.01.2009) #
макс, мы в общем то так и делаем. чтобы строчка стиля для блока ниче не могла менять глобально…
не нужен стал плагин календаря – можно смело из CSS выкидывать строки начинающиеся на .calendar(обычно они все одной кучей идут). ну и в таком духе.
5
Максим Покровский (07.01.2009) #
Думаю тебе будет интересно послушать доклад Виталика на Яндекс.Субботнике 31 января. А если не повезло географически, то через недельку появится видео и сама презентация. Там как раз будет идти рассказ про такую ООП-методику, фреймворк и прочее.
Географически то мне повезло, но вот только далеко от столицы.
А видео где планируется выкладывать? У него в блоге?
6
pepelsbey (08.01.2009) #
Видео будет через официальные каналы Яндекса, ну и я конечно об этом напишу.
7
Jman (10.01.2009) #
Сейчас делаю инет магазин… и тоже пришёл к такому методу. Один класс для общих стилей второй класс или ID непосредственно описывающий данный блок. Тоесть если есть у нас блоки со скругленными границами пишем класс round-border и в зависимости от того что у нас в этом блоке назначаем ещё один класс (например search). ИМХО только чтобы использовать такое надо видеть весь проект на перёд. А не так как у нас любят — пока верстается главная, дизайнер дорисовывает внутряки.
8
Максим Покровский (11.01.2009) #
ИМХО только чтобы использовать такое надо видеть весь проект на перёд. А не так как у нас любят — пока верстается главная, дизайнер дорисовывает внутряки.
Если знать наверняка, что после верстки ничего не поменятся, то такой метод не нужен. Объектная верстка как раз и нужна для динамично меняющихся проектов.
9
Никита Селецкий (02.02.2009) #
Использую такой метод. Но если подходить к делу ещё более системно, то классы можно назвать без префиксов, а описывать в CSS в связке: .list-sidebar.download
Но при этом нужно вести докумментацию классов, чтобы класс download, где-нибудь случайно без примарного класса не использовать.
При этом очень важна позиция классов (чтоб наоборот не получилось — ul class=”download list-sidebar”), иначе можно сбить с толку IE 6.
10
Аноним (10.02.2009) #
[...] Объектно ориентированная верстка [...]
11
Nata (26.02.2009) #
да уж. было бы еще интересней посмотреть сами коды. а то чет их не видать. то есть они почему-то не отображаются.=(
12
Максим Покровский (26.02.2009) #
да уж. было бы еще интересней посмотреть сами коды. а то чет их не видать. то есть они почему-то не отображаются.=(
Пофиксил. Баг codecolorers. Так всегда после обновления.
13
alexpts (30.06.2009) #
Каждый раз мыслишь по-разному, когда-то упрощаешь для универсальности, а когда-то просто по банальному “просто я так хочу” можно навернуть такое, что потом сам в ужас придешь и никакой логики в этом нет. В целом, думаю, что ООП это полезная вещь, и ОО верстка имеет в будущем приоритет.
Скажите, что за плагин быстрого форматирования тэгов у вас стоит на блоге?