Работа с каскадными таблицами стилей (CSS) может быть сложной для начинающих. Используя CSS, вы можете структурировать, обновлять и поддерживать внешний вид вашего приложения. Но язык требует навыков манипулирования HTML-страницами для получения желаемого макета.
Вот несколько ошибок, которых следует избегать при работе с CSS. Они сэкономят ваше время и облегчат процесс разработки.
1. Использование px для размеров шрифта
Единица «px» представляет пиксели. Вы можете использовать его для выражения различной длины на веб-странице, от ширины и высоты элемента до размера его шрифта.
Однако px привязывает ваш дизайн к фиксированному размеру для всех экранов. Изображение в пикселях может занимать всю ширину одного экрана и лишь небольшую часть другого. Если вы хотите более пропорциональный элемент, использовать относительные измерения такие как бэр или проценты (%).
Лучшим относительным измерением для использования является бэр. Эта единица относится к размеру шрифта корневого элемента, который читатель часто может установить в настройках своего браузера. Вы можете увидеть влияние px и rem на элемент в следующем примере:
HTML>
<HTML>
<голова>голова>
<тело>
<h1>Это заголовок 1h1>
<h2>Это заголовок 2h2>
<п>Это абзац.п>
<п>Это другой абзац.п>
тело>
HTML>Вы можете изменить размер шрифта в этом документе, используя единицы измерения px со следующим CSS:
h1 {
размер шрифта: 50пикс.;
}h2 {
размер шрифта: 30пикс.;
}
п {
размер шрифта: 15пикс.;
}
Полученная страница выглядит приемлемо при просмотре на большом экране:
Но выглядит непрезентабельно на меньшем экране, как на телефоне:
Затем примените rem к тому же содержимому. Укажите базовый размер шрифта для элемента html и размер других элементов с помощью rems, как показано ниже:
HTML {
размер шрифта: 16пикс.;
}h1 {
размер шрифта: 3бэр;
}h2 {
размер шрифта: 2бэр;
}
п {
размер шрифта: 1бэр;
}
Обратите внимание на разницу между большими и маленькими экранами. С rem контент лучше масштабируется независимо от размера экрана. Элементы никогда не превысят установленный размер экрана. Вот почему лучше использовать относительную длину, а не пиксели.
На экране рабочего стола:
На маленьком экране текст в rem по-прежнему читаем:
2. Помещение всех ваших стилей в один файл
Использование одного файла CSS для большого проекта может создать беспорядок. У вас будет файл с длинными строками кода, который будет сбивать с толку при обновлении. Попробуйте использовать разные файлы для таблиц стилей CSS для разных компонентов.
Например, у вас могут быть разные файлы для навигации, верхнего и нижнего колонтитула. И еще один для разрезов на теле. Разделение файлов CSS помогает структурировать ваше приложение и повышает удобство использования кода.
3. Неправильное использование встроенного CSS
В vanilla CSS вы можете писать стили на HTML-страницах так же, как на Фреймворки CSS, такие как Bootstrap и TailwindCSS.. Встроенный CSS позволяет применить уникальный стиль к элементу HTML. Он использует атрибут стиля элемента HTML.
Следующий код является примером встроенного CSS.
<h2стиль="цвет: зеленый";>Это зеленый заголовокh2>
<пстиль="красный цвет;">Это красный абзац.п>
Текст будет выглядеть так:
Однако HTML со встроенным CSS может быть грязным. Поскольку для CSS нет другого места, весь CSS находится в том же файле, что и HTML. Это будет выглядеть многолюдно. Редактировать такой файл сложно, особенно если это не ваш код.
Кроме того, со встроенным CSS вам нужно написать код для каждого элемента. Это увеличивает повторение и уменьшает повторное использование кода. Всегда используйте комбинацию внешних таблиц стилей и встроенного CSS для оформления веб-страниц.
4. Злоупотребление !важно
В CSS !важный правило добавляет больше важности свойству/значению. Он переопределяет другие правила стиля для этого свойства этого элемента.
Вы должны иметь только несколько !важный правила в вашем коде. Используйте его только при необходимости. Нет смысла писать код, а затем переопределять его. Ваш код будет выглядеть беспорядочно и вызывать проблемы при запуске на некоторых устройствах.
HTML>
<HTML>
<голова>голова>
<тело>
<п> я оранжевый п>
<псорт="мои занятия"> я зеленый п>
<пидентификатор="мой ID"> Я синий. п>
тело>
HTML>CSS:
#мой ID {
фоновый цвет: синий;
}.мои занятия {
фоновый цвет: зеленый;
}
п {
фоновый цвет: апельсин !важный;
}
Результат такой:
5. Несоблюдение соглашений об именах
В CSS есть соглашения об именах, которые помогают разработчикам писать стандартный код. Это важно, если вы в конечном итоге отладка файла CSS в будущем.
Один из этих стандартов включает использование дефисов для разделения сгруппированных слов. Другой — называть селектор в соответствии с тем, что он делает. Так что любой, кто смотрит на него, не должен будет гадать. Это также упрощает чтение, поддержку и совместное использование кода. Например:
Вместо этого:
.изображение1 { поле слева: 3%; }Напишите так:
.boy-изображение { поле слева: 3%; }Глядя на таблицу стилей, вы точно будете знать, для какого изображения предназначен код. Руководство по стилю HTML/CSS от Google перечислены многие другие соглашения, которые должен знать каждый разработчик.
Написание комментариев — самый недооцененный навык в программировании. Многие люди забывают писать комментарии, чтобы объяснить свой код. Но это экономит время. Комментарии необходимы для чтения и поддержки кода.
Так как CSS имеет свободную структуру и каждый может разрабатывать свои собственные соглашения, комментарии жизненно важны. Использование хорошо структурированных комментариев для объяснения вашей таблицы стилей является хорошей практикой. Вы можете писать комментарии, объясняющие разделы кода и то, что они делают.
/* видеоэлементам нужно пространство, чтобы «дышать» */
.видео {
верхняя граница: 2Эм;
}
/* стилизация раздела героя */
.приветствие {
верхняя граница: 1Эм;
}
7. Неумение проектировать заранее
Многие так делают, но начинать программировать без плана — серьезная ошибка. CSS определяет, как выглядит структура вашего внешнего интерфейса. Дизайн многое говорит о ваших навыках программирования.
Дизайн вашего сайта проясняет ваше видение и ресурсы, необходимые для его достижения. Имейте ментальную картину вашего проекта. Затем спроектируйте его на бумаге или используйте набор инструментов для дизайна, такой как Canva визуализировать то, что вы хотите.
Когда у вас будет полная картина проекта, соберите все свои ресурсы и начните программировать. Это сэкономит ваше время и избыточность.
Почему вы должны учитывать эти рекомендации
Если вы разрабатываете веб-приложения, вы будете использовать CSS. Хорошая работа с CSS требует практики и следования стандартным соглашениям. Соглашения не только делают ваш код читабельным, но и удобным для сопровождения.
Написание стандартизированного кода сэкономит ваше время и усилия. Время, которое вы потратили бы на форматирование внешнего интерфейса, вы можете потратить на более сложные функции. Это также гарантирует, что вы можете повторно использовать код и делиться им с другими. Пишите лучший код, следуя установленным соглашениям, и станьте лучшим разработчиком.
