Читать нас в Telegram

Ревью верстки: 10 полезных замечаний и советов

Рубрика: Статьи
16 августа 2016 19:09
21841
1

Статья рассчитана на новичков в верстке, но не исключено, что и опытный верстальщик узнает себя в каком-то из пунктов. Примеры ниже написаны с использованием соглашения по именованию селекторов БЭМ, препроцессора Sass и шаблонизатора Jade.


Code-review для верстки часто пренебрегают, отчасти, возможно, из-за сложившегося стереотипа, что верстать нужно, набрав побольше воздуха, зажмурившись и раскидываясь хаками и костылями, пока не будет достигнута та самая неуловимая кроссбраузерность. А поддерживать чужую верстку — только человеку с крепкими нервами и достаточным запасом медикаментов.

Мы пообщались с разработчиками в Noveo и сошлись во мнении, что важно не только тестирование, но и ревью. Особенно важно ревьюить стажеров и новичков, чтобы скорректировать недочеты и не дать сформироваться вредным привычкам. Так, в какой-то момент у наших коллег накопилась небольшая статистика по замечаниям и советам, а как следствие появилась эта статья. Ниже в статье описаны 10 типичных ошибок верстальщиков-новичков и советы по их устранению.

Ошибка 1: Не продумана структура проектной папки

Довольно часто верстальщикам ставят задачи постранично и макеты предоставляют тоже постранично. Это иногда порождает иллюзии, что работы мало и вся верстка будет прекрасно себя чувствовать в 2–3 папках, а если нет, то всегда найдется время поправить структуру. Но чем больше блоков и страниц сверстано, чем ближе к релизу и чем больше страниц / компонентов уже интегрировано, тем сложнее что-то изменить.

Предлагаю с первого же коммита поддерживать прозрачную структуру. Вот пример структуры проектной папки, которую мы использовали на зимней стажировке 2016:

Идёт загрузка… Если ничего так и не загрузилось, то посмотрите пример здесь.

Совсем необязательно в точности копировать эту структуру, достаточно обратить внимание на ряд моментов:

1. Вспомогательные документы, блоки и страницы живут отдельно

В Jade базовый шаблон, блок карусели и страница должны находится в отдельных директориях. Так их будет проще найти. Кроме того, сборщику проекта для компиляции следует «скармливать» только папку со страницами, чтобы не засорять проектную папку ненужными HTML документами для компонент.

В scss общие стили типа reset, или подключения шрифтов, или лейаута верхнего уровня стоит также хранить отдельно от стилей для страниц и блоков. Также целесообразно импортировать все в один документ (например, main.scss) и только этот документ компилировать в css. По объективным причинам таких документов может быть несколько (например, из-за ограничения по количеству селекторов / весу css-документа в IE9 или для поставки специфических стилей для редко встречающихся устройств отдельно от основного документа), но, как и с Jade, не стоит компилировать все подряд.

2. Jade-блоки = БЭМ-блоки

Если у вас небольшой опыт работы с шаблонизаторами, это дробление может слегка напугать, но на самом деле работать с большим количеством документов для компонентов гораздо удобнее, чем в одном документе с тремя тысячами строк. Ничто не мешает объединять компоненты в директории, если проект большой. Так компоненты легко переиспользовать и «инклюдить» на разные страницы, а для компонентов с разными состояниями и/или разным контентом (например, для кнопок) можно написать миксин, который может в качестве входных параметров принимать контент, модификатор или значение атрибута.

В итоге в коде index.jade и других страниц должна быть строчка, указывающая на базовый шаблон, возможно, 1–2 тега верхнего уровня, инклюды и вызов миксинов.

Например:

extends ../0_base/_base.jade

block main
    .main.main--wide
        include ../1_blocks/banner.jade

3. Scss зеркалит Jade

Если в Jade-директории blocks есть какой-то документ, то стили для него должны находиться в Scss-директории blocks в документе с таким же названием.

Например, согласно структуре, указанной выше, стили для jade/1_blocks/header.jade должны лежать в scss/3_blocks/header.scss, а не где-то еще. Если следовать этому простому правилу, то вносить изменения будет удобно всем разработчикам на проекте, даже новым.

Для тех, кому необходимо запушить структуру проектной папки сразу после создания (т.е. когда большая часть папок пуста), напоминаю про существование .gitkeep, документа, который позволит гиту «затрекать» вашу пустую директорию.

Добавить .gitkeep во все пустые папки можно с помощью этой команды:

find . -type d -empty -not -path '*/\.*' -exec touch {}/.gitkeep \;

После заполнения папок не забудьте удалить ненужные .gitkeep.

Ошибка 2: копипаста есть, комментариев нет

С копипастой нужно быть особенно аккуратным: вдумчиво все перечитать, исправить «под проект» и удалить лишнее. Однажды мне встретилось:

