Работая длительное время с версткой макетов у меня сложилась своя система, которой я стараюсь придерживаться из проекта в проект. И я решил ее свести в набор 10 правил, которые я обычно использую в работе. Итак
1. Используйте стандартный ластик reset.css
Я использую стандартный ластик от Сида Мейэра reset.css который позволяет обнулить все отступы, и привести ваш layout к некоторому эталонному значению, что позволит вам начинать верстку без оглядки на особенности браузеров в виде понимания ими блочной модели.
Эту и другие таблицы стилей вы можете взять на сайте Сида Мэйера http://meyerweb.com/eric/tools/css/reset/index.html
Выбрать же альтернативные варианты ластиков, можно на сайте http://www.cssreset.com/
Подключается ластик просто, достаточно добавить следующую конструкцию в области head
<link href="assets/css/reset.css" rel="stylesheet">
2. Делайте вашу структуру директорий логичной
Хотел бы обратить внимание на структуру папок. Практически каждый проект, в клиентской его части у меня имеет следующую структуру каталогов:
assets/ assets/images/ assets/photos/ assets/css/ assets/js/ assets/templates/
То есть логика всегда должна быть разделена. Все файлы стилей лежат в папке css все скрипты в папке js все изображения шаблонов в images, а вот шаблоны, в зависимости от потребности, или в базе данных или в папке templates
Практически все мои проекты реализованы на MODx Revolution, особенностью которой является хранение шаблонов по-умолчанию в базе данных.
3. Не забывайте про подключение favicon
Каждый проект содержит иконку favorite icon (favicon), поэтому в шапке я всегда подключаю ее следующим кодом
<link rel="icon" href="assets/images/favicon.ico" type="image/x-icon" /> <link rel="shortcut icon" href="assets/images/favicon.ico" type="image/x-icon" />
4. Подключайте стандартные jquery плагины, если у вас нет потребности в разработке своих
Достаточно часто в проектах требуется делать увеличение фотографий или слайдеры. Это стало практически стандартом де-факто, каждого прототипа и макета. Из проекта в проект, я использую практически одно и тоже решение. Для увеличения фотографий используется jquery plugin fancybox, а для реализации слайдера листалки используется jquery plugin flexislider
Подключаются эти плагины просто. Достаточно разместить в шапке следующий код
<script src="assets/js/jquery-1.8.3.min.js" type="text/javascript"></script> <script src="assets/js/jquery.flexslider-min.js" type="text/javascript"></script> <script src="assets/js/jquery.fancybox-1.3.4.pack.js" type="text/javascript"></script>
И совершить следующий вызов функции на jquery, который обычно вешается на событие $(document).ready(); то есть отрабатывает в момент готовности документа, после загрузки.
$(document).ready(function() { $('.flexslider').flexslider(); $('.fancybox').fancybox(); });
Этих действий будет достаточно для того чтобы включить плагины. Конечно каждый из них кастомизируется под задачу, то есть изменяется стилевая таблица под каждый проект отдельно.
5. Не забывайте про тэги alt и title и их атрибуты
По возможности я стараюсь прописывать все alt=»» и title=»» элементов дублируя в них соответствующие значения наименований элементов. Если же для элемента отсутствует строковое значение, я просто оставляю пустой alt=»» или title=»»
6. Определите для себя когда вы перейдете на html5
Я все еще работаю в пространстве xhtml и пока что не перешел на чистый html5. То есть все одинарные тэги у меня закрываются , а в doctype стоит следующая конструкция (в режиме transitional, не strict!)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ru" lang="ru">
То что html5 победил, очевидно. Переход на html5 я для себя наметил на середину 2015 года.
7. Проверяйте верстку на валидаторе, если у вас есть на это время
Я не работаю в режиме зомби-апокалипсис, и не проверяю весь свой код на валидаторе, если не стоит такой задачи. Когда-то мне доставляло удовольствие пройтись по всему коду, обработав сторонние счетчики кода, вроде rambler-top-100 или liveinternet через noindex просто потому что код, генерируемый этими счетчиками не проходит валидацию. Сейчас же я перестал видеть в этом сакральный смысл, поэтому просто не трачу на это время.
8. Используйте стандартное переопределение основных HTML тэгов документа в самом начале
BODY {}
A {}
A:link {}
A:visited {}
A:hover {}
A:active {}
H1 {}
H2 {}
P {}
UL {}
UL LI{}
UL UL{}Практически каждая стандартная таблица стилей у меня обычно начинается с этого кода. Тут предопределяются стили для документа BODY, ссылок, абзацев, заголовков и ненумерованных списков.
В зависимости от проекта сюда могут добавляться OL (нумерованные списки) и варьироваться количество заголовков H3, H4, H5 и так далее.
По принципу L(ink)oV(isited)e H(over)A(ctive)te предопределите стили для всех ваших ссылок, во всех вариантах их поведения.
9. Не забывайте про стандартные meta тэги
Даже если о них пишут как о устаревших и не актуальных, каждая страница документа должна содержать заголовок, ключевые слова и краткое описание. Google формирует сниппет с краткого описания. Зачем же этим пренебрегать?
<title>Заголовок документа</title> <meta name="keywords" content="ключевые, слова документа" /> <meta name="description" content="Краткое описание документа" />
10. Читайте, посещайте и смотрите конференции
Не так давно прошла конференция YaC и мне очень понравилась секция про фронтэнд. Посмотреть и скачать все доклады можно по ссылке https://events.yandex.ru/events/yac/2014/
Особое внимание стоит уделить докладу Елены Джетпыспаевой из компании Яндекс: inFront: на передовой событий в мире фронтенда в котором Елена ссылается на большое количество авторитетных источников информации по front end.
Занимательно, что кроме классических источников вроде Smashing Magazine в докладе в качестве примера источников информации приводятся личные каналы разработчиков на сервисе vimeo. Я сам до такого не догадался.
Ну вот и все. Следите за моими публикациями!