Ошибки при верстке сайта

Время на прочтение
4 мин

Количество просмотров 43K

Ошибки и советы я написал по-своему опыту. Если найдутся ошибки типа «вредных советов», то буду рад услышать конструктивную критику. Пост предназначен для начинающих изучать HTML и CSS, но, возможно, специалистам тоже будет интересно ознакомиться с данным материалом.

1. W3C Validator

Рекомендуется проверять HTML и CSS сайта через сервис validator.w3.org. Данный сервис просканирует код и отобразит ошибки, например:

• не закрыт тег;
• не рекомендованные символы в ссылках;
• используется не рекомендованный тег;
• не указан обязательный атрибут;
• и другое.

2. Вёрстка в формате UTF-8

При вёрстке страницы, надо убедиться, что кодировка файла установлена в UTF-8 (без BOM). Каждый текстовый редактор устанавливает кодировку по-своему.

Файл в формате UTF-8 позволяет использовать нестандартные символы (например, символы различных языков, знак валюты и другие).

Также надо сообщить браузерам, что страница открывается в кодировке UTF-8. Это делается через тег ниже:

<meta charset="utf-8">

3. Одинаковые id у нескольких элементов

Значение атрибута id в HTML-коде не должно повторяться.

<!-- не правильно -->
<div id="block"></div>
<div id="block"></div>

<!-- правильно -->
<div id="block-1"></div>
<div id="block-2"></div>

4. Спрайты

Несколько маленьких картинок рекомендуется соединять в один файл (такой файл называется спрайт). Это уменьшит количество запросов на сайт и улучшит скорость загрузки страницы.

Пример спрайта

Пример на JSFiddle

Сейчас также популярно вместо спрайтов использовать шрифты с иконками. Т.е. вместо букв выводятся иконки шестерёнки, смайлика и других иконок. В качестве примера можно привести иконки glyphicons, которые используются в Twitter Bootstrap.

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

5. Много селекторов

Не рекомендуется использовать больше трёх селекторов, т.к. это влияет на производительность сайта.

/* не рекомендуется, большая вложенность */
.page .item .title a {}

/* можно сократить */
.page .item a {}

Браузеры читают CSS справа налево. Т.е. в коде выше, сначала будут выбраны все ссылки, что есть на странице, а потом будут выбраны те ссылки, которые находятся внутри элемента .item.

Если есть возможность, то выборку рекомендуется сокращать до одного селектора:

/* рекомендуется */
.form-submit a {}

/* предпочтительнее примера выше, если есть возможность */
.form-submit-link {}

6. Стили в HTML

HTML предназначен для вывода информации (текст, картинки). Оформления контента (изменить размер, цвет, шрифт) происходит в CSS.

<!-- не правильно -->
<p style="color: red">Ошибка в коде</p>

<!-- правильно -->
<p class="error">Ошибка в коде</p>

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

Многие верстальщики, когда надо сделать текст зелёным цветом, прикрепляют к нему класс .green.

<p class="message green">Текст сообщения</p>

Это неправильно, т.к. при смене дизайна, многие цвета могут измениться, например, текст сообщения может выводиться синим цветом вместо зелёного. Тогда придётся искать все теги, у которых есть класс .green и заменять его на .blue.

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

<!-- неправильно -->
<p class="message green">Текст сообщения</p>

<!-- правильно -->
<p class="message message-success">Текст сообщения</p>

8. Пиксели в дробных значениях

Некоторые браузеры позволяют указывать пиксели в дробных значениях, например «1.5px». Но это неправильно, т.к. пиксель это неделимая единица. Вместо «1.5px» лучше использовать «1.5em».

p {
    /* не правильно */
    letter-spacing: 1.5px;

    /* правильно */
    letter-spacing: .005em;
}

9. Использование классов вместо id

Рекомендуется делать выборку по классам вместо id, т.к. селекторы с id имеют больший вес, чем у классов, и их сложно будет переопределить.

#modal a {
    color: blue;
}

/* цвет ниже не получится переопределить,
   т.к. #modal имеет больший вес, чем у классов */
.modal-header a {
    color: #333;
}

/* в этом случае придётся добавить #modal */
#modal .modal-header a {
    color: #333;
}

Также не рекомендуется использовать !important, т.к. его вес выше, чем у атрибута id, и его также будет сложно переопределить.

10. Меню

Меню должно быть оформлено как список.

<!-- неправильно -->
<p><a href="#">Главная</a> <a href="#">Новости</a> <a href="#">О компании</a></p>

<!-- правильно -->
<ul>
    <li><a href="#">Главная</a></li>
    <li><a href="#">Новости</a></li>
    <li><a href="#">О компании</a></li>
</ul>

11. Пропущенный alt у картинок

В тегах надо указывать атрибут alt (можно пустой).

<!-- неправильно -->
<img src="pic.jpg">

<!-- правильно -->
<img src="pic.jpg" alt="Картинка">
<img src="pic.jpg" alt="">

12. Теги <h1>

На странице должен быть только один заголовок в теге <h1>. В основном, в этом теге находится название страницы.

13. Транскрипция

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

/* неправильно */
.tovar {}
.stranica {}
.zapros {}

/* правильно */
.product {}
.page {}
.query {}

14. Clearfix

Про clearfix сложно написать в двух словах, но укажу момент, которые многие верстальщики, по моему мнению, делают ошибку.

Класс .clearfix надо указывать в родительском теге, а не ставить рядом.

<!-- неправильно -->
<div>
    <div class="float-left"></div>
    <div class="float-right"></div>
    <div class="clearfix"></div>
</div>

<!-- правильно -->
<div class="clearfix">
    <div class="float-left"></div>
    <div class="float-right"></div>
</div>

15. HTML — язык программирования

Некоторые новички в HTML думают, что HTML это язык программирования. На самом деле HTML не является языком программирования, его можно сравнить с Microsoft Word. Например, чтобы текст сделать жирным, в Word надо нажать на кнопку, а в HTML надо прописать код. Т.е. HTML это просто инструмент, который добавляет текст, картинки, таблицы и другие элементы.

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

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 > для текста.