Html5checklist

HTML/CSS markup checklist

Generate Convert Improve

Install / Use

/learn @ihorzenich/Html5checklist

About this skill

Quality Score

0/100

README

Чеклист верстки

Для того чтобы отдавать вёрстку клиенту, достаточно соблюдения первых 5 пунктов. Для выдачи в продакшен — первых 6.

Подробности по каждому пункту: http://habrahabr.ru/post/114256/

Соответствие макету
Кроссбраузерность, кодировка и DOCTYPE
Валидность (включая CSSLint и JSHint), доступность (ARIA, WCAG), микроформаты (microformats 1 & 2, microdata)
Независимость блоков в CSS: минимизация каскада, использование техник БЭМ
Сайт должен нормально смотреться во всех стандартных разрешениях от 320 и выше, не иметь горизонтального скролла и вписываться в экран мобильных устройств
Корректная работа при вбивании реального текста, надёжность вёрстки
CSS должен быть написан с использованием препроцессоров (LESS/Sass/Stylus). Желательно использование систем сборки (Grunt/Gulp) и построцессоров (PostCSS/Autoprefixer).
Проверка и оптимизация скорости загрузки: https://github.com/ihorzenich/WebPerformanceChecklist
Поддержка Retina
Наличие Win/Mac/Linux-аналогов шрифтов
Доступность при выключенных(загружающихся) картинках
HTML5 формы, линковка, валидация
Семантичность. Отсутствие глупостей в html и css, единообразие, аккуратность (смотри "Плохо/хорошо")
Правильная структура заголовков (H1,H2,… и т.д. и TITLE)
Работоспособность при выключенном (незагруженном) JavaScript
Работоспособность при выключенном Flash
Отсутствие багов при увеличенном шрифте

<h2>13. "Плохо"/"Хорошо"</h2> Важно понимать что семантика — может быть не только в используемых элементах, но и в именах классов. И БЭМ-иерархия классов — это новый уровень семантики.

Плохо:

<ul><li>Самое страшное, к счастью уже редкое — <code>float: left</code> для всех блоков. Безумный верстальщик эмулирует привычные ячейки таблиц, расставляя блоки как кирпичи друг за другом. Вон из профеcсии! Проверяется в extension для браузеров Web Developer → Outline → Outline Floated Elements, если всё в красных блоках, вёрстку нужно выкидывать на помойку. Так же, такая верстка получается при создании сайтов на Adobe Muse. Примеры: <a href="http://www.cardiganium.ru/" target="_blank">один</a> - <a href="http://www.zebraproject.ru/" target="_blank">два</a> - <a href="http://www.jurist-kavykina.ru/" target="_blank">три</a> </li> <li>Отступы между блоками на сайте должны быть за счёт margin у блоков, а не выпирающих наружу margin у содержимого блоков.</li> <li>Плохо — отсутствие тайтлов.</li> <li>Плохо — отсутствие alt у картинок.</li> <li>Плохо — хаки для браузеров внутри main.css (как без фильтров, так и с ними). Без фильтров — это когда когда просто пишем <code>{zoom: 1;}</code> — это оч. плохо, т.к. будет применяться ко всем IE, а не только к тому, в котором проблема. С фильтрами — когда пишут <code>(* html, *+html и т.д.)</code> — плохо, потому что это засоряет код, делает его менее читабельным, а какие-то хаки могут быть и вообще невалидными и нарушать прогон CSSLint. Conditional Comments — тоже плохо, хотя раньше считалось хорошей техникой, плохо т.к. это увеличение кол-ва css-файлов и главное — это разнесение кода в разные места. Сейчас рекомендуется использовать специальные классы типа <code>html.ie7, html.ie8,…</code> (из HTML5 Boilerplate), Modernizer-детектирование фич (классы вида <code>html.js.flexbox.canvas.no-touch…</code>) и JS-детектирование браузера и платфорым (например CSS Browser Selector генерирующий классы вида <code>html.webkit.chrome.chrome25.win.win8…</code>)</li> <li>Плохо — не проверять tabindex в формах.</li> <li>Плохо — писать стили не думая о логике размещения элементов. Например, если элемент всегда находится сверху, у него должен быть большой z-index, нельзя надеяться на то что сейчас всё нормально смотрится — стили должны быть железобетонными. Если элемент всегда должен находится на каком-то месте, в независимости от окружающих его элементов — это position: absolute; а не float и т.д. Блоки независящие друг от друга не должны быть внутри одного блока (например телефон компании и поиск по сайту). Блоки независящие по расположению друг от друга должны быть position absolute, а не float’ится.</li> <li>Очень плохо — презентационные классы (right, red).</li> <li>Нежелательно когда вёрстка содержит пустые блоки для презентационных целей, для этого существуют псевдоэлементы</li> <li>Плохо когда нет базовых стилей у стандартных элементов. Т.е. просто h1,h2,ul,table,etc без классов должны смотреться красиво и органично. Проще говоря — используйте Normalize, a не Reset CSS.</li> <li>Плохо когда нет постепенного уточнения стилей для текста, когда стиль выписывается для каждого элемента отдельно, а за его пределами — внешний вид может быть кардинально другой. Речь о ситуации когда например текст, написанный без абзацев, имеет вообще не тот стиль что у всех элементов в блоке. Надо вести стили снизу вверх, постепенно уточняя их. Тут важно не путать стили для текста и стили для блоков. Для текста — каскад это добро, для блоков сайта — нужно использовать БЭМ.</li> <li>Ещё хуже — чересчур детализированные глобальные стили. Например <code>a {font: italic 10px Tahoma;}</code> /* Ненависть! Ненависть! НЕНАВИСТЬ!!11 */ Потом приходится переопределять стиль ссылок для каждого блока.</li> <li>Размеры и позиционирование элемента должны указываться в одних единицах измерения. Т.е. высота/ширина блока в px и margin/padding в em — это странно и скорей всего ошибка. Line-height — лучше задавать коэффициентом (1/1.2/1.4... т.е. без указания единицы измерения — это цифра на которую умножается font-size и получится межстрочный интервал). Если задали font-size/height в em — значит задаём и margin/padding тоже в em. Классический пример: список dl-dt-dd, где dt и dd ставятся друг на против друга с помощью подтягивания dd отрицательным margin вверх. Или — выделили padding’ом место под position: absolute какого-то текстового блока. У текстовых элементов (абзацей, ячеек таблиц) задаём padding и height в em (чтоб корректно увеличивать размер шрифта) .</li> <li><s>Плохо</s>(недопустимо!) вешать стили на селекторы вложенных стандартных тэгов, без классов. Т.е. допустим пишем что-то типа <code>h2 a span {какая-то крепкая штука, типа картинки с графикой, что закрывает текст в заголовке}</code>, а потом клиент в визиге внезапно вбивает такое сочетание! И получаем невероятный баг. На просто одиночные теги для вывода текста из БД — можно, но используя блок .b-text (смотри BEM CSS).</li> <li>Плохо — напрямую задавать визуальное отображение элементов через js: <code>$('.element').css(color,"#f00")</code>. Это должно делаться через установку/смену классов.</li></ul>

