Какие ошибки в верстке недопустимы? 23 Важных совета

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

Я назвал статью какие ошибки недопустимы, но по факту речь пойдет и об ошибках и о принципах при которых процесс создания шаблона становится максимально приятным и более простым.

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

В общем Кодеры, поехали!

Всегда закрывайте теги

Я думаю каждый новичок встречается с этой проблемой, а все потому, что пусть HTML и простой, но такой новый. 

В общем я помню когда я начинал, я писал html код в блокноте, соответственно бывали случаи когда я забывал закрывать теги. 

Современные браузеры в целом могут и автоматически закрыть этот тег и при этом даже не сказать о том, что была или есть какая-то проблема. 

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

Потому это считает очень плохой практикой. 

Вот пример:

<p> первая строка
<p> вторая
<p> третья

Чтобы такой проблемы не возникало, нужно использовать специальные редакторы кода ну или IDE. Удобство заключается в том, что редактор кода оповестит вас о том, что есть незакрытый тег.

Если что должно быть так:

<div>
   <p> первая строка </p>
   <p> вторая </p>
   <p> третья </p>
</div>

В общем советую максимально обращать на это внимание. 

Объявите правильный DocType

Когда я еще начинал, я вообще не понимал что такое DocType, и даже была мысль что он и не нужен, ведь браузер обычно и так открывает написанную мною верстку, но как оказалось DOCTYPE очень сильно важен.

DOCTYPE — указывает браузеру как воспринимать написанный мною html, все дело в том, что версий html очень много.

Не то чтобы я рекомендую, но по стандарту я всегда указываю:

<!DOCTYPE html>

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

Не используйте стили напрямую

Я уверен что рано или поздно возникнет желание напрямую прописать атрибут style, в котором можно будет записать “какую-то мелочь”, но делать так не советуют многие верстальщики. 

Даже скажу почему! 

Во первых это увеличивает сам размер html кода, что не сильно может хорошо влиять на продвижение в поисковых системах.

Во вторых все что внутри style, имеет больший приоритет, потому перебить такие стили будет очень сложно. Придется использовать свойство important для того чтобы выводился твой стиль, которое кстати говоря также не рекомендуют использовать.

А все потому что есть масса других способов добиться приоритетности css классов.

Третий довод просто говорит о том, что это непрофессионально. Стили должны быть в файлах стилей.

Как не нужно делать:

<div style="color: red;">Просто текст, не обращайте внимания</div>

Как нужно:

<div class="colored">Просто текст, не обращайте внимания</div>

Внутри css файла:

.colored {
  color: red;
}

Помещайте все внешние CSS файлы внутри тега <head>

То о чем я говорил — стили должны быть в файлах стилей, а подключать их рекомендуется внутри тега head. Хотя сказать честно никаких проблем не вылезет если вдруг ты поставишь подключение стилей даже в конце документа перед </body>.

Разница в том только, что стили будут загружаться в только после того как загрузится html.

То есть получается такая логика: сначала подгружается документ, а потом стили. Потому хорошим тоном является вставка стилей одним файлом внутри тега head. Тогда логика следующая: сначала подгружается стили, потом весь документ.

Поместите весь javascript в конце страницы

Если css мы ставим в начале страницы, то javascript наоборот должен быть в конце. 

Дело в том, что javascript создаст нагрузку при загрузке первого контента. Получится ситуация что контент будет загружаться значительно дольше.

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

В общем ставим javascript в конце.

Старайтесь отказаться javascript атрибутов

Существуют такие атрибуты в которые мы ставим javascript, это например onclick, onchange, ну все в таком роде. В целом их присутствие не столько страшное но все же все тоже самое мы можем сделать с помощью лиснеров или jquery click. 

Почему так правильно?

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

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

То есть он пытается найти что немного влияет на скорость и оптимизацию, после если не нашел, в консоли возникает ошибка.

Если сделать это все во внешнем файле и при этом привязываться только к классу или определенному селектору то таких ошибок возникнуть в принципе не может.

Да и отладка становится в рамках одного файла а не нескольких.

Используйте HTML и CSS валидаторы

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

Если убрать все проблемные точки, то браузеру в целом придется меньше думать.

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

Да, если ошибок 5-10, это не так страшно, но если их сотни или тысячи это может сказаться и на скорости загрузки сайта, да и на качестве его отображения.

Потому не стоит лениться просто вставить ссылку на сайте html и css валидатора.

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

Лучшие валидаторы:

Используйте DevTools

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

