- PVSM.RU - https://www.pvsm.ru -
Речь в этой небольшой статье пойдет не о специфических техниках для конкретных случаев, также не будет раскрыта тема правильной оптимизации кода и графики под высоконагруженные проекты. Не знаю, много ли здесь людей, часто имеющих дело с вёрсткой небольших проектов, для которых избыточно применение haml/sass и кучи методик правильной оптимизации, отлично описанных в статьях других профессионалов.
Ко мне уже несколько лет регулярно обращаются заказчики с просьбой завершить вёрстку их проекта, которую по каким либо причинам не закончил другой исполнитель, или поправить баги, несмотря на то, что я не работаю с чужим кодом, или ломлю за это двойную цену. Судя по ленте проектов известных российских фрилансерских сайтов, эта проблема стоит достаточно остро, за доработки никто не хочет браться. Самое удивительное, что большая часть ошибок совершенно типовые и легко исправляемые.
Попробую собрать общие рекомендации, следуя которым можно получить не только деньги, но и благодарность заказчика, программистов и будущих посетителей сайта. Вещи очевидные, но статьи, собирающей их воедино я не нашел.
Регулярно встречающаяся проблема — отсутствующая или искореженная во время довёрстки логика кода. Я говорю не о грубых ошибках, вроде пересекающихся и незакрытых тегов, а о совершенно отмороженном подходе большого количества начинающих верстальщиков к дальнейшей судьбе их работы. Мои слова могут показаться крамольными, но вёрстку небольших проектов, вроде сайтов-визиток, 30-60-ти страничных корпоративных сайтов и им подобных, нет нужды строить на базе css-«фреймворков», и модульная сетка для верстки таких сайтов тоже не требуется. Это современно, это показывает уровень ваших навыков и это действительно часто оправдано, но в данном случае это лишь усложнит чтение кода и увеличит дерево DOM. Как говорил старик Резо, не преумножай сущности сверх надобности.
<!-- news -->
<div class="news">
<div class="item">
<span class="date">16.07.12</span>
<a href="#" title="" class="title"><strong>Создание продающих сайтов</strong></a>
<p>Текст новости</p>
</div>
<div class="item">
<span class="date">16.07.12</span>
<a href="#" title="" class="title">Создание продающих сайтов</a>
<p>Текст новости</p>
</div>
<div class="item">
<span class="date">16.07.12</span>
<a href="#" title="" class="title">Создание продающих сайтов</a>
<p>Текст новости</p>
</div>
Куда проще и понятнее? Имена классов могут быть любыми, но крайне желательно, чтобы они не выбивались из общего стиля. Зачем писать news-box
, homenewsletter
? Особенно удивляет, если в следующем типовом блоке, например статей, класс называется articles-list
или даже all_articles
.
Обратите внимание на универсальный класс item
. Каждый волен обзывать его по разному, скажем box
, это не принципиально, мне item
кажется абсолютно нейтральным и понятным по смыслу всем, кому предстоит работать с кодом в дальнейшем — это просто блок из списка других таких же, как он.
Также можно заметить перед общим блоком комментарий, дублирующий название класса. Это может показаться избыточным, но на деле сильно облегчает ориентирование в коде. В редакторах с подсветкой комментарии обычно выделяются серым цветом, и ими удобно предварять относительно крупные куски кода. Злоупотреблять комментариями естественно не рекомендуется, также лично я не вижу смысла в циклопических конструкциях вида:
<!-- //-------------- FOOTER --------------// -->
<div id="footer">
<div class="wrapper>
Контент
</div>
</div>
Очевидно, использовать этот универсальный класс можно не только для этого, хотя и злоупотреблять им не следует.
В данном случае внутри контейнера у нас лежит картинка с float: left
, и wrapper
с контентом внутри, которому надо запретить обтекание(overflow: hidden
). Не будем заострять на этом внимание, напомню лишь на всякий случай, что универсальным классам нужно обязательно указывать родителей в CSS, чтобы в вёрстке не случился массакр:
.news .item { }
#footer .wrapper { }
Сначала о формах, совсем немного.
<form name="">
<input type="text" name="s1" value="Поле" tabindex="1" /><br />
<label><input type="checkbox" name="s2" tabindex="2" checked="checked" /> Чекбокс</label><br />
<input type="submit" name="s3" value="Кнопка" tabindex="3" />
</form>
Так как подавляющее большинство верстальщиков средней руки, которых в избытке на фрилансерских сайтах даже не заглядывали в спецификации, пара уточняющих моментов. Оборачивайте область формы в тег <form>
(name нужен для нормальной валидации), не гнушайтесь использовать лейблы для чекбоксов и радиокнопок, проставляйте табиндексы и нумеруйте или давайте понятные имена элементам формы. Это залог аккуратности и плюса в карму от программистов, которым предстоит работать с вашей вёрсткой.
Немного о подключении скриптов:
<script src="js/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/libs/jquery-1.7.1.min.js"></script>')</script>
<script src="js/plugins.js"></script>
<script src="js/script.js"></script>
<!-- Anything Slider -->
<link rel="stylesheet" href="js/anythingslider/css/anythingslider.css">
<script src="js/anythingslider/js/jquery.anythingslider.js"></script>
<script>
$(function(){
$('#slider').anythingSlider();
});
</script>
</body>
</html>
Хорошим тоном сейчас считается подключать скрипты перед закрывающим body
, с чем я не могу не согласиться, ничего плохого в этом нет. Также рекомендуется выносить статичные вызовы функций, не меняющиеся от страницы к странице в отдельный файл.
:first-child
, :nth-child
или их js-аналогах.placeholder
или js.ul
. Подменю в подавляющем большинстве случаев верстается без div
внутри li
.body
— это не мешает чтению кода с начала.tr:hover
, thead
, tbody
и tfoot
. Чередующиеся строки с разными стилями верстайте через CSS-селекторы или с помощбю классов even
и odd
css
для файлов стилей, images
или img
для изображений(и подпапка tmp
для временных изображений, которые не будут использоваться на живом сайте), js
для js, fonts
для шрифтов. Имена страниц я для удобства беру из названий файлов макетов, предоставленных заказчиком.
Не мне учить кого-либо, как ему оформлять таблицу стилей, я лишь покажу известный способ, который относительно редко используется, зато повышает читаемость CSS до запредельных высок и избавляет от необходимости использования заклинания Ctrl+F
.
Древовидная однострочная структура CSS на мой взгляд по всем пунктам дает фору такой форме записи:
.fmenu_text {
overflow: hidden;
vertical-align: top !important;
}
.font_medium .fmenu_item {
font-size: 11px;
}
.fmenu_item:hover {
text-decoration: none;
opacity: 1;
}
.fmenu_item_over {
opacity: 1;
background-color: #597DA3;
color: #FFF;
}
#fmenu_fr {
background-position: 100% -6px;
}
Читабельность повышает также последовательность написания селекторов в строку. Некоторые пользуются своей логикой записи, кто-то упорядочивает свойства по алфавиту, часть верстальщиков вообще пишет от балды. Я предпочитаю в первую очередь описывать свойства, описывающие поведение контейнера(position
, top/right/bottom/left
, float
, затем свойство display
, если оно присутствует, далее следуют всевозможные маргины и паддинги, outline
, cursor
и border
-ы, после чего идут шрифты и их свойства, за ними — background
и наконец свежие CSS3-свойства с префиксами или без).
margin: 0 0 0 0
). В противном случае ваши строки будут гигантской длины, что ухудшит читаемость.reset
в отдельный файл, подключайте его в начале общего файла стилей. Надо экономить на запросах к серверу. Внешние шрифты, font-face-kit's можно подключать сразу после reset
.link/visited/active/hover
подложки для ссылок делать спрайтами нужно обязательно, чтобы при наведении на ссылку hover
-подложка не подгружалась в течение пусть и 15-20 миллисекунд.html
рекомендуется предварять комментарием — /* comment */
.Это всё, что сходу пришло в голову из ситуаций, с которыми я регулярно сталкиваюсь по работе. Если у кого-то имеются поправки или дополнения, укажите их в комментариях. Заранее благодарен.
Из литературы могу порекомендовать отличную книгу Эрика Мейера "CSS — Подробное руководство [1]", брошюру от авторов проекта webo.in "Разгони свой сайт [2]" и собственно спецификации CSS [3].
Автор: Synoptic
Сайт-источник PVSM.RU: https://www.pvsm.ru
Путь до страницы источника: https://www.pvsm.ru/html/13865
Ссылки в тексте:
[1] CSS — Подробное руководство: http://www.ozon.ru/context/detail/id/3881079/
[2] Разгони свой сайт: http://www.ozon.ru/context/detail/id/4400714/
[3] спецификации CSS: http://www.w3.org/Style/CSS/specs.ru.html
Нажмите здесь для печати.