Permalink
Browse files

Fix formatting

  • Loading branch information...
ihorzenich committed Dec 5, 2017
1 parent ddcf410 commit 74de624924f2e8cc4b890723c70dd6889051c6e5
Showing with 5 additions and 6 deletions.
  1. +5 −6 README.md
@@ -1,4 +1,4 @@
#Чеклист верстки
# Чеклист верстки

Для того чтобы отдавать вёрстку клиенту, достаточно соблюдения первых 5 пунктов.
Для выдачи в продакшен — первых 6.
@@ -17,21 +17,20 @@
10. Наличие Win/Mac/Linux-аналогов шрифтов
11. Доступность при выключенных(загружающихся) картинках
12. HTML5 формы, линковка, валидация
13. Семантичность. Отсутствие глупостей в html и css, единообразие, аккуратность
13. Семантичность. Отсутствие глупостей в html и css, единообразие, аккуратность (смотри "Плохо/хорошо")
14. Правильная структура заголовков (H1,H2,… и т.д. и TITLE)
15. Работоспособность при выключенном (незагруженном) JavaScript
16. Работоспособность при выключенном Flash
17. Отсутствие багов при увеличенном шрифте

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

<b>Плохо:</b>
<ul><li><strong>Самое страшное, к&nbsp;счастью уже редкое&nbsp;&mdash; <code>float: left</code> для всех блоков.</strong> Безумный верстальщик эмулирует привычные ячейки таблиц, расставляя блоки как кирпичи друг за&nbsp;другом. Вон из&nbsp;профеcсии!<br/>
Проверяется в extension для браузеров <strong>Web Developer</strong> &rarr; Outline &rarr; Outline Floated Elements, если всё в&nbsp;красных блоках, вёрстку нужно выкидывать на&nbsp;помойку. <br/>
Так же, такая верстка получается при создании сайтов на <strong>Adobe Muse</strong>. <br/>
<strong>Пимеры</strong> <br/>
<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>
<strong>Примеры</strong>: <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>Отступы между блоками на&nbsp;сайте должны быть за&nbsp;счёт margin у&nbsp;блоков, а&nbsp;не&nbsp;выпирающих наружу margin у&nbsp;содержимого блоков.</li>
<li>Плохо&nbsp;&mdash; отсутствие тайтлов.</li>
@@ -64,7 +63,7 @@
То .somenamedblock должен получать текстовые стили непосредственно&nbsp;&mdash; <code>.somenamedblock {font: …; color: …;}</code>, т.к. иначе в&nbsp;визиге админки мы&nbsp;не&nbsp;сможем их&nbsp;застайлить.</li>
<li>одинаковый html-код для блоков на&nbsp;морде и&nbsp;внутряках, с&nbsp;идентичным контентом, но&nbsp;разным визуальным представлением данных. Реализуется через модификаторы блоков и элементов, но не через модификацию от родителя (каскад от body.pagename например!)</li></ul>
<h2>18. Важные мелочи</h2>
<h2>Важные мелочи</h2>
<ul><li>Лого на&nbsp;внутряках должно вести на&nbsp;титулку. На&nbsp;титулке logo = h1, на&nbsp;внутряках H1=заголовок контента, а&nbsp;Logo=div</li>
<li>У&nbsp;каждой страницы должен быть свой уникальный TITLE формата <code>About Us&nbsp;&mdash; %CompanyName%</code></li>

0 comments on commit 74de624

Please sign in to comment.