Хорошо:

<ul><li><a href="http://getbem.com/">БЭМ</a>! Важно понимать что это методология, а не инструменты. Для обычных сайтов достаточно вёрстки по <a href="http://delka.github.io/talks/webcamp/2015/bem/">BEM CSS</a>, без использования библиотеки блоков и bem-tools. <a href="http://delka.name/blog/2013/04/bem-otkroveniya-prinyavshih-veru/">Я долго считал что «BEM — это классная идея, но это чересчур, так категорично не надо, надо чуть по-другому, под себя...»</a>, так вот — это неверно! Нужно обязательно уходить от каскада, а БЭМ — это один из отличных вариантов решения.</li> <li>Хорошо — структурировать код в блоки описывающие логику документа. Т.е. создавать div даже там, где он для презентационных целей не нужен. И наоборот — стараться не ставить лишний div там, где структура этого не требует, а это нужно лишь для визуальных эффектов.</li> <li><a href="http://html5boilerplate.com">HTML5 Boilerplate</a> — замечательный стартовый шаблон от «отцов». Используйте и присоединяйтесь к разработке, добавляйте свои велосипеды туда! Раньше у нас был свой самописный framework-стартовый html, теперь используем Boilerplate как основу, а в него уже добавляем старые наработки.</li> <li>Используйте наработанные решения, чужие модули, jQuery-плагины, не изобретайте велосипедов, а если изобретаете — поддерживайте их, ведите библиотеку кода (после каждого нового проекта добавляйте туда код, обновляйте старый).</li> <li>Для текстовых блоков, что редактируются в админке, должна обеспечиваться атомарность текстовых стилей. Т.е. есть у нас страничка с каким-то текстовым блоком, примерно такой структуры: ```css .content-text h1 .content-text .entry .content-text .entry .somenamedblock ``` То .somenamedblock должен получать текстовые стили непосредственно — <code>.somenamedblock {font: …; color: …;}</code>, т.к. иначе в визиге админки мы не сможем их застайлить.</li> <li>одинаковый html-код для блоков на морде и внутряках, с идентичным контентом, но разным визуальным представлением данных. Реализуется через модификаторы блоков

Related Skills

node-connect

347.6k

Diagnose OpenClaw node connection and pairing failures for Android, iOS, and macOS companion apps

frontend-design

108.4k

Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, or applications. Generates creative, polished code that avoids generic AI aesthetics.

openai-whisper-api

347.6k

Transcribe audio via OpenAI Audio Transcriptions API (Whisper).

qqbot-media

347.6k

QQBot 富媒体收发能力。使用 <qqmedia> 标签，系统根据文件扩展名自动识别类型（图片/语音/视频/文件）。