И сказать честно это я назвал только верхушку айсберга его возможностей.

Сегодня этот инструмент можно встретить и на Яндекс браузере и в мозилле но я советую его использовать там где он изначально зародился — в Google chrome.

Не нужно писать теги заглавными буквами

Я уверен есть такие люди и сегодня. Браузер итак прочитает, но не дай бог это код попадется другому разработчику. Например мне — да я просто откажусь работать с таким кодом или предпочту его переписать.

Но уж точно не буду рад такое увидеть, а того кто так делает я сочту не то чтобы новичком в этом деле, просто человеком который ниже низов и ему есть ещё чему поучиться — например заново начать учить html.

Где заголовок там H1-H6 в зависимости от места

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

Потому правильный заголовок согласно спецификации HTML это и важно и правильно.

Простой пример: на этой странице вверху ты увидишь заголовок. Угадай с каким он тегом? И почему с именно этим тегом? Напиши своё мнение в комментариях.

Сжимайте картинки — обязательно

Ещё один хороший тон оптимизированной верстки. Во-первых когда мы я верстаю любой дизайн, как я заметил 5-30% могут составлять именно картинки. Фишка в том что в любом случае они будут и от них никуда не деться.

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

Да-да, я снова о скорости загрузки сайта. Чтобы этого избежать нужно делать спрайты.

Спрайт — это одна картинка внутри которой мы помешает множество картинок, а после просто с помощью css и позиционирования отображаем эту картинку.

Для пользователя фактически ничего не меняется, а для браузера это один запрос вместо десятка.

Второй момент это само сжатие без потери качества. Это часто позволяет сжать изображение аж до 70%. Мало того что картинка будет весить меньше чем мы сэкономим место на хостинге, да ещё и браузер будет их скачивать быстрее, а в то же время сервер будет отдавать быстрее.

В общем вбиваем compress image в поиске и получаем сотни результатов с уже готовыми инструментами. Я использую онлайн инструменты. Удобно потому что.

PageSpeed Insights в помощь

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

PageSpeed Insights смотрит и на дерево html и даже на css потому скажет что кнопки слишком маленькие и не поддаются правильному юзабилити или слишком много неиспользуемых css тегов.

В общем там много всякой полезной информации. Вместе с этим инструментом рекомендую ещё использовать lighthouse, он почти тоже самое только встроен в сам google chrome браузер. Штука супер полезная.

Делай хлебные крошки нумерованным списком

Как всегда исходим из логики. Что такое хлебные крошки? Это список ссылок который показывает по порядку наше местонахождение.

Список ссылок, значит оно должно быть списком. Да звучит странно, но я считаю что так правильно и мне от этого живётся значительно проще.

Лучше использовать IDE

Помнишь я говорил мол html закрывать, заглавными теги не писать, ошибок не допускать. Вот чтобы всего этого не было то лучше использовать IDE редактор. Там внутри него есть все самые необходимые инструменты которые сделают жизнь верстальщика проще.

Серьезно, даже впервые скажу что лучше использовать phpstorm, нежели вешать кучу плагинов на Sublime text 3. Так получится значительно проще, причем чтобы вешать на редакторе плагины нужно четко понимать свои потребности.

А если опыта нет то и понимания что нужно тоже не будет. А в IDE все необходимое уже есть. У меня есть целая статья на эту тему “Как выбрать IDE”, советую прочитать.

Все картинки всегда должны иметь заполненный alt

Это опять таки важно для поисковых систем — нужно заполнять alt. Сильно напрягаться что там писать не стоит. Видите к примеру на картинке розовый ламборгини, это и пишете “Розовый ламборгини стоящий в поле” ну и все в таком роде.

Зачем вообще нужен alt? Этот атрибут используется для нескольких вещей. 

В первом случае мы видим его тогда когда сервер не может отдать картинку — к примеру сломалась ссылка. 

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

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

Чем меньше html тем лучше

Говорят поисковые системы смотрят показатель “соотношение текста к html на странице” — так ли это не понятно. Единственное что для меня делает в этом всем смысл, так это размер страницы — чем меньше html тем меньше весит страница.

Ну а дальше все как всегда — меньший вес страницы, быстрее прогрузка.

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

Да и в целом как говорится — краткость сестра таланта.

Используем сжатие когда сайт готов

Это уже совет не совсем верстальщику, больше владельцу сайта, но на заметку каждому будет полезно. Под словом сжатие, это уже во всех смыслах. Первое — используем gzip сжатие, все что нужно это на сервере просто строку прописать, и все будет работать.

