10 ошибок начинающего верстальщика

Верстка – процесс весьма кропотливый. Пусть HTML/CSS и не являются языками программирования, освоить CSS – в разы сложнее, чем освоить тот же Python. Причина – в том, что если Питон развивался логично и постепенно, то CSS развивался в условиях непримиримой войны между браузерами, каждый из которых пытался пропихнуть свои стандарты. Добавьте сюда кодировки, изменения HTML от W3C и позднее «накручивание» DOM для высокоуровневых языков – получите ад, бардак и хаос. Из него растут типичные ошибки начинающего верстальщика, не успевшего в этом хаосе сориентироваться – неправильное использование id, использование style, попытка решения проблем через !important, invisible text для отступов и так далее.

Ниже мы все эти ошибки рассмотрим и расскажем, почему не стоит так делать.

1. Неправильные имена классов

Правильная верстка в CSS организуется через классы – вы указываете классы для элементов, и когда вы меняете что-то в классе, изменения применяются ко всем элементам этого класса. Идея пришла из объектно-ориентированного подхода к программированию, и самое прекрасное, что классы дают – это принцип DRY, Don’t Repeat Yourself, «Не повторяй себя». Если у вас на сайте 50 одинаковых кнопок, без классов вам пришлось бы менять цвет кнопки 50 раз, когда заказчик захочет кислотно-зеленую кнопку «КУПИТЬ» вместо красной. С классами вам нужно поменять всего одно значение.

С классами связано множество ошибок начинающих верстальщиков, но самая распространенная – это бессмысленные (и беспощадные) имена классов: .knopka, .vtoraya-knopka-sleva, .vyrovnyat, .ne-trogat – вы и сами можете придумать/найти множество таких примеров. Конкретно эти плохи по двум причинам:

1. Ничего не понятно (но очень интересно).
2. Транслит.

Транслит – это всегда плохо, потому что он вырвиглазный и его невозможно читать. Но если мы подберем адекватные имена на английском (.button, .second-button-on-the-left, .align, .do-not-touch), то хорошо все еще не станет, потому что назначение классов не прояснилось. В основном эта проблема бьет по программистам, которые затем будут писать js-код, но если вы расплодите кучу бессмысленных названий, то вам потом самим будет сложно понять, что вам нужно подправить: .button3, .button12 или .button-on-top-final-red-v2.

Давайте понятные имена: .shopping-cart-buy-button, .header-logo, .search-page-backgr. И по возможности группируйте классы в .css-файле, чтобы их было проще искать.

2. Описание стилей внутри < style >

Забудьте про прописывание стиля в этом тэге. Функция была добавлена еще до появления CSS и оставлена в HTML для обратной совместимости – чтобы очень старые сайты не сломались. Описывать разметку в < style > нельзя, потому что ломаются приоритеты и при отладке сложно найти ошибку – особенно если искать ее будете не вы. Вся верстка должна быть исключительно в .css-файле – этот принцип в программировании называется инкапсуляцией, и за его применение другие верстальщики (которые будут разбираться с вашей разметкой) скажут вам огромное спасибо.

3. Символы, не предназначенные для верстки

Unicode/UTF обладает множеством интересных символов для отображения, сюда входят пиктограммы, смайлики и invisible text. Будьте с ними очень аккуратны – разные шрифты могут по-разному «относиться» к отображению этих символов, некоторые браузеры тоже воспринимают их некорректно. Если прямо совсем хочется их использовать – хотя бы сбросьте стандартную верстку браузера через * {} и протестируйте верстку на нескольких устройствах.

Кстати, для пиктограмм и смайликов можно создать отдельный шрифт, в этом случае вы получите безболезненное масштабирование и гарантию отображения.

4. Использование ID для идентификации

Использование ID для «точечного» задания стиля – это удобно, но делать так тоже не стоит. JS активно взаимодействует с ID и может менять идентификаторы элементов для своих внутренних целей. Если js-код поменяет ID, которому вы прописали стиль – верстка слетит. Лучше напишите пару лишних строчек кода для класса.

5. Очень большие картинки

Несмотря на улучшение качества интернета в мире, эта проблема все еще остается. Большие картинки долго грузятся, а чем дольше висит загрузка страницы, тем больше шансов, что человек уйдет к конкурентам, у которых сайт не тормозит.

