Приветствую! Сегодня хочется рассмотреть самые сложные темы, с которыми сталкиваются начинающие верстальщики, и не сразу понимают, как с ними быть. Тут для примера могу взять хотя бы своих студентов со Skillbox. Поехали!
Вообще верстку можно подразделять на уйму разных тем, но я затрону в статье самые основные (самые непростые темы). Порядок будет не по важности, а просто любой.
Классы или id?
Одна из самых частых проблем — использование классов или id. Часто начинающие верстальщики видят что-то про id и начинают его использовать где не надо. Давайте сразу определимся — id нужно использовать для js. Допустим, Вам нужно вызвать плагин на определенном блоке — можете использовать id (хотя и это необязательно, разве что сам плагин может быть завязан только на работу с id). Так же, как вариант, это конечно использование плавной прокрутки к якорям. указываете href=»#services», а у блока пишите id=»services».
Но почему собственно id использовать не рекомендуется? Очень просто:
- Ну, во-первых, его можно использовать лишь раз (т.е. если у вас есть id=»services» — больше нигде его написать Вы не сможете). Это лишает нас гибкости и переиспользования.
- На один элемент можно повесить лишь один id. В то время как классов (будь то классы элемента или модификатора) — много.
- id слишком увесистый. Перебить id классом не получится без !important, а его следует по максимуму избегать в верстке.
Вот собственно этих причин вполне хватит, чтобы отказаться использовать id (как минимум для стилизации).
Работа с формами
Частая ошибка начинающих — неверное понимание работы тега form и различных input`ов. Например, для двух радиокнопок задаются разные имена, и в итоге можно кликнуть на каждый (хотя это, к примеру, выбор пола). Для группы чекбоксов задаются везде разные имена, хотя нужно писать одно и использовать квадратные скобки, чтобы была возможность отправить все это как пару «ключ: значение» на почту. Как раз тут можно прочесть про это.
Еще одна из частых ошибок — это неправильное использование label и его атрибута for. Но тут в целом попроще.
Использование старых тегов
Тут сильно надолго не будем останавливаться, просто скажу — нужно проверять спецификацию, заглядывать в валидатор. И не использовать теги типа font, которые устарели довольно давно.
Проблемы с использованием float
Да, флоаты уже тоже порядком устарели, но лично я считаю что база по ним обязана быть у любого верстальщика. Мало ли что попадется в проектах. Ну и конечно, главная «особенность» флоатов — это их баг с выпаданием флоат-блоков. Многие начинающие верстальщики этого не замечают и оставляют как есть, а потом это может привести к полностью поехавшей верстке. Используйте clearfix — и будет Вам счастье :)
Position
Самая наверное больная тема всех начинающих — это position. Многие начинают делать все через absolute, некоторые двигают элементы, используя relative и top, left, right, bottom, когда есть margin. Это все достаточно непростая тема для понимания, но и не самая сложная. Достаточно просто заучить и попрактиковаться. Кстати, можете посмотреть на мои небольшие примеры правильного использования absolute:
https://codepen.io/MaxGraph/pen/KbGwLE
https://codepen.io/MaxGraph/pen/MZPYMM
<img> или background?
Последняя на сегодня тема, но тоже довольно важная. Многие используют тег img вместо background-image, и наоборот. Хотя здесь все довольно просто — иконки это фон, а контентные картинки (как картинка к статье, например) — img. Но, есть исключения, например если над иконкой будут производиться какие-либо анимации, бывает, что лучше использовать именно img.
Это были главные (на мой взгляд) темы из верстки, на которые нужно обратить внимание начинающим верстальщикам. Да, наверняка это не все, но наверное самое важное.
Пишите свои мысли об этом, может быть у Вас есть какие-то еще предложения.
А если хотите разбор этих тем от меня — пишите!
Подписывайтесь на блог: https://blog.maxgraph.ru/ - там много всего интересного)