Как нужно верстать

6.07.15 29.07.15 1 3455

Источники информации – различные статьи и блоги + личный опыт Ивана Блинкова.

HTML и CSS должны быть читаемыми (все равно потом все ужимаем):
1. HTML должен быть иерархическим, открывающие теги с новой строки (кроме случаев с), отступы 4 пробела
2. CSS желательно не свернутые в строчку, а по одной директиве на строку, тоже с отступами по 4 пробела
3. Можно сразу использовать SASS – сильно упрощает всем жизнь
4. Идентификаторы классов должны быть человекочитабельмыми английскими словами и фразами
5. Очень желательно не использование в названиях классов и идентификаторов ключевых слов из HTML/CSS/JS/jQuery
6. Очень желательно, чтобы идентификаторы и классы не были префиксными (ни одно названия не является началом или концом другого, например .icon и .icon_small) – это позволяет сократить их все до 1-2 символов на этапе постобработки
DOCTYPE предпочтителен HTML5, но в крайнем случае можно и XHTML
Кодировка: обязательно UTF-8
Валидность:
1. HTML: http://validator.w3.org
2. CSS: http://jigsaw.w3.org/css-validator/
3. WCAG: http://www.cynthiasays.com/ и http://www.w3.org/WAI/WCAG20/quickref/
Соответствие макету:
1. Проверка: https://addons.mozilla.org/ru/firefox/addon/pixel-perfect/, https://github.com/aishek/modulargrid и https://browserlab.adobe.com/en-us/index.html
2. Хоть и попиксельное соответствие приветствуется и считается обязательным, но местами возможны отклонения:
  1. Когда дизайнер нарисовал криво
  2. Когда незначительные различия в отрисовке шрифтов
  3. Когда у дизайнера разошлось вдохновение и единственный способ сделать точно так как на картинке – впихнуть здоровенный JPEG в пару сот килобайт на фон; в таких случаях стараемся разбить фон на составные части и/или паттерны и делаем его частями, стараясь минимизировать ущерб "креативу" при адекватном размере страницы