Пережимайте картинки в jpg, а если прямо необходимо выкладывать большие картинки на странице – ищите специальные js-скрипты, которые позволяют догружать картинки отдельно от остального контента на странице.

6. Использование HTML для верстки в целом

Самая частая проблема – использование /br для верстки, сюда же относится прописывание стиля в < class > и < p > для создания отступов или пустого пространства. HTML – язык разметки, он показывает браузеру, где и какие элементы должны находиться. Как эти элементы выглядят и как делят между собой пространство – вопрос к языку стилей CSS. Вот им вы и должны пользоваться для решения этих проблем. А если у вас половина разметки будет в CSS, а половина в HTML, то при достижении определенного порога сложности проекта вы вдруг обнаружите, что при любом внесенном изменении все ломается.

7. Неправильное использование заголовков

Заголовки показывают и браузеру, и поисковым роботам, где находится основной контент. H1 должен быть в единичном экземпляре, h2 должны быть вложены в h1, h3 должны быть вложены в h2 и так далее.

Если вы не придерживаетесь этих правил – не удивляйтесь потом, почему поисковые роботы игнорируют вашу страницу.

8. Использование !important

!important – вселенское зло. !important переопределяет естественные приоритеты CSS, и это выстрелит вам в ногу, когда вы будете искать ошибку в верстке. Хуже того, поведение нескольких !important при их пересечении не очень хорошо задекларировано, и ошибка может стать плавающей – в одном браузере она есть, в другом его нет. Плавающие ошибки – самое плохое, что может случиться в коде, потому что при наличии такой ошибки бывает проще все снести и переписать заново, чем отлавливать такую ошибку.

Еще один важный момент – если вам нужно использовать более одного !important в разметке, это почти всегда означает, что вы плохо эту самую разметку продумали. Сядьте и задайте себе вопрос: «Почему мне приходится использовать !important здесь?» Ответом на вопрос почти всегда будет плохо продуманная система классов, то есть плохая архитектура. С самых первых шагов в верстке приучайте себя продумывать архитектуру классов и селекторов – это сэкономит вам кучу времени в дальнейшем.

9. Не прописаны альты в < img >

Вам alt в <img> может быть и не нужен, но он очень нужен SEO-специалистам и js-программистам.

Пропишите хотя бы пустой alt.

10. Злоупотребление div

Если вам нужно создать контейнер – используйте div, который для этого и предназначен. Если вам нужно вывести текст – используйте span, который для этого предназначен. Не нужно мудрить и использовать div для текста и span для блоков – когда верстка станет более сложной, будет больше шансов, что что-то сломается. Если вам прямо очень сильно нужно использовать span для блока – пропишите для него display:block.

Правильное ревью верстки

Провести самостоятельное ревью верстки довольно сложно – глаз «замыливается», и вы можете пропустить очевидную ошибку. Есть один инструмент, который может вам помочь – валидатор от W3-консорциума, расположен тут: https://validator.w3.org/. Он показывает основные ошибки в HTML, хотя для CSS code-review подходит так себе. Лучший способ сделать ревью – найти другого верстальщика и отдать страницу на ревью ему.

Если такого верстальщика нет – возьмите 10 советов выше и 10 раз пройдитесь по коду, с каждой итерацией проверяйте, выполнили ли вы все рекомендации.

FAQ

• Что такое DOM? Document Object Model – это модель, описывающая взаимодействие элементов на странице. На основе всех элементов строится дерево, с помощью которого js-программист может быстро получить доступ к нужному элементу. DOM строится на ID, классах и тэгах, и чем более логично они будут прописаны на странице, тем проще будет писать код для скриптов.

• Можно ли взломать сайт через ошибки в HTML/CSS? Как ни странно, можно – через cross-site scripting. О том, как от этого защититься, можно почитать здесь: https://www.w3.org/TR/CSP2/. 

Подведем итоги

Тезисно:

• выбирайте содержательные имена классов;
• не описывайте стили внутри < style >;
• с осторожностью используйте invisible text и другие редкие символы Unicode;
• старайтесь избегать использования id для идентификации;
• сжимайте картинки;
• не используйте HTML для верстки;
• расставляйте заголовки логично, более низкие вложены в более высокие;
• избегайте !important, продумывайте структуру верстки заранее;
• прописывайте альты в < img >, даже пустые;
• используйте < div > для блоков и < span > для текста.