7 ошибок CSS, которых следует избегать новичку
Освоение CSS может потребовать много практики и усилий. Дайте себе больше шансов на успех, избегая этих распространенных ошибок.
Работа с каскадными таблицами стилей (CSS) может оказаться сложной задачей для новичков. Используя CSS, вы можете структурировать, обновлять и поддерживать внешний вид вашего приложения. Но язык требует навыков манипулирования HTML-страницами для получения желаемого макета.
Вот некоторые ошибки, которых следует избегать при работе с CSS. Они сэкономят вам время и облегчат процесс разработки.
1. Использование пикселей для размеров шрифта
Единица «px» представляет пиксели. Вы можете использовать его для выражения различной длины на веб-странице: от ширины и высоты элемента до размера его шрифта.
Однако px фиксирует фиксированный размер вашего дизайна для всех экранов. Изображение в пикселях может занимать всю ширину одного экрана и лишь небольшую часть другого. Если вам нужен более пропорциональный элемент, используйте относительные измерения, такие как rem или проценты (%).
Лучшее относительное измерение — это бэр. Эта единица измерения относится к размеру шрифта корневого элемента, который читатель часто может установить в настройках своего браузера. Вы можете увидеть влияние px и rem на элемент в следующем примере:
<!DOCTYPE html>
<HTML>
<head></head>
<body>
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
</body>
</html>Вы можете задать размеры шрифта в этом документе, используя единицы пикселей, с помощью следующего CSS:
h1 {
font-size: 50px;
}
h2 {
font-size: 30px;
}
p {
font-size: 15px;
}Полученная страница выглядит приемлемо, если просмотреть ее на большом экране:
Но на меньшем экране, как на телефоне, выглядит не презентабельно:
Затем примените rem к тому же содержимому. Укажите базовый размер шрифта для элемента html и задайте размер других элементов с помощью rems, как показано ниже:
html {
font-size: 16px;
}
h1 {
font-size: 3rem;
}
h2 {
font-size: 2rem;
}
p {
font-size: 1rem;
}Обратите внимание на разницу между большими и маленькими экранами. Благодаря rem контент лучше масштабируется независимо от размера экрана. Элементы никогда не превысят установленный размер экрана. Вот почему лучше использовать относительные длины, а не пиксели.
На экране рабочего стола:
На маленьком экране текст в ремах по-прежнему читается:
2. Помещение всех ваших стилей в один файл
Использование одного файла CSS для большого проекта может создать беспорядок. У вас будет файл с длинными строками кода, который будет сбивать с толку при обновлении. Попробуйте использовать разные файлы таблиц стилей CSS для разных компонентов.
Например, у вас могут быть разные файлы для навигации, верхнего и нижнего колонтитула. И еще один для участков на теле. Разделение файлов CSS помогает структурировать ваше приложение и повысить удобство использования кода.
3. Неправильное использование встроенного CSS
В ванильном CSS вы можете писать стили на HTML-страницах так же, как в таких CSS-фреймворках, как Bootstrap и TailwindCSS. Встроенный CSS позволяет применить уникальный стиль к элементу HTML. Он использует атрибут стиля элемента HTML.
Следующий код является примером встроенного CSS.
<h2 style="color:green;">This is a Green Heading</h2>
<p style="color:red;">This is a red paragraph.</p>Текст будет выглядеть так:
Однако HTML со встроенным CSS может быть беспорядочным. Поскольку другого места для CSS нет, весь CSS находится в том же файле, что и HTML. Это будет выглядеть многолюдно. Редактировать такой файл сложно, особенно если это не ваш код.
Кроме того, при использовании встроенного CSS вам придется писать код для каждого элемента. Это увеличивает повторение и уменьшает повторное использование кода. Всегда используйте комбинацию внешних таблиц стилей и встроенного CSS для стилизации веб-страниц.
4. Злоупотребление !important
В CSS правило !important придает большую важность свойству/значению. Он переопределяет другие правила стиля для этого свойства этого элемента.
В вашем коде должно быть всего несколько !important правил. Используйте его только при необходимости. Нет смысла писать код, а затем переопределять его. Ваш код будет выглядеть беспорядочно и вызывать проблемы при запуске на некоторых устройствах.
<!DOCTYPE html>
<html>
<head></head>
<body>
<p> I am orange </p>
<p class="my-class"> I am green </p>
<p id="my-id"> I am blue. </p>
</body>
</html>CSS:
#my-id {
background-color: blue;
}
.my-class {
background-color: green;
}
p {
background-color: orange !important;
}
Результат такой:
5. Несоблюдение соглашений об именах
В CSS существуют соглашения об именах, которые помогают разработчикам писать стандартный код. Это важно, если вам придется отлаживать файл CSS в будущем.
Один из этих стандартов включает использование дефисов для разделения сгруппированных слов. Другой вариант — назвать селектор в соответствии с тем, что он делает. Так что любому, кто смотрит на это, не придется гадать. Это также упрощает чтение, поддержку и обмен кодом. Например:
Вместо этого:
.image1 { margin-left: 3%; }Напишите это так:
.boy-image { margin-left: 3%; }Просматривая таблицу стилей, вы точно будете знать, для какого изображения предназначен код. В руководстве по стилю HTML/CSS от Google перечислено множество других соглашений, которые должен знать каждый разработчик.
6. Оставляем код без комментариев
Написание комментариев — самый недооцененный навык в программировании. Многие люди забывают писать комментарии для объяснения своего кода. Но это экономит время. Комментарии необходимы для чтения и поддержки кода.
Поскольку CSS слабо структурирован и каждый может разработать свои собственные соглашения, комментарии жизненно важны. Использование хорошо структурированных комментариев для пояснения вашей таблицы стилей — хорошая практика. Вы можете писать комментарии, объясняющие разделы кода и то, что они делают.
/* video elements need space to breathe */
.video {
margin-top: 2em;
}
/* styling the hero section */
.salutation {
margin-top: 1em;
}7. Невозможность предварительного проектирования
Многие люди так делают, но начинать программировать без плана — серьезная ошибка. CSS определяет, как выглядит структура вашего интерфейса. Дизайн многое говорит о ваших навыках программирования.
Дизайн вашего сайта проясняет ваше видение и ресурсы, необходимые для его реализации. Создайте мысленную картину своего проекта. Затем спроектируйте его на бумаге или воспользуйтесь набором инструментов для дизайна, например Canva, чтобы визуализировать то, что вы хотите.
Когда у вас будет полное представление о проекте, соберите все свои ресурсы и начните программировать. Это сэкономит вам время и избыточность.
Почему вам следует учитывать эти рекомендации
Если вы разрабатываете приложения в Интернете, вы будете использовать CSS. Хорошая работа с CSS требует практики и следования стандартным соглашениям. Соглашения не только делают ваш код читабельным, но и удобным в сопровождении.
Написание стандартизированного кода сэкономит вам время и усилия. Время, которое вы потратили бы на форматирование интерфейса, вы можете потратить на более сложные функции. Это также гарантирует, что вы сможете повторно использовать код и делиться им с другими. Пишите лучший код, следуя установленным соглашениям, и станьте лучшим разработчиком.