Кроссбраузерность:
1. Перед приемом/сдачей работы проверить на http://browsershots.org/ (или аналоге) и во всех доступных под рукой браузерах
2. Не забыть мобильные браузеры Opera Mini, iPhone и Android.
3. Хаки для IE в conditional comments, не забываем правильно фильтровать для разных его версий
4. IE6 должен адекватно воспринимать специфичные для HTML5 теги
5. Помимо этого желательно проверить все разрешения от 1024х768 до 1920х1080 – везде все должно смотреться пристойно, без скроллбаров и излишних пустых областей
Гибкость шаблона:
1. При этом не смотря на то, что в макетах для примера используется какой-то текст, шаблон должен нормально себя вести при любом количестве текста (как нулевом, так и очень большом) в любом элементе
2. Если пункт меню, заголовок или просто текст в 5-10 раз длиннее или короче того, что на макете – все должно отображаться корректно (по возможности, естественно)
3. Если в макете не было всех шести видов заголовков, ссылок в тексте, картинок, цитат, аббревиатур, блоков pre и code – это не значит, что стиль по-умолчанию для всех стандартных html-элементов может отсутствовать в CSS – возьмите цвета и стиль от других элементов шаблона и сделайте хоть как-то, для образца все элементы можно добавить в текст, даже если их там не было
4. У всех ссылок должно быть отдельное поведение для :hover, у ссылок внутри текста – и для :visited
5. Если в макете все же были заголовки: их структура должна быть перенесена верно
6. Надеяться, что WYSIWYG или Word проставит какие-то особые стили к тексту и все будет нормально нельзя
7. Если используем HTML5, то верстка должна быть семантической, то есть блоки навигации заворачиваем в nav, сайдбар в aside и.т.п.
8. Стили для печати и мобильной версии указываем отдельными файлами с соответствующим media
CSS:
1. Не забываем о производительности CSS: селекторы обрабатываются справа-налево, подробнее здесь: http://code.google.com/speed/page-speed/docs/rendering.html
2. CSS3 правила для нормальных браузеров (border-radius, gradient, text-shadow, box-shadow), с остальными извращаемся отдельно, никаких хаков с кучей <b> и подобных
3. Размеры и позиционирование элемента должны указываться в одних единицах измерения
Изображения:
1. С умом относимся к выбору формата и уменьшаем их объем (см. "Инструменты для минимизации размера изображений"
2. Иллюстрации и элементы интерфейса с четкими краями лучше сохранять в PNG8, фотографии в progressive JPEG – но в целом руководствуемся минимизацией объема не в ущерб качеству
3. Отсутствие title и alt непростительно
4. По возможности всегда указываем размеры изображений, особенно если они являются частью дизайна и заранее известны
5. Для групп небольших изображений приблизительно одинаковой ширины или высоты (иконки, картинки разных буллетов и.т.п.) используем CSS Sprites: http://css-tricks.com/css-sprites/ (для ленивых есть ряд инструментов для автоматизации процесса)
6. Для совсем маленьких изображений используем data:URI+MHTML: http://www.phpied.com/inline-mhtml-data-uris/
Шрифты:
1. Указываем базовый размер шрифта в em, там где нужен размер больше или меньше – в % от базового
2. Line-height задаем в долях
3. Должно быть как минимум одному шрифту для Windows, Linux и Mac OS. Примеры:
  1. Arial,Helvetica,FreeSans,"Liberation Sans","Nimbus Sans L",sans-serif
  2. "Courier New",Courier,FreeMono,"Nimbus Mono L","Liberation Mono",monospace
  3. Georgia,"Bitstream Charter","Century Schoolbook L","Liberation Serif",Times,serif
  4. "Lucida Sans","Lucida Sans Unicode","Lucida Grande",Lucida,sans-serif
  5. "Lucida Console",Monaco,"DejaVu Sans Mono","Bitstream Vera Sans Mono","Liberation Mono",monospace
  6. Palatino,"Palatino Linotype",Palladio,"URW Palladio L","Book Antiqua","Liberation Serif",Times,serif
  7. Tahoma,Geneva,"DejaVu Sans Condensed",sans-serif
  8. "Times New Roman",Times,"Nimbus Roman No9 L","FreeSerif","Liberation Serif",serif
  9. Verdana,"Bitstream Vera Sans","DejaVu Sans","Liberation Sans",Geneva,sans-serif
4. Если требуется нестандартный шрифт, используем кроссбраузерный font-face: http://randsco.com/index.php/2009/07/04/p680
Формы:
1. Ко всем полям должен быть label или, если так задумано, toggleval
2. Если используем HTML5, то и поля форм тоже делаем по этому стандарту (email/tel)
3. Проверить работу tabindex
Использование микроформатов желательно, если они уместны (hCard, hCalendar, hAtom, XFN)
JavaScript:
1. Весь используемый JS располагается перед закрывающим </body>
2. Желательно использование асинхронной загрузки файлов
3. Работоспособность проверяем средствами Firebug
4. Сайт должен нормально функционировать с выключенным JavaScript (и Flash тоже, к слову)
5. Если на странице имеются формы – они должны валидироваться еще до отправки и нормально отображать ошибки (как минимум просто цветом)
Остальное:
1. Полное отсутствие комментариев в html, кроме условных
2. Копирайт пишем правильно: http://habrahabr.ru/blogs/typography/23812/
3. Никакого CSS или JS внутри HTML, только внешние файлы
4. Ссылки на внешние ресурсы должны быть с target="_blank" и по необходимости могут снабжаться иконками: https://github.com/joshuaclayton/blueprint-css/blob/master/blueprint/plugins/link-icons/screen.css
5. Текст лучше оттипографить перед публикацией: http://rmcreative.ru/blog/post/tipograf
6. Логотип должен вести на главную страницу
7. Ссылки на внешние ресурсы (изображения, CSS, JS) лучше делать относительными
8. Не забываем <title> всей страницы, должен быть понятен как человеку, так и поисковым системам
9. HTML, JS и CSS лучше минимизировать не на этапе верстки, а автоматически при генерации шаблонов
10. Не забыть выкинуть не используемые стили (вроде красной рамочки для выделения элементов в процессе верстки)