Ошибки новичков при верстке сайтов #2
На этом уроке продолжим разбор ошибок начинающих верстальщиков. Первые две ошибки были связаны с использованием строчных и блочных элементов.
Ошибка #3. Названия классов не на английском
Названия классам нужно давать только на английском языке. Не нужно писать русские слова латиницей. Для тех, кто затрудняется с английским, есть шпаргалка по словам на гитхабе.
Ошибка #4. Прописывание стилей в атрибуте style
Все стили нужно прописывать во внешнем CSS файле, за исключением вёрстки email писем. Избегайте прописывать стили непосредственно в HTML тегах.
<div style="font-size: large;"></div>
В каких случаях можно применять инлайновые стили?
- при верстке е-mail писем
- для управления стилями из админки различных CMS
Ошибка #3. Использование id для стилизации элементов.
Для стилизации элементов нужно использовать только классы. Оставьте уникальные идентификаторы (id) для обращения к элементам из JavaScript.
Ошибка #5. Неоптимизированные изображения
Нельзя загружать на рабочий сайт найденные в интернете или полученные от заказчика картинки оригинальных размеров. Вес таких изображений может достигать несколько мегабайт. Необходимо уменьшить их физические размеры по ширине и высоте, а также оптимизировать через специальные сервисы по сжатию изображений.
Ошибка #6. Не сбрасывают дефолтные настройки браузеров
У всех браузеров есть свои настройки для отображения внешнего вида некоторых тегов (h1-h6, margin, padding и другие). Чтобы верстка выглядела во всех браузерах одинаково, нужно сбрасывать все браузерные стили. Рекомендую использовать файл normalize.css. В нем прописаны некоторые CSS правила с обнуляемыми или оптимальными значениями.
Ошибка #7. Не используют семантические теги
Семантические теги надо использовать для разбиения кода верстки на логические блоки. В коде, где используются семантические теги проще всем ориентироваться. Это не будет считаться грубой ошибкой, если вы напишите так:
<div class="header"></div>
<div class="footer"></div>
Однако, такой метод записи кода уже не актуален. Следует писать код так:
<header class="header"></header>
<footer class="footer"></footer>
Ошибка #8. Перегружают код лишними дивами
Новички иногда злоупотребляют лишними тегами div - оборачивают все что можно обернуть, в основном строчные теги a, span. Здесь нужно придерживаться правила: Если можно обойтись без обертки, то не нужно писать тег div на всякий случай.
<div class="image">
<img src="" alt="">
</div>
Почему новички так делают, вполне понятно. Например тексту внутри строчного тега span нельзя задать позиционирование, поэтому его сначала оборачивают в тег div. А затем, уже к тегу div применяют позиционирование. Как это обойти? Очень просто, отображаете строчный элемент, как блочный. Нужно прописать в стилях свойство display: block.
// неправильно
<div class="name">
<span>Madlen</span>
</div>
// правильно
<span class="name">Madlen</span>
.name {
display: block;
}
Ошибка #9. Большой уровень вложенности у селекторов
Как грамотно сформировать селекторы для вложенных тегов?
<header class="header">
<nav class="top-nav">
<ul class="top-navbar">
<li></li>
</ul>
</nav>
</header>
Часто можно встретить в CSS стилях многоуровневую вложенность. Например для стилизации тега li, начинают перечислять всю эту пирамиду из внешних тегов. Так писать нельзя.
.header .top-nav .top-navbar li {}
Цепочка обращения к каждому тегу нужно делать максимально короткой. Каждый класс следует стилизовать отдельно.
.header {}
.top.nav {}
.top-navbar {}
Допустим максимальный уровень вложенность - это когда один элемент лежит внутри другого.
.top-navbar li {}
-
Создано 14.09.2020 10:21:52
-
Михаил Русаков
Комментарии (1):
Действительно, Михаил как всегда прав, всё это частенько мы игнорируем. Спасибо за подсказку.
Ответить
Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.