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

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

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

Описание стилей блока идентификатором #id

Для определения стиля блока используется идентификатор #id или класс .class-name. Первый вариант дает возможность выбрать один элемент. Второй выбирает группу элементов.

Задавая одинаковый #id для нескольких элементов на странице, браузер может проигнорировать оформление. В отдельных случаях, может дойти до отказа открывать CSS-файл. Также, #id используют для передачи информации в JavaScript. Если использовать данный элемент везде, можно запутаться в собственном коде. 

Чтобы решить проблему, возьмите за правило использование для описаний стилей блока имена классов .class-name. Идентификатор #id используйте только для передачи данных в JavaScript.

Ошибочные имена классов

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

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

Разметка тегом <p>

Когда браузер находит содержимое тега <p>, он самостоятельно добавляет некоторые отступы. Это позволяет визуально отобразить текст отдельным блоком. Молодые верстальщики любят распространять этот эффект и на картинки, оборачивая их в <p>.

Это неверный подход, а использовать можно только <span> и <div> для разметки страницы. Отдельно для данных элементов прописываются стили, придающие внешний вид странице.

В атрибут style добавлять описание стилей

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

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

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

Загрузка больших картинок

Если не знакомы с тонкостями SEO-продвижения, не страшно. Дело опыта, но создавать юзерфрендли интерфейс для программиста обязательно. Большие картинки являются самым сильным фактором, негативно влияющим на пользовательский опыт.

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

Вставка блочных элементов в строчные

Не знаем, на каком этапе обучения находится читающий, но напомним: в html существуют блочные и строчные элементы. Первыми выстраивается структура страницы.

Строчные элементы располагаются ТОЛЬКО в блочных, никак не наоборот. Они отвечают за наполнение страницы. Задача корректного отображения лежит только на блоках.

Игнорирование сброса настроек

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

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

Отдавать работу без проверки валидатора

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

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

Использование <br> для создания отступов между элементами

Тег <br> действительно может выполнять такую функцию, но нельзя использовать его для отступов между картинками, словами и элементами. Это строчный тег, а его нельзя использовать для разделения блоков.

Боитесь нагромождения кода? Используйте CSS-файл! Просто пропишите все требуемые отступы.

Пропуск указания типа страницы

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

Заведите привычку начинать любой файл с <!DOCTYPE html> с указанием версии. Это первая строчка файла и ее трудно упустить.

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

Оцените статью