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