15 ошибок или советов HTML и CSS

в 14:19, , рубрики: css, html

Ошибки и советы я написал по-своему опыту. Если найдутся ошибки типа «вредных советов», то буду рад услышать конструктивную критику. Пост предназначен для начинающих изучать 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. Спрайты

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

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

image

Пример на 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 это просто инструмент, который добавляет текст, картинки, таблицы и другие элементы.

Автор: dkaito

Источник

* - обязательные к заполнению поля


https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js