Последнее обновление 20.02.2023 — Василий Иванов
Такие читатели, как вы, помогают поддерживать MUO. Когда вы совершаете покупку по ссылкам на нашем сайте, мы можем получать партнерскую комиссию. Читать далее.
Работа с каскадными таблицами стилей (CSS) может быть сложной для начинающих. Используя CSS, вы можете структурировать, обновлять и поддерживать внешний вид вашего приложения. Но язык требует навыков манипулирования HTML-страницами для получения желаемого макета.
Вот несколько ошибок, которых следует избегать при работе с CSS. Они сэкономят ваше время и облегчат процесс разработки.
1. Использование px для размеров шрифта
Единица «px» представляет пиксели. Вы можете использовать его для выражения различной длины на веб-странице, от ширины и высоты элемента до размера его шрифта.
Однако px привязывает ваш дизайн к фиксированному размеру для всех экранов. Изображение в пикселях может занимать всю ширину одного экрана и лишь небольшую часть другого. Если вам нужен более пропорциональный элемент, используйте относительные измерения, такие как бэр или проценты (%).
Лучшим относительным измерением для использования является бэр. Эта единица относится к размеру шрифта корневого элемента, который читатель часто может установить в настройках своего браузера. Вы можете увидеть влияние 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>
Вы можете изменить размер шрифта в этом документе, используя единицы измерения px со следующим 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 контент лучше масштабируется независимо от размера экрана. Элементы никогда не превысят установленный размер экрана. Вот почему лучше использовать относительную длину, а не пиксели.
На экране рабочего стола:
На маленьком экране текст в 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 требует практики и следования стандартным соглашениям. Соглашения не только делают ваш код читабельным, но и удобным для сопровождения.
Написание стандартизированного кода сэкономит ваше время и усилия. Время, которое вы потратили бы на форматирование внешнего интерфейса, вы можете потратить на более сложные функции. Это также гарантирует, что вы можете повторно использовать код и делиться им с другими. Пишите лучший код, следуя установленным соглашениям, и станьте лучшим разработчиком.