, при этом обычный </code> содержал совершенно другую строку :).</p><p>Не важно, делаете вы редизайн или используете решение из интернета, пока копипаста не будет переработана, рядом с ней должен быть комментарий с <code>TODO</code>, чтобы:</p><ul><li>не забыть и не утащить этот кусок в продакшн,</li><li>дать понять другим разработчикам, что это не окончательное решение,</li><li>дать понять ревьюеру, что этот код будет изменен.</li></ul><p>Например:</p><pre class=line-numbers><code class=language-clike> <meta name=apple-mobile-web-app-title content="AMC Walking Dead"> </code></pre><p>Начинающие верстальщики иногда пренебрегают тем, чтобы потратить несколько минут и переработать найденное решение. Так в scss появляются вендорные префиксы, когда в сборку включен автопрефиксер, мусорные свойства и даже переопределения в рамках одного правила:</p><pre class=line-numbers><code class=language-clike>.block { font-size: 1.2 rem; … font-size: 18px; }</code></pre><p>Про смешивание пробелов и табов, одинарных и двойных кавычек можно даже не говорить – бездумная копипаста рано или поздно принесет эти прелести в проект (кстати, чтобы поддерживать единый стиль, можно воспользоваться <a href=http://editorconfig.org/ data-wpel-link=external target=_blank rel="nofollow noopener noreferrer">EditorConfig</a>).</p><p>У авторов статей есть такой прием — вычитка, когда написанный текст перечитывают несколько раз, чтобы исправить пропущенные ошибки и перефразировать предложения, которые плохо звучат. Рекомендую активно проводить вычитку своего кода и особенно копипасты. Еще в борьбе с копипастой в стилях может очень пригодиться <a href=http://csscomb.com/ data-wpel-link=external target=_blank rel="nofollow noopener noreferrer">csscomb</a>.</p><h3>Ошибка 3: блоки влияют друг на друга, одни и те же селекторы встречаются в нескольких местах в scss</h3><p>Великая сила амперсанда в Sass позволяет писать стили по БЭМ и делать это еще нагляднее. Такой код:</p><pre class=line-numbers><code class=language-clike>.block {   font-size: 1.2rem;   &--dark {     background: #000;   }   &__element {     text-aling: center;     &--big {        width: 100%;     }     .ie9 & {       &::before {         content: 'hello ie'       }     }   } }</code></pre><p>Будет скомпилирован в:</p><pre class=line-numbers><code class=language-clike>.block {   font-size: 1.2rem; } .block--dark {   background: #000; } .block__element {   text-aling: center; } .block__element--big {   width: 100%; } .ie9 .block__element::before {   content: "hello ie"; }</code></pre><p>Когда есть такой удобный инструмент, даже речи быть не может о повторе и переопределении стилей для одного блока. Если селектор <code>.block</code> уже написан в каком-то документе, то в другом документе его быть не должно. Встретиться снова этот селектор может только в медиазапросе (причем, за редким исключением, медиазапрос должен находиться в этом же документе), подробнее о медизапросах поговорим чуть позже.</p><p>Блок — это отдельный компонент, который не знает о других блоках и их расположении.</p><p>«Блок — логически и функционально независимый компонент страницы, аналог компонента в Web Components… Независимость блоков обеспечивает возможность их повторного использования, а также удобство в разработке и поддержке проекта.» (<a href=https://ru.bem.info/methodology/key-concepts/#%D0%91%D0%BB%D0%BE%D0%BA data-wpel-link=external target=_blank rel="nofollow noopener noreferrer">источник</a>)</p><p>Такой код будет <b>ошибочным</b>, т.к. состояние одного блока влияет на элемент в другом блоке:</p><pre class=line-numbers><code class=language-clike>.block {   &:hover .another-block__element {     color: red;   } }</code></pre><p>Если возникает необходимость так написать, значит, что-то пошло не так на этапе именования, нужно незамедлительно вернуться к Jade и исправить атрибуты <code>class</code> так, чтобы каждый блок был независимым. Если же заплатка нужна срочно и времени на изменения разметки нет, то оставьте комментарии <code>TODO</code> в обоих документах: в scss и в jade.</p><p>Говоря о том, что блок не знает о других блоках, хочется вкратце упомянуть об одном полезном псевдоклассе, о котором постоянно забывают новички. Представьте лейаут верхнего уровня: есть блок с основным контентом и блок aside. Для двух этих блоков указана ширина в %, но на одной странице aside нет и ширина блока с основным контентом должна быть 100%. Тут нам на помощь придет псевдокласс <code>only-child</code>:</p><p class=codepen>Идёт загрузка… Если ничего так и не загрузилось, то посмотрите пример <a href=http://codepen.io/JustForTestingThings/pen/ZOvaGG/ target=_blank data-wpel-link=external rel="nofollow noopener noreferrer">здесь</a>.</p><p>В случаях, когда <code>only-child</code> не подходит, используйте модификаторы.</p><h3>Ошибка 4: не использовать миксины, когда можно использовать миксины</h3><p>Миксины очень помогают следовать принципу <i>DRY (Don’t Repeat Yourself)</i>, их активно используют в scss для таких абстрактных задач, как сетка, но о них почему-то забывают, когда речь заходит о верстке компонент. Например, у вас есть кнопки разных цветов, у которых на ховере происходит инверсия цвета. Для инверсии можно написать миксин и сделать стили чуточку чище:</p><p class=codepen>Идёт загрузка… Если ничего так и не загрузилось, то посмотрите пример <a href=http://codepen.io/JustForTestingThings/pen/YWYYOK/ target=_blank data-wpel-link=external rel="nofollow noopener noreferrer">здесь</a>.</p><p>Также советую обратить внимание на <a href=http://thesassway.com/intermediate/understanding-placeholder-selectors data-wpel-link=external target=_blank rel="nofollow noopener noreferrer">плейсхолдеры</a>, которые, к сожалению, мне пока не встречались в верстке новичков.</p><p>В Jade тоже следует активнее использовать миксины. Например, для svg-спрайтов:</p><p class=codepen>Идёт загрузка… Если ничего так и не загрузилось, то посмотрите пример <a href=http://codepen.io/JustForTestingThings/pen/YWYYOK/ target=_blank data-wpel-link=external rel="nofollow noopener noreferrer">здесь</a>.</p><h3>Ошибка 5: беспорядок в медиазапросах</h3><p>Частая ошибка — смешивать <i>mobile-first</i> и <i>desktop-first</i> подходы. Сейчас, когда IE8 перестал фигурировать в спеках, можно смело переходить на mobile-first. Если макеты готовы только для десктопа, попробуйте повлиять на дизайнера, ссылаясь, например, на <a href=http://www.lukew.com/resources/mobile_first.asp data-wpel-link=external target=_blank rel="nofollow noopener noreferrer">эту книгу</a>. В любом случае, будете вы использовать <code>min-width</code> или <code>max-width</code>,  используйте что-то одно. Иначе в какой-то момент станет тяжело отслеживать логику изменения стилей, а значит, проблематично поддерживать верстку.</p><p>Кроме того, не стоит писать медиазапросы по хардкоду, используйте как минимум переменные для брейкпоинтов. Т.е. вместо:</p><pre class=line-numbers><code class=language-clike>@media (min-width: 1024px)</code></pre><p>должно получиться:</p><pre class=line-numbers><code class=language-clike>$laptop-landscape: 1024px; @media (min-width: $laptop-landscape)</code></pre><p>Переменные для брейкпоинтов стоит хранить в отдельном документе или в layout.scss. Можно пойти дальше, прочитать <a href=https://css-tricks.com/approaches-media-queries-sass/ data-wpel-link=external target=_blank rel="nofollow noopener noreferrer">эту статью</a> и выбрать один из предложенных подходов (или написать свой).</p><p>В scss есть возможность вкладывать медиазапросы в правила. Например:</p><pre class=line-numbers><code class=language-clike>.block { width: 100%;   @media screen and (min-width: 768px) { width: 60%;   } }</code></pre><p>Это будет скомпилировано в:</p><pre class=line-numbers><code class=language-clike>.block {   width: 100%; } @media screen and (min-width: 768px) {   .block {     width: 60%; } }</code></pre><p>Так писать медиазапросы довольно удобно, тогда один селектор будет встречаться строго в одном месте в стилях. В таком случае обязательно использовать переменные для основных брейкпоинтов. Должно быть так, чтобы по названиям переменных можно было легко определять, какой брейкпоинт соответствует устройству (по спецификации и макетам  проекта), а какой был написан специально под контент.</p><p>Большое количество медиазапросов <a href=https://helloanselm.com/2014/web-performance-one-or-thousand-media-queries/ data-wpel-link=external target=_blank rel="nofollow noopener noreferrer">не сказывается</a> ощутимо на производительности, но, разумеется, сказывается на весе css документа. Если у вас большой проект со сложной организацией контента, медиазапросов много, то, возможно, стоит задуматься об их <a href=https://www.npmjs.com/package/gulp-combine-mq data-wpel-link=external target=_blank rel="nofollow noopener noreferrer">комбинации</a>.</p><h3>Ошибка 6: не интересоваться UX-проектированием</h3><p>Не часто встретишь UX-проектировщика и верстальщика в одном лице. Но верстальщикам время от времени приходится принимать решения, которые могут повлиять на взаимодействие: сделать его удобным или отвратительным, в зависимости от того, как будет сверстан компонент. Не важно, верстаете ли вы под мобильные без макета или просто добавляете кнопку, о которой забыли на этапе проектирования, вам нужно как минимум знать основы.</p><p>Для начала предлагаю обратить внимание на типичную ошибку новичка: ссылки и кнопки маленького размера, между ними мало пространства. Это ок, если взаимодействие происходит мышкой, но совершенно не годится, когда речь идет о тач-устройствах. Многократные попытки попасть по ссылке, которые в результате приводят к попаданию по соседней ссылке, очень быстро выводят пользователей из себя. Наверняка каждый из нас бывал в такой ситуации, и первое, что хочется сделать, — покинуть неудобный сайт. Чтобы такого не происходило с вашими пользователями, советую почитать гайдлайны от <a href="https://material.google.com/layout/metrics-keylines.html?authuser=3#" data-wpel-link=external target=_blank rel="nofollow noopener noreferrer">Google</a> или <a href=https://www.smashingmagazine.com/2012/02/finger-friendly-design-ideal-mobile-touchscreen-target-sizes/ data-wpel-link=external target=_blank rel="nofollow noopener noreferrer">SmashingMagazine</a>.</p><h3>Ошибка 7: все в пикселях, даже font-size</h3><p>Советую сделать (если вы еще нее сделали) переход с px на em и rem для таких значений, как:</p><ul><li>размер шрифта и высота строки,</li><li>размеры иконок,</li><li>размеры кнопок,</li><li>вертикальный ритм.</li></ul><p>В рамках БЭМ для <b>блока</b>: rem для размера шрифта блока, em — для остальных величин блока. Для <b>элемента</b> есть 2 стратегии:</p><ol><li>em для размера шрифта, если структура html уже утвердилась и вряд ли добавится / убавится еще один уровень вложенности,</li><li>rem — если в рамках блока вероятны изменения (перемещение элементов, добавление или удаление оберток и т.п.).</li></ol><p>Чтобы понять <a href="https://www.youtube.com/watch?v=qrduUUdxBSY" data-wpel-link=external target=_blank rel="nofollow noopener noreferrer">разницу между единицами изменения</a> или <a href="https://www.youtube.com/watch?v=UHf3aQz50jQ" data-wpel-link=external target=_blank rel="nofollow noopener noreferrer">выбрать между em и rem</a>, предлагаю обратить внимание на канал DevTips, на котором в весьма непринужденной форме объясняются основы верстки.</p><p>Также с псевдоэлементами и em стоит быть осторожней:</p><p>«Если в IE9+для одного и того же псевдоэлемента задать размер шрифта через разные селекторы, то он просто перемножит все размеры шрифтов.» (<a href=http://alexdev.ru/1751/ data-wpel-link=external target=_blank rel="nofollow noopener noreferrer">источник</a>)</p><h3>Ошибка 8: не думать о переполнении и предельных значениях</h3><p>Верстая по макету, мы имеем дело с идеальной ситуацией. Так новички довольно часто забывают про угрозу переполнения, т.е. когда контент не помещается в блок или элемент и выходит за его пределы. Эту ситуацию нужно срочно исправлять, ведь верстальщик — это еще и своего рода переводчик интерфейса с языка дизайнерского на язык, понятный программистам. Поэтому очень важно в процессе верстки выявить предельные значения объема текста для кнопок, заголовков и прочих элементов с ограниченной вместимостью. Об этих предельных значениях стоит сообщить разработчикам (как минимум написать комментарий в HTML) и по возможности ограничить переполнение в css:</p><p class=codepen>Идёт загрузка… Если ничего так и не загрузилось, то посмотрите пример <a href=http://codepen.io/JustForTestingThings/pen/KrQrqj/ target=_blank data-wpel-link=external rel="nofollow noopener noreferrer">здесь</a>.</p><p>То же касается и изображений. Совсем не факт, что изображения будут загружаться в правильных пропорциях или что они будут обрезаться программно в процессе загрузки. Если гарантии сохранения пропорций нет, то лучше сразу в верстке сделать обертку и применить одну из двух техник: вписывание или растягивание по ширине.</p><p class=codepen>Идёт загрузка… Если ничего так и не загрузилось, то посмотрите пример <a href=http://codepen.io/JustForTestingThings/pen/zBRBPB/ target=_blank data-wpel-link=external rel="nofollow noopener noreferrer">здесь</a>.</p><p>Можно также с надеждой смотреть в сторону <a href=https://css-tricks.com/almanac/properties/o/object-fit/ data-wpel-link=external target=_blank rel="nofollow noopener noreferrer">object-fit</a>, однако у этого свойства пока <a href="http://caniuse.com/#search=object-fit" data-wpel-link=external target=_blank rel="nofollow noopener noreferrer">довольно слабая поддержка</a>.</p><h3>Ошибка 9: уделять недостаточно внимания графике</h3><p>Графику обычно делят на 3 части: иконки, изображения контента, фоновые изображения. С фоновыми изображениями у новичков обычно проблем не возникает,  а вот с иконками и контентными изображениями все не так хорошо.</p><p>Сегодня стоит предпочесть <a href=https://css-tricks.com/svg-sprites-use-better-icon-fonts/ data-wpel-link=external target=_blank rel="nofollow noopener noreferrer">svg-спрайты</a> иконочным шрифтам, если нет требований к поддержке совсем старых версий IE. Подробное сравнение двух подходов можно прочитать <a href=https://css-tricks.com/icon-fonts-vs-svg/ data-wpel-link=external target=_blank rel="nofollow noopener noreferrer">тут</a> и <a href=https://www.sitepoint.com/icon-fonts-vs-svg-debate/ data-wpel-link=external target=_blank rel="nofollow noopener noreferrer">тут</a>. SVG-спрайт тоже можно кешировать, т.е. можно ссылаться на внешний файл, если набор иконок большой и повторяется от страницы к странице. Для кешируемых спрайтов есть <a href=https://github.com/jonathantneal/svg4everybody data-wpel-link=external target=_blank rel="nofollow noopener noreferrer">полифил</a>, добавляющий поддержку в IE. А в одностраничных приложениях спрайт обычно добавляется в базовый шаблон.</p><p>Контентные изображения, например, фото товара, — главная причина большого веса сайтов. На десктопах (особенно на экранах с большой плотностью пикселя) нам нужны изображения в большом разрешении. Их вес обычно не вызывает проблем, т.к. в основном десктопы используют высокоскоростные подключения с неограниченным трафиком. Пользователи мобильных устройств же вынуждены выкачивать лишние мегабайты изображений. А если у них низкая скорость передачи данных, бывают обрывы? Получаем не очень довольных пользователей. Остается только надеяться, что они не в роуминге. Эту ситуацию легко исправить с помощью атрибута <a href=https://webkit.org/demos/srcset/ data-wpel-link=external target=_blank rel="nofollow noopener noreferrer">scrset</a> у <a href=https://developer.mozilla.org/ru/docs/Web/HTML/Element/img data-wpel-link=external target=_blank rel="nofollow noopener noreferrer"><img></a> или с помощью тега <a href=https://developer.mozilla.org/ru/docs/Web/HTML/Element/picture data-wpel-link=external target=_blank rel="nofollow noopener noreferrer"><picture></a>. Постепенно <a href="http://caniuse.com/#feat=srcset" data-wpel-link=external target=_blank rel="nofollow noopener noreferrer">поддержка</a> этих возможностей становится лучше, а для старых браузеров есть <a href=https://github.com/scottjehl/picturefill data-wpel-link=external target=_blank rel="nofollow noopener noreferrer">полифил</a>. Для подробного ознакомления с техникой поставки разных контентных изображений для разных устройств советую бесплатный курс <a href=https://www.udacity.com/course/responsive-images--ud882 data-wpel-link=external target=_blank rel="nofollow noopener noreferrer">«Responsive images»</a> от Udacity.</p><h3>Ошибка 10: Pixel Perfect? Не, не слышал.</h3><p>Не зря этот пункт последний в этой статье — о Pixel Perfect часто забывают (кстати, не только новички). С одной стороны, верстальщик почти всегда действует, опираясь на макет, с другой — немножко от этого макета отступает. В процессе работы над проектом какие-то компоненты могут меняться местами, от каких-то отказываются, появляются новые и т.п. Размеры элементов могут немного меняться в зависимости от контента (смотри переполнение и предельные значения). В конце концов, дизайнер может допустить ошибку при выравнивании элементов по сетке. Все это – адекватные причины, чтобы локально отказаться от pixel perfect и верстать «по ситуации». В идеале каждое отступление от макета должно быть задокументировано.</p><p>В случаях, когда нет причин отклоняться от макета, стоит четко ему следовать (помочь в этом может, например, <a href=https://chrome.google.com/webstore/detail/perfectpixel-by-welldonec/dkaagdgjmgdmbnecmcefdhjekcoceebi data-wpel-link=external target=_blank rel="nofollow noopener noreferrer">расширение для Chrome — Pixel Perfect</a>).</p><p>В заключение хотелось бы призвать верстальщиков активнее участвовать в code-review, ведь это повод не только улучшить качество кода начинающего верстальщика, но и систематизировать знания уже опытных коллег, ревьюеров.</p><hr><p><em>За материал выражаем благодарность <a href=http://noveogroup.ru/ target=_blank rel="noopener noreferrer nofollow" data-wpel-link=external>международной IT-компании Noveo</a>.</em></p><div id=article-end-beacon></div><p class=signature><meta itemprop=author content="Типичный программист"></p><div class=amp-tags> <span>Темы: </span> <span class="amp-tag amp-tag-54"><a href=https://tproger.ru/tag/web/ title=Веб-разработка>Веб-разработка</a></span>, <span class="amp-tag amp-tag-301"><a href=https://tproger.ru/tag/interface-design-ux/ title="Дизайн интерфейсов и UX">Дизайн интерфейсов и UX</a></span>, <span class="amp-tag amp-tag-40"><a href=https://tproger.ru/tag/for-beginners/ title="Для начинающих">Для начинающих</a></span>, <span class="amp-tag amp-tag-305"><a href=https://tproger.ru/tag/guest/ title="Материалы от друзей Tproger">Материалы от друзей Tproger</a></span>, <span class="amp-tag amp-tag-223"><a href=https://tproger.ru/tag/advices/ title=Советы>Советы</a></span></div><div class=article-info data-post=19948><div class=a-so><ul><li class="sharing icon-vkontakte"> <a href="https://vk.com/share.php?url=https%3A%2F%2Ftproger.ru%2Farticles%2F10-layout-tips%2F&title=%D0%A0%D0%B5%D0%B2%D1%8C%D1%8E+%D0%B2%D0%B5%D1%80%D1%81%D1%82%D0%BA%D0%B8%3A+10+%D0%BF%D0%BE%D0%BB%D0%B5%D0%B7%D0%BD%D1%8B%D1%85+%D0%B7%D0%B0%D0%BC%D0%B5%D1%87%D0%B0%D0%BD%D0%B8%D0%B9+%D0%B8+%D1%81%D0%BE%D0%B2%D0%B5%D1%82%D0%BE%D0%B2" rel=noopener target=_blank aria-label=vkontakte></a></li><li class="sharing icon-twitter"> <a href="http://twitter.com/intent/tweet?url=https%3A%2F%2Ftproger.ru%2Farticles%2F10-layout-tips%2F&text=%D0%A0%D0%B5%D0%B2%D1%8C%D1%8E+%D0%B2%D0%B5%D1%80%D1%81%D1%82%D0%BA%D0%B8%3A+10+%D0%BF%D0%BE%D0%BB%D0%B5%D0%B7%D0%BD%D1%8B%D1%85+%D0%B7%D0%B0%D0%BC%D0%B5%D1%87%D0%B0%D0%BD%D0%B8%D0%B9+%D0%B8+%D1%81%D0%BE%D0%B2%D0%B5%D1%82%D0%BE%D0%B2" rel=noopener target=_blank aria-label=twitter></a></li><li class="sharing icon-facebook"> <a href="http://www.facebook.com/sharer.php?u=https%3A%2F%2Ftproger.ru%2Farticles%2F10-layout-tips%2F&t=%D0%A0%D0%B5%D0%B2%D1%8C%D1%8E+%D0%B2%D0%B5%D1%80%D1%81%D1%82%D0%BA%D0%B8%3A+10+%D0%BF%D0%BE%D0%BB%D0%B5%D0%B7%D0%BD%D1%8B%D1%85+%D0%B7%D0%B0%D0%BC%D0%B5%D1%87%D0%B0%D0%BD%D0%B8%D0%B9+%D0%B8+%D1%81%D0%BE%D0%B2%D0%B5%D1%82%D0%BE%D0%B2" rel=noopener target=_blank aria-label=facebook></a></li><li class="sharing icon-telegram-plain"> <a href="https://telegram.me/share/url?url=https%3A%2F%2Ftproger.ru%2Farticles%2F10-layout-tips%2F&text=%D0%A0%D0%B5%D0%B2%D1%8C%D1%8E+%D0%B2%D0%B5%D1%80%D1%81%D1%82%D0%BA%D0%B8%3A+10+%D0%BF%D0%BE%D0%BB%D0%B5%D0%B7%D0%BD%D1%8B%D1%85+%D0%B7%D0%B0%D0%BC%D0%B5%D1%87%D0%B0%D0%BD%D0%B8%D0%B9+%D0%B8+%D1%81%D0%BE%D0%B2%D0%B5%D1%82%D0%BE%D0%B2" rel=noopener target=_blank aria-label=telegram></a></li></ul></div><div class=point-article><div class="icon icon-angle-down" aria-label="points down article" role=button tabindex=0 on="tap:AMP.navigateTo(url='https://tproger.ru/articles/10-layout-tips')"></div><div class="icon point-article-count">0</div><div class="icon icon-angle-up" aria-label="points up article" role=button tabindex=0 on="tap:AMP.navigateTo(url='https://tproger.ru/articles/10-layout-tips')"></div></div></div></article><div id=related-posts class="entry-content box" data-post-id=19948><h4 id="related-posts-header"><i class="colored icon-fire"></i>Также рекомендуем:</h4><ul class=related-posts><a href=https://tproger.ru/translations/how-css-flexbox-works/ data-target-post-id=28540 class=related-post-target-link target=_blank><li class="related-post hoverable"><amp-img width=50 height=50 src=https://s3.tproger.ru/uploads/2017/02/flexbox-min-80x80.png class="attachment-50x50 size-50x50 wp-post-image" alt srcset="https://s3.tproger.ru/uploads/2017/02/flexbox-min-80x80.png, https://s3.tproger.ru/uploads/2017/02/flexbox-min-80x80.png 1.5x, https://s3.tproger.ru/uploads/2017/02/flexbox-min-150x150.png 2x" data-id=28558></amp-img><div class="widget-list-item-right "><div class=widget-list-item-caption>Как работает CSS Flexbox: наглядное введение в систему компоновки элементов на веб-странице</div><div class=widget-list-description></div></div></li></a><a href=https://tproger.ru/translations/responsive-web-design-tips/ data-target-post-id=23478 class=related-post-target-link target=_blank><li class="related-post hoverable"><amp-img width=50 height=50 src=https://s3.tproger.ru/uploads/2018/08/responsiveness-2-50x50.jpg class="attachment-50x50 size-50x50 wp-post-image" alt srcset="https://s3.tproger.ru/uploads/2018/08/responsiveness-2-50x50.jpg, https://s3.tproger.ru/uploads/2018/08/responsiveness-2-90x90.jpg 1.5x, https://s3.tproger.ru/uploads/2018/08/responsiveness-2-150x150.jpg 2x" data-id=95771></amp-img><div class="widget-list-item-right "><div class=widget-list-item-caption>Адаптивная верстка: что это и как использовать</div><div class=widget-list-description></div></div></li></a><a href=https://tproger.ru/translations/regular-expression-python/ data-target-post-id=6785 class=related-post-target-link target=_blank><li class="related-post hoverable"><amp-img width=50 height=50 src=https://s3.tproger.ru/uploads/2015/06/regex-mini-50x50.png class="attachment-50x50 size-50x50 wp-post-image" alt srcset="https://s3.tproger.ru/uploads/2015/06/regex-mini-50x50.png, https://s3.tproger.ru/uploads/2015/06/regex-mini-90x90.png 1.5x" data-id=52678></amp-img><div class="widget-list-item-right "><div class=widget-list-item-caption>Использование регулярных выражений в Python для новичков</div><div class=widget-list-description></div></div></li></a><a href=https://tproger.ru/translations/frontend-backend-interaction/ data-target-post-id=34382 class=related-post-target-link target=_blank><li class="related-post hoverable"><amp-img width=50 height=50 src=https://s3.tproger.ru/uploads/2017/04/frontend-vs-backend-50x50.jpg class="attachment-50x50 size-50x50 wp-post-image" alt srcset="https://s3.tproger.ru/uploads/2017/04/frontend-vs-backend-50x50.jpg, https://s3.tproger.ru/uploads/2017/04/frontend-vs-backend-90x90.jpg 1.5x, https://s3.tproger.ru/uploads/2017/04/frontend-vs-backend-150x150.jpg 2x" data-id=109101></amp-img><div class="widget-list-item-right "><div class=widget-list-item-caption>Простыми словами о «фронтенде» и «бэкенде»: что это такое и как они взаимодействуют</div><div class=widget-list-description></div></div></li></a></ul></div><div class="amp-wp-content widget-wrapper"><div class=cntr><div class="amp_widget_above_the_footer f-w"><div class=amp-realted-posts><div id=related-posts class="entry-content box" data-post-id=19948><h4 id="related-posts-header"><i class="colored icon-fire"></i>Также рекомендуем:</h4><ul class=related-posts><a href=https://tproger.ru/translations/how-css-flexbox-works/ data-target-post-id=28540 class=related-post-target-link target=_blank><li class="related-post hoverable"><amp-img width=50 height=50 src=https://s3.tproger.ru/uploads/2017/02/flexbox-min-80x80.png class="attachment-50x50 size-50x50 wp-post-image amp-wp-enforced-sizes" alt srcset="https://s3.tproger.ru/uploads/2017/02/flexbox-min-80x80.png, https://s3.tproger.ru/uploads/2017/02/flexbox-min-80x80.png 1.5x, https://s3.tproger.ru/uploads/2017/02/flexbox-min-150x150.png 2x" layout=intrinsic></amp-img><div class="widget-list-item-right "><div class=widget-list-item-caption>Как работает CSS Flexbox: наглядное введение в систему компоновки элементов на веб-странице</div><div class=widget-list-description></div></div></li></a><a href=https://tproger.ru/translations/responsive-web-design-tips/ data-target-post-id=23478 class=related-post-target-link target=_blank><li class="related-post hoverable"><amp-img width=50 height=50 src=https://s3.tproger.ru/uploads/2018/08/responsiveness-2-50x50.jpg class="attachment-50x50 size-50x50 wp-post-image amp-wp-enforced-sizes" alt srcset="https://s3.tproger.ru/uploads/2018/08/responsiveness-2-50x50.jpg, https://s3.tproger.ru/uploads/2018/08/responsiveness-2-90x90.jpg 1.5x, https://s3.tproger.ru/uploads/2018/08/responsiveness-2-150x150.jpg 2x" layout=intrinsic></amp-img><div class="widget-list-item-right "><div class=widget-list-item-caption>Адаптивная верстка: что это и как использовать</div><div class=widget-list-description></div></div></li></a><a href=https://tproger.ru/translations/regular-expression-python/ data-target-post-id=6785 class=related-post-target-link target=_blank><li class="related-post hoverable"><amp-img width=50 height=50 src=https://s3.tproger.ru/uploads/2015/06/regex-mini-50x50.png class="attachment-50x50 size-50x50 wp-post-image amp-wp-enforced-sizes" alt srcset="https://s3.tproger.ru/uploads/2015/06/regex-mini-50x50.png, https://s3.tproger.ru/uploads/2015/06/regex-mini-90x90.png 1.5x" layout=intrinsic></amp-img><div class="widget-list-item-right "><div class=widget-list-item-caption>Использование регулярных выражений в Python для новичков</div><div class=widget-list-description></div></div></li></a><a href=https://tproger.ru/translations/frontend-backend-interaction/ data-target-post-id=34382 class=related-post-target-link target=_blank><li class="related-post hoverable"><amp-img width=50 height=50 src=https://s3.tproger.ru/uploads/2017/04/frontend-vs-backend-50x50.jpg class="attachment-50x50 size-50x50 wp-post-image amp-wp-enforced-sizes" alt srcset="https://s3.tproger.ru/uploads/2017/04/frontend-vs-backend-50x50.jpg, https://s3.tproger.ru/uploads/2017/04/frontend-vs-backend-90x90.jpg 1.5x, https://s3.tproger.ru/uploads/2017/04/frontend-vs-backend-150x150.jpg 2x" layout=intrinsic></amp-img><div class="widget-list-item-right "><div class=widget-list-item-caption>Простыми словами о «фронтенде» и «бэкенде»: что это такое и как они взаимодействуют</div><div class=widget-list-description></div></div></li></a></ul></div></div></div></div></div><div align=center id=modal-container></div><footer class="footer container"><div class=footer-links> <a href=/about/ class=footer-a>О проекте</a> <a href=/ad/ class=footer-a>Реклама</a> <a href=https://tproger.ru/articles/10-layout-tips class=footer-a>Полная версия</a></div> <a href=https://tproger.ru/wp-content/uploads/custom/terms.pdf>Пользовательское соглашение</a> <a href=https://tproger.ru/wp-content/uploads/custom/privacy.pdf>Политика конфиденциальности</a> <a href=https://tprg.ru/regru-footer>Используем серверы <span class="icon icon-regru-logo"></span></a><div class=social-footer itemscope itemtype=http://schema.org/Organization><meta itemprop=logo content=https://cdn.tproger.ru/android-chrome-32x32.png><meta itemprop=url content=https://tproger.ru><meta itemprop=name content=Tproger><link itemprop=url href=https://tproger.ru/ > <a itemprop=sameAs href=https://vk.com/tproger class="icon icon-vkontakte"></a> <a itemprop=sameAs href=https://facebook.com/tproger/ class="icon icon-facebook"></a> <a itemprop=sameAs href=https://twitter.com/tproger class="icon icon-twitter"></a> <a itemprop=sameAs href="tg://resolve?domain=tproger_official" class="icon icon-telegram-plain"></a> <a itemprop=sameAs href=https://zen.yandex.ru/tproger class="icon icon-yazen"></a> <a itemprop=sameAs href=https://tproger.ru/feed/ class="icon icon-rss"></a></div></footer> <amp-sidebar id=sidebar layout=nodisplay side=left><ul id=menu-amp-main-menu class=amp-menu><li id=menu-item-130681 class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-130681 link-menu"><a href=# class=dropdown-toggle data-toggle=dropdown>Лента</a> <input type=checkbox id=drop-2><label for=drop-2 class=toggle></label><ul class=sub-menu><li id=menu-item-116328 class="menu-item menu-item-type-custom menu-item-object-custom menu-item-116328 "><a href=/ >Сначала новое</a></li><li id=menu-item-116327 class="menu-item menu-item-type-custom menu-item-object-custom menu-item-116327 "><a href=/top/hot/ >Набирает популярность</a></li><li id=menu-item-130682 class="menu-item menu-item-type-custom menu-item-object-custom menu-item-130682 "><a href=https://tproger.ru/top/week/ >Лучшее за неделю</a></li><li id=menu-item-130683 class="menu-item menu-item-type-custom menu-item-object-custom menu-item-130683 "><a href=https://tproger.ru/top/month/ >Лучшее за месяц</a></li><li id=menu-item-130684 class="menu-item menu-item-type-custom menu-item-object-custom menu-item-130684 "><a href=https://tproger.ru/top/ever/ >Лучшее за всё время</a></li></ul></li><li id=menu-item-130685 class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-130685 link-menu"><a href=# class=dropdown-toggle data-toggle=dropdown>Рубрики</a> <input type=checkbox id=drop-3><label for=drop-3 class=toggle></label><ul class=sub-menu><li id=menu-item-130693 class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-130693 "><a href=https://tproger.ru/category/curriculum/ >Планы обучения</a></li><li id=menu-item-130688 class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-130688 "><a href=https://tproger.ru/category/problems/ >Задачки</a></li><li id=menu-item-130696 class="menu-item menu-item-type-custom menu-item-object-custom menu-item-130696 "><a href=https://tproger.ru/category/quiz/ >Тесты и викторины</a></li><li id=menu-item-130690 class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-130690 "><a href=https://tproger.ru/category/books/ >Книги</a></li><li id=menu-item-130687 class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-130687 "><a href=https://tproger.ru/category/video/ >Видео</a></li><li id=menu-item-130691 class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-130691 "><a href=https://tproger.ru/category/explain/ >Коротко о главном</a></li><li id=menu-item-130697 class="menu-item menu-item-type-custom menu-item-object-custom menu-item-130697 "><a href=https://tproger.ru/category/experts/ >Советы экспертов</a></li><li id=menu-item-130695 class="menu-item menu-item-type-taxonomy menu-item-object-category current-post-ancestor current-menu-parent current-post-parent menu-item-130695 "><a href=https://tproger.ru/category/articles/ >Статьи</a></li><li id=menu-item-130692 class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-130692 "><a href=https://tproger.ru/category/translations/ >Переводы</a></li><li id=menu-item-130694 class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-130694 "><a href=https://tproger.ru/category/digest/ >Подборки</a></li><li id=menu-item-130698 class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-130698 "><a href=https://tproger.ru/category/devnull/ >Юмор</a></li><li id=menu-item-130689 class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-130689 "><a href=https://tproger.ru/category/interview/ >Интервью</a></li></ul></li><li id=menu-item-130699 class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-130699 link-menu"><a href=# class=dropdown-toggle data-toggle=dropdown>Темы</a> <input type=checkbox id=drop-4><label for=drop-4 class=toggle></label><ul class=sub-menu><li id=menu-item-130700 class="menu-item menu-item-type-custom menu-item-object-custom menu-item-130700 "><a href=https://tproger.ru/tag/for-beginners/ >Для начинающих</a></li><li id=menu-item-130701 class="menu-item menu-item-type-custom menu-item-object-custom menu-item-130701 "><a href=https://tproger.ru/tag/algorithms/ >Алгоритмы</a></li><li id=menu-item-130702 class="menu-item menu-item-type-custom menu-item-object-custom menu-item-130702 "><a href=https://tproger.ru/tag/design-patterns/ >Паттерны проектирования</a></li><li id=menu-item-130703 class="menu-item menu-item-type-custom menu-item-object-custom menu-item-130703 "><a href=https://tproger.ru/tag/software-development/ >Методологии разработки</a></li><li id=menu-item-130704 class="menu-item menu-item-type-custom menu-item-object-custom menu-item-130704 "><a href=https://tproger.ru/tag/web/ >Веб-разработка</a></li><li id=menu-item-130705 class="menu-item menu-item-type-custom menu-item-object-custom menu-item-130705 "><a href=https://tproger.ru/tag/gamedev/ >Разработка игр</a></li><li id=menu-item-130706 class="menu-item menu-item-type-custom menu-item-object-custom menu-item-130706 "><a href=https://tproger.ru/tag/mobiledev/ >Мобильная разработка</a></li><li id=menu-item-130707 class="menu-item menu-item-type-custom menu-item-object-custom menu-item-130707 "><a href=https://tproger.ru/tag/machine-learning/ >Машинное обучение</a></li><li id=menu-item-130708 class="menu-item menu-item-type-custom menu-item-object-custom menu-item-130708 "><a href=https://tproger.ru/tag/neural-network/ >Нейронные сети</a></li><li id=menu-item-130709 class="menu-item menu-item-type-custom menu-item-object-custom menu-item-130709 "><a href=https://tproger.ru/tag/ai/ >Искусственный интеллект</a></li><li id=menu-item-130710 class="menu-item menu-item-type-custom menu-item-object-custom menu-item-130710 "><a href=https://tproger.ru/tag/data-science/ >Data Science</a></li><li id=menu-item-130711 class="menu-item menu-item-type-custom menu-item-object-custom menu-item-130711 "><a href=https://tproger.ru/tag/interface-design-ux/ >Дизайн интерфейсов и UX</a></li><li id=menu-item-130712 class="menu-item menu-item-type-custom menu-item-object-custom menu-item-130712 "><a href=https://tproger.ru/tag/sysadm/ >Системное администрирование</a></li></ul></li><li id=menu-item-130713 class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-130713 link-menu"><a href=# class=dropdown-toggle data-toggle=dropdown>Языки</a> <input type=checkbox id=drop-5><label for=drop-5 class=toggle></label><ul class=sub-menu><li id=menu-item-130714 class="menu-item menu-item-type-custom menu-item-object-custom menu-item-130714 "><a href=https://tproger.ru/tag/python/ >Python</a></li><li id=menu-item-130715 class="menu-item menu-item-type-custom menu-item-object-custom menu-item-130715 "><a href=https://tproger.ru/tag/javascript/ >JavaScript</a></li><li id=menu-item-130716 class="menu-item menu-item-type-custom menu-item-object-custom menu-item-130716 "><a href=https://tproger.ru/tag/golang/ >Golang</a></li><li id=menu-item-130717 class="menu-item menu-item-type-custom menu-item-object-custom menu-item-130717 "><a href=https://tproger.ru/tag/java/ >Java</a></li><li id=menu-item-130718 class="menu-item menu-item-type-custom menu-item-object-custom menu-item-130718 "><a href=https://tproger.ru/tag/cpp/ >C++</a></li><li id=menu-item-130719 class="menu-item menu-item-type-custom menu-item-object-custom menu-item-130719 "><a href=https://tproger.ru/tag/c-sharp/ >C#</a></li><li id=menu-item-130720 class="menu-item menu-item-type-custom menu-item-object-custom menu-item-130720 "><a href=https://tproger.ru/tag/php/ >PHP</a></li><li id=menu-item-130721 class="menu-item menu-item-type-custom menu-item-object-custom menu-item-130721 "><a href=https://tproger.ru/tag/css/ >CSS</a></li><li id=menu-item-130722 class="menu-item menu-item-type-custom menu-item-object-custom menu-item-130722 "><a href=https://tproger.ru/tag/sql/ >SQL</a></li></ul></li><li id=menu-item-130680 class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-130680 link-menu"><a href=# class=dropdown-toggle data-toggle=dropdown>Работа</a> <input type=checkbox id=drop-6><label for=drop-6 class=toggle></label><ul class=sub-menu><li id=menu-item-116326 class="menu-item menu-item-type-custom menu-item-object-custom menu-item-116326 "><a href="/jobs/?utm_source=tproger_ru_amp_main_menu">Вакансии</a></li><li id=menu-item-130679 class="menu-item menu-item-type-custom menu-item-object-custom menu-item-130679 "><a href="https://tproger.ru/ad/jobs/?utm_referrer=amp-main-menu">Добавить вакансию</a></li><li id=menu-item-130723 class="menu-item menu-item-type-custom menu-item-object-custom menu-item-130723 "><a href=https://tproger.ru/tag/job/ >Советы</a></li><li id=menu-item-130724 class="menu-item menu-item-type-custom menu-item-object-custom menu-item-130724 "><a href=https://tproger.ru/tag/job-interview/ >Подготовка к собеседованию</a></li></ul></li><li id=menu-item-116325 class="menu-item menu-item-type-custom menu-item-object-custom menu-item-116325 "><a href="/events/?utm_source=tproger_ru_amp_main_menu" class=dropdown-toggle data-toggle=dropdown>События и курсы</a></li></ul><div role=button tabindex=0 on=tap:sidebar.close class=amp-sidebar-close><span></span><span></span></div></amp-sidebar></body></html> <amp-addthis width=320 height=92 data-pub-id data-widget-id data-widget-type=floating></amp-addthis> <amp-web-push id=amp-web-push layout=nodisplay helper-iframe-url="https://tproger.ru/wp-content/plugins/onesignal-free-web-push-notifications/sdk_files/amp-helper-frame.html?appId=ef084fe2-45b1-4d59-9d24-c95f15a4357a" permission-dialog-url="https://tproger.ru/wp-content/plugins/onesignal-free-web-push-notifications/sdk_files/amp-permission-dialog.html?appId=ef084fe2-45b1-4d59-9d24-c95f15a4357a" service-worker-url="https://tproger.ru/wp-content/plugins/onesignal-free-web-push-notifications/sdk_files/OneSignalSDKWorker.js.php?appId=ef084fe2-45b1-4d59-9d24-c95f15a4357a" ></amp-web-push><div class=s_so></div> <script type=application/ld+json>{"@context":"https:\/\/schema.org","@graph":[[{"@context":"https:\/\/schema.org","@type":"SiteNavigationElement","@id":"https:\/\/tproger.ru\/amp-menu","name":"Лента","url":"#"},{"@context":"https:\/\/schema.org","@type":"SiteNavigationElement","@id":"https:\/\/tproger.ru\/amp-menu","name":"Сначала новое","url":"\/"},{"@context":"https:\/\/schema.org","@type":"SiteNavigationElement","@id":"https:\/\/tproger.ru\/amp-menu","name":"Набирает популярность","url":"\/top\/hot\/"},{"@context":"https:\/\/schema.org","@type":"SiteNavigationElement","@id":"https:\/\/tproger.ru\/amp-menu","name":"Лучшее за неделю","url":"https:\/\/tproger.ru\/top\/week\/"},{"@context":"https:\/\/schema.org","@type":"SiteNavigationElement","@id":"https:\/\/tproger.ru\/amp-menu","name":"Лучшее за месяц","url":"https:\/\/tproger.ru\/top\/month\/"},{"@context":"https:\/\/schema.org","@type":"SiteNavigationElement","@id":"https:\/\/tproger.ru\/amp-menu","name":"Лучшее за всё время","url":"https:\/\/tproger.ru\/top\/ever\/"},{"@context":"https:\/\/schema.org","@type":"SiteNavigationElement","@id":"https:\/\/tproger.ru\/amp-menu","name":"Рубрики","url":"#"},{"@context":"https:\/\/schema.org","@type":"SiteNavigationElement","@id":"https:\/\/tproger.ru\/amp-menu","name":"Планы обучения","url":"https:\/\/tproger.ru\/category\/curriculum\/"},{"@context":"https:\/\/schema.org","@type":"SiteNavigationElement","@id":"https:\/\/tproger.ru\/amp-menu","name":"Задачки","url":"https:\/\/tproger.ru\/category\/problems\/"},{"@context":"https:\/\/schema.org","@type":"SiteNavigationElement","@id":"https:\/\/tproger.ru\/amp-menu","name":"Тесты и викторины","url":"https:\/\/tproger.ru\/category\/quiz\/"},{"@context":"https:\/\/schema.org","@type":"SiteNavigationElement","@id":"https:\/\/tproger.ru\/amp-menu","name":"Книги","url":"https:\/\/tproger.ru\/category\/books\/"},{"@context":"https:\/\/schema.org","@type":"SiteNavigationElement","@id":"https:\/\/tproger.ru\/amp-menu","name":"Видео","url":"https:\/\/tproger.ru\/category\/video\/"},{"@context":"https:\/\/schema.org","@type":"SiteNavigationElement","@id":"https:\/\/tproger.ru\/amp-menu","name":"Коротко о главном","url":"https:\/\/tproger.ru\/category\/explain\/"},{"@context":"https:\/\/schema.org","@type":"SiteNavigationElement","@id":"https:\/\/tproger.ru\/amp-menu","name":"Советы экспертов","url":"https:\/\/tproger.ru\/category\/experts\/"},{"@context":"https:\/\/schema.org","@type":"SiteNavigationElement","@id":"https:\/\/tproger.ru\/amp-menu","name":"Статьи","url":"https:\/\/tproger.ru\/category\/articles\/"},{"@context":"https:\/\/schema.org","@type":"SiteNavigationElement","@id":"https:\/\/tproger.ru\/amp-menu","name":"Переводы","url":"https:\/\/tproger.ru\/category\/translations\/"},{"@context":"https:\/\/schema.org","@type":"SiteNavigationElement","@id":"https:\/\/tproger.ru\/amp-menu","name":"Подборки","url":"https:\/\/tproger.ru\/category\/digest\/"},{"@context":"https:\/\/schema.org","@type":"SiteNavigationElement","@id":"https:\/\/tproger.ru\/amp-menu","name":"Юмор","url":"https:\/\/tproger.ru\/category\/devnull\/"},{"@context":"https:\/\/schema.org","@type":"SiteNavigationElement","@id":"https:\/\/tproger.ru\/amp-menu","name":"Интервью","url":"https:\/\/tproger.ru\/category\/interview\/"},{"@context":"https:\/\/schema.org","@type":"SiteNavigationElement","@id":"https:\/\/tproger.ru\/amp-menu","name":"Темы","url":"#"},{"@context":"https:\/\/schema.org","@type":"SiteNavigationElement","@id":"https:\/\/tproger.ru\/amp-menu","name":"Для начинающих","url":"https:\/\/tproger.ru\/tag\/for-beginners\/"},{"@context":"https:\/\/schema.org","@type":"SiteNavigationElement","@id":"https:\/\/tproger.ru\/amp-menu","name":"Алгоритмы","url":"https:\/\/tproger.ru\/tag\/algorithms\/"},{"@context":"https:\/\/schema.org","@type":"SiteNavigationElement","@id":"https:\/\/tproger.ru\/amp-menu","name":"Паттерны проектирования","url":"https:\/\/tproger.ru\/tag\/design-patterns\/"},{"@context":"https:\/\/schema.org","@type":"SiteNavigationElement","@id":"https:\/\/tproger.ru\/amp-menu","name":"Методологии разработки","url":"https:\/\/tproger.ru\/tag\/software-development\/"},{"@context":"https:\/\/schema.org","@type":"SiteNavigationElement","@id":"https:\/\/tproger.ru\/amp-menu","name":"Веб-разработка","url":"https:\/\/tproger.ru\/tag\/web\/"},{"@context":"https:\/\/schema.org","@type":"SiteNavigationElement","@id":"https:\/\/tproger.ru\/amp-menu","name":"Разработка игр","url":"https:\/\/tproger.ru\/tag\/gamedev\/"},{"@context":"https:\/\/schema.org","@type":"SiteNavigationElement","@id":"https:\/\/tproger.ru\/amp-menu","name":"Мобильная разработка","url":"https:\/\/tproger.ru\/tag\/mobiledev\/"},{"@context":"https:\/\/schema.org","@type":"SiteNavigationElement","@id":"https:\/\/tproger.ru\/amp-menu","name":"Машинное обучение","url":"https:\/\/tproger.ru\/tag\/machine-learning\/"},{"@context":"https:\/\/schema.org","@type":"SiteNavigationElement","@id":"https:\/\/tproger.ru\/amp-menu","name":"Нейронные сети","url":"https:\/\/tproger.ru\/tag\/neural-network\/"},{"@context":"https:\/\/schema.org","@type":"SiteNavigationElement","@id":"https:\/\/tproger.ru\/amp-menu","name":"Искусственный интеллект","url":"https:\/\/tproger.ru\/tag\/ai\/"},{"@context":"https:\/\/schema.org","@type":"SiteNavigationElement","@id":"https:\/\/tproger.ru\/amp-menu","name":"Data Science","url":"https:\/\/tproger.ru\/tag\/data-science\/"},{"@context":"https:\/\/schema.org","@type":"SiteNavigationElement","@id":"https:\/\/tproger.ru\/amp-menu","name":"Дизайн интерфейсов и UX","url":"https:\/\/tproger.ru\/tag\/interface-design-ux\/"},{"@context":"https:\/\/schema.org","@type":"SiteNavigationElement","@id":"https:\/\/tproger.ru\/amp-menu","name":"Системное администрирование","url":"https:\/\/tproger.ru\/tag\/sysadm\/"},{"@context":"https:\/\/schema.org","@type":"SiteNavigationElement","@id":"https:\/\/tproger.ru\/amp-menu","name":"Языки","url":"#"},{"@context":"https:\/\/schema.org","@type":"SiteNavigationElement","@id":"https:\/\/tproger.ru\/amp-menu","name":"Python","url":"https:\/\/tproger.ru\/tag\/python\/"},{"@context":"https:\/\/schema.org","@type":"SiteNavigationElement","@id":"https:\/\/tproger.ru\/amp-menu","name":"JavaScript","url":"https:\/\/tproger.ru\/tag\/javascript\/"},{"@context":"https:\/\/schema.org","@type":"SiteNavigationElement","@id":"https:\/\/tproger.ru\/amp-menu","name":"Golang","url":"https:\/\/tproger.ru\/tag\/golang\/"},{"@context":"https:\/\/schema.org","@type":"SiteNavigationElement","@id":"https:\/\/tproger.ru\/amp-menu","name":"Java","url":"https:\/\/tproger.ru\/tag\/java\/"},{"@context":"https:\/\/schema.org","@type":"SiteNavigationElement","@id":"https:\/\/tproger.ru\/amp-menu","name":"C++","url":"https:\/\/tproger.ru\/tag\/cpp\/"},{"@context":"https:\/\/schema.org","@type":"SiteNavigationElement","@id":"https:\/\/tproger.ru\/amp-menu","name":"C#","url":"https:\/\/tproger.ru\/tag\/c-sharp\/"},{"@context":"https:\/\/schema.org","@type":"SiteNavigationElement","@id":"https:\/\/tproger.ru\/amp-menu","name":"PHP","url":"https:\/\/tproger.ru\/tag\/php\/"},{"@context":"https:\/\/schema.org","@type":"SiteNavigationElement","@id":"https:\/\/tproger.ru\/amp-menu","name":"CSS","url":"https:\/\/tproger.ru\/tag\/css\/"},{"@context":"https:\/\/schema.org","@type":"SiteNavigationElement","@id":"https:\/\/tproger.ru\/amp-menu","name":"SQL","url":"https:\/\/tproger.ru\/tag\/sql\/"},{"@context":"https:\/\/schema.org","@type":"SiteNavigationElement","@id":"https:\/\/tproger.ru\/amp-menu","name":"Работа","url":"#"},{"@context":"https:\/\/schema.org","@type":"SiteNavigationElement","@id":"https:\/\/tproger.ru\/amp-menu","name":"Вакансии","url":"\/jobs\/?utm_source=tproger_ru_amp_main_menu"},{"@context":"https:\/\/schema.org","@type":"SiteNavigationElement","@id":"https:\/\/tproger.ru\/amp-menu","name":"Добавить вакансию","url":"https:\/\/tproger.ru\/ad\/jobs\/?utm_referrer=amp-main-menu"},{"@context":"https:\/\/schema.org","@type":"SiteNavigationElement","@id":"https:\/\/tproger.ru\/amp-menu","name":"Советы","url":"https:\/\/tproger.ru\/tag\/job\/"},{"@context":"https:\/\/schema.org","@type":"SiteNavigationElement","@id":"https:\/\/tproger.ru\/amp-menu","name":"Подготовка к собеседованию","url":"https:\/\/tproger.ru\/tag\/job-interview\/"},{"@context":"https:\/\/schema.org","@type":"SiteNavigationElement","@id":"https:\/\/tproger.ru\/amp-menu","name":"События и курсы","url":"\/events\/?utm_source=tproger_ru_amp_main_menu"}]]}</script> <script type=application/ld+json>{"@context":"http:\/\/schema.org","@type":"BlogPosting","mainEntityOfPage":"https:\/\/tproger.ru\/articles\/10-layout-tips\/","publisher":{"@type":"Organization","name":"Tproger","logo":{"@type":"ImageObject","url":"https:\/\/s3.tproger.ru\/uploads\/2018\/10\/android-chrome-512x512.png","height":"60","width":"600"}},"headline":"Ревью верстки: 10 полезных замечаний и советов","author":{"@type":"Person","name":"Иван Бирюков","image":"https:\/\/secure.gravatar.com\/avatar\/3a4e24df7802c68b1f3208b7fffefa74?s=50&d=mm&r=g"},"datePublished":"2016-08-16T16:09:14+03:00","dateModified":"2017-09-25T17:05:32+03:00","image":{"@type":"ImageObject","url":"https:\/\/s3.tproger.ru\/uploads\/2016\/08\/cssmini-1280x720.png","width":1280,"height":720},"description":"Статья рассчитана на новичков в верстке, но не исключено, что и опытный верстальщик узнает себя…"}</script> <amp-analytics type=gtag id=analytics1 data-credentials=include > <script type=application/json>{"vars":{"gtag_id":"UA-78195897-1","config":{"UA-78195897-1":{"groups":"default"}},"triggers":{"trackPageview":{"on":"visible","request":"pageview"}}}}</script> </amp-analytics> <amp-analytics type=metrika> <script type=application/json>{"vars":{"counterId":"27485085"},"triggers":{"notBounce":{"on":"timer","timerSpec":{"immediate":"false","interval":"15","maxTimerLength":"16"},"request":"notBounce"}}}</script> </amp-analytics> <amp-analytics> <script type=application/json>{"requests":{"pageview":"https://tproger.ru/wp-content/themes/bliss/fast-ajax.php?action=count-post-view"},"vars":{"post_id":"19948"},"extraUrlParams":{"post-id":"${post_id}","url":"${canonicalUrl}","from":"amp","random":"${random}"},"triggers":{"trackPageview":{"on":"visible","request":"pageview"}},"transport":{"beacon":true,"xhrpost":true,"image":true}}</script> </amp-analytics>