Второе, это минимизация таких файлов как css и javascript. Минимизация сделает все файлы грубо говоря в одну строку — на этом можно выиграть около 30% от размера файла.

Дальше крутым решением будет удаление и минимизация html — такая же логика как и с css и javascript файлами, но принцип немного другой. Там уже нужно покопаться в движке. 

Если интересно я могу об этом написать целый пост.

Пользуй теги по предназначению каждый тег важен

Я имею в виду, что если мы используем на странице заголовки то используем теги для заголовка, если списки то список нумерованный или ненумерованный. 

Таблицу, то лучше бы по хорошему использовать таблицу, а не верстать свой велосипед.

В общем сколько тегов столько примеров, но логика одна. Об этом я говорил выше в 10-м пункте.

Используйте CSS reset

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

Все что нужно просто вставить этот набор css правил:

/* Указываем box sizing */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* Убираем внутренние отступы */
ul[class],
ol[class] {
  padding: 0;
}

/* Убираем внешние отступы */
body,
h1,
h2,
h3,
h4,
p,
ul[class],
ol[class],
li,
figure,
figcaption,
blockquote,
dl,
dd {
  margin: 0;
}

/* Выставляем основные настройки по-умолчанию для body */
body {
  min-height: 100vh;
  scroll-behavior: smooth;
  text-rendering: optimizeSpeed;
  line-height: 1.5;
}

/* Удаляем стандартную стилизацию для всех ul и il, у которых есть атрибут class*/
ul[class],
ol[class] {
  list-style: none;
}

/* Элементы a, у которых нет класса, сбрасываем до дефолтных стилей */
a:not([class]) {
  text-decoration-skip-ink: auto;
}

/* Упрощаем работу с изображениями */
img {
  max-width: 100%;
  display: block;
}

/* Указываем понятную периодичность в потоке данных у article*/
article > * + * {
  margin-top: 1em;
}

/* Наследуем шрифты для инпутов и кнопок */
input,
button,
textarea,
select {
  font: inherit;
}

/* Удаляем все анимации и переходы для людей, которые предпочитай их не использовать */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

Я обычно для этого создаю файл с названием reset.css и подключаю внутри основного файла. Дальше просто работают с тем что есть. Если ты используешь фреймворк типа bootstrap, то ничего такого подключать не нужно. Там оно все уже встроено.

Постарайся отказаться от CSS фреймворков и пиши код сам

Кстати о фреймворках, лучше их вообще не использовать — желательно бы. Почему так? Внутри них очень много лишнего кода отказаться от которого будет достаточно не просто (хотя не во всех случаях).

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

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

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

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

Старайся изучить CSS до уровня мастера

К примеру HTML для меня кажется очень простым. Он для меня по аналогии с конфетами. Когда делаем сайт, то мы грубо говоря обворачиваем backend фантиками. И нет разницы что за материал у этого фантика, ведь мы в итоге обратим на дизайн самого фантика. Цвет, форму, размер и так дальше — все это нам дает css.

Сознаюсь даже, что я не раз обращал внимание, что html я пишу значительно меньше времени нежели css. 

Процесс такой — с помощью emmet’а накидал структуру, а после сидишь и и задаешь размеры, цвета формы. А тут еще и мобильная, охх и там стилей нужно наделать много много.

Все должно быть по уровню

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

Сначала я эту ошибку часто допускал, и постоянно получал правки на этот счет. Если что при вопросе как я получал правки при существующем дизайне — я скажу что не все заказчики дают дизайны страницы.

Многие  тыкают пальцем на сайт конкурента, и говорит хочу как у них, только не красную кнопочку а зеленую.

Вот пример не по уровню:

А вот как должно быть:

First mobile — верстаем сначала под мобильные

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

Я уже как-то даже писал статью о Mobile first, в котором я пояснял почему важно верстать сначала под мобильные а после уже под компьютеры.

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

Ютуб уже к примеру заявляли не раз что большая часть их пользователей сидит через приложение. 

Короче примеров много — хотя к примеру у меня конкретно на этом сайте около 80% пользователей с десктопа сидят по логичной причине. 

Заключение — не допускай ошибки в верстке!

Ничего так да? Можно было закончить и на заголовке но я должен сказать несколько слов. Все советы которые я написал выше, логически правильные и я уверен что даже если ты не согласен с каким-то из имеющихся пунктов, то рано или поздно ты придешь к тому, что написано здесь.

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

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

Оставьте комментарий