Опубликовано:

9 распространённых ошибок в CSS, которые мы совершаем

Источник: «9 Common CSS Mistakes We Make»
Каскадная таблица стилей (CSS) — это мощный язык стилей, помогающий фронтенд разработчикам оформлять обычные веб-страницы. Однако при использовании этого языка стилей можно допустить ряд ошибок мешающих писать эффективный код. В данной статье рассматриваются некоторые распространённые ошибки и предлагается решение для каждой из них.

Чрезмерное использование !important

!important — ключевое слово в CSS, позволяющее установить для значения свойства более высокий приоритет (более важное значение) по сравнению с другими вариантами стилей. Например, если применить декларацию !important к стилю элемента, то этот стиль будет перекрывать все остальные стили для данной категории свойств. Вот синтаксис:

selector {
  property: value !important;
}

Например, если у вас есть элемент заголовка — h1 примерно такой:

<h1 class="css-mistake">CSS Mistakes</h1>

Затем применяются следующие правила стилей:

h1 {
 color: red;
}
.css-mistake {
 color: green;
}

По умолчанию текст заголовка будет иметь зелёный цвет, поскольку селектор класса имеет более высокую CSS-специфичность, чем селектор элемента (тега). Но с помощью !important можно отменить это CSS-правило стилизации (тем самым селектор элемента (тега) отменяет селектор класса). Таким образом, цвет текста заголовка будет красным, имеющим приоритет перед зелёным, который задаёт селектор класса.

h1 {
 color: red !important;
}

Чрезмерное использование !important приводит к войне специфичности — состоянию, когда стили начинают переопределять друг друга и работать не так, как их определил автор таблицы стилей. Далее предлагается решение этой проблемы путём определения подходящих случаев для использования !important.

Когда следует использовать !important

Как сказано в названии этого раздела — Чрезмерное использование !important>, так и следует быть осторожным с использованием этого ключевого слова. !important следует использовать очень редко, только тогда, когда в этом есть крайняя необходимость. Вот несколько примеров такого использования:

Использование абсолютных единиц

Использование правильных единиц длины при создании стиля очень важно для создания отзывчивого дизайна. В CSS существует две категории единиц измерения длины: абсолютные и относительные. Многие свойства CSS, такие, как width, height, font-size и т.д., используют единицы для представления своих значений. В фрагменте кода ниже приведён пример использования единицы измерения:

selector {
 font-size: 14px;
}

В представленном выше фрагменте кода мы объявили CSS-свойство font-size, а затем присвоили ему значение 14px.

Что такое абсолютные единицы

Это единицы длины с фиксированными значениями, не зависящими от среды визуализации — от размера экрана устройства. Эти единицы отлично подходят для сохранения одинаковых размеров элементов на экранах различных размеров. К стандартным абсолютным единицам, с которыми вам приходилось работать, относятся пиксели — px, пункты — pt, дюймы — in, миллиметры — mm, сантиметры — cm и типографские пики — pc.

Абсолютные единицы дают нам точные, фиксированные и конкретные значения стилей, но они не масштабируются в зависимости от размера экрана. Абсолютные единицы не подходят для достижения отзывчивости. Поэтому следует ограничить их использование элементами, которым не нужно адаптироваться к размерам браузера или экрана устройства.

С другой стороны, относительные единицы, как следует из названия, являются относительными по отношению к другому свойству (в большинстве случаев к родительскому элементу). Эти единицы являются гибкими, поскольку динамически увеличиваются, подстраиваясь под область просмотра, что позволяет использовать их для реализации отзывчивого дизайна, в отличие от абсолютных единиц. Примерами относительных единиц являются проценты (%), rem, em и т.д.

Как применять относительные единицы измерения и их интерпретация

Понимание значения каждой относительной единицы позволяет эффективно их использовать. Ниже приведены некоторые относительные единицы и их пояснения:

Использование встроенного/инлайн стиля

Встроенный стиль — это система стилизации, при которой стиль передаётся непосредственно элементу HTML через атрибут style. Несмотря на существование этой системы стилей, необходимо понимать, что её использование не соответствует лучшим практикам построения приложений, поскольку создаёт невоспроизводимый код. Используйте встроенный стиль только при тестировании или украшении простого HTML-файла. Вот несколько причин, по которым следует избегать этой системы стилей:

Лучшие практики

Чтобы преодолеть недостатки встроенного стиля, необходимо использовать внутренние таблицы стилей (стили внутри тега <style>) или внешние таблицы стилей, позволяющие сохранить код здоровым и организованным.

Не используйте сброс CSS

Различные браузеры имеют различные стили по умолчанию, отличающиеся друг от друга, что приводит к несовместимому внешнему виду элементов. Именно поэтому необходимо определить некоторые стили, чтобы сделать веб-страницы единообразной отправной точкой для стилизации в различных браузерах. Эти стили называются "сбросами CSS". Сбросы CSS — это CSS стили, которые служат в качестве правил для удаления стилей по умолчанию, поставляемых с браузером. Если вы знакомы с CSS, то иногда замечали, что для некоторых специфических свойств, например margin, существует стиль по умолчанию. Сброс CSS помогает нам выровнять стили, чтобы они были последовательными. Вот причины, по которым используются сброс CSS:

Как создавать собственный сброс CSS

Вот простые шаги, которые необходимо выполнить:

Приведённый выше код представляет собой фундаментальный CSS-сброс, который нацелен на свойства margin, padding и border и присваивает каждому из них значение 0. Этот процесс называется "нормализацией", поскольку он нейтрализует интервалы и границы, установленные браузером по умолчанию. Вот некоторые способы сброса CSS в Интернете:

Неиспользование в CSS однострочных правил

Однострочные правила в CSS — это сокращённые стили для написания CSS-кода. Они делают код более чистым и хорошо структурированным. Знание таких сокращений поможет вам писать более лаконичный код (сжатие нескольких строк кода в одну строку). Например, если вы хотите придать элементу стиль margin со всех сторон (сверху, снизу, слева и справа), вам не нужно явно указывать все свойства, такие как margin-top, margin-right, margin-bottom и margin-left, вы можете просто использовать сокращение для свойства margin. Приведённый ниже код поясняет это:

/* Не делайте так*/
margin-top: 10px;
margin-bottom: 10px;
margin-right: 15px;
margin-left: 15px;
/* Вместо этого используйте сокращение margin */
margin: 10px 20px 10px 20px;
/* Сокращение margin может быть даже более упрощённым */
margin: 10px 20px;

Эти односложные правила дают отличные преимущества:

Неэффективное использование селекторов

CSS-селекторы нацелены на HTML-элементы во внешней или внутренней таблице стилей. В CSS существует множество методов селекторов, включая теги (элементы), классы, идентификаторы и псевдоэлементы Знать, когда можно использовать селектор, а когда нет, крайне важно. Кроме того, необходимо знать, как работают селекторы CSS.

Как избежать использования слишком сложных селекторов

Если в таблице стилей вы встретите фрагмент кода, подобный приведённому ниже, значит, вы используете слишком сложные селекторы.

#container > .box > content .section .title p > span .italic {
 color: blue;
 font-weight: bold;
}

Вот советы, как избежать чрезмерно сложных селекторов:

Игнорирование браузерной совместимости

Совместимость с браузерами очень важна, поскольку вы не хотите, чтобы стиль хорошо функционировал в одном браузере и не работал в другом. Игнорирование совместимости браузеров может привести к несовместимости пользовательского опыта в разных браузерах. Это связано с тем, что различные браузеры по-своему отображают стили CSS. Однако учитывая совместимость браузеров и обеспечивая совместимость стилей с различными браузерами, можно добиться единообразия стилей. Одним из способов достижения совместимости кода с браузерами является следующая реализация:

Использование названий цветов вместо шестнадцатеричных кодов

Шестнадцатеричные коды — это шестнадцатеричное представление цветов. Это 6-значный код с префиксом в виде символа #, за которым следуют три пары шестнадцатеричных цифр, где первая пара представляет собой значение красного цвета, вторая пара — зелёного, а последняя — синего. Синтаксис:

selector {
 color: #rrggbb;
}

Использование прямых цветовых ключевых слов имеет некоторые ограничения:

Эффективный способ поиска Hex-кодов

Вот несколько способов получения Hex-кодов:

Дополнительные ошибки, которые мы не замечаем

Заключение

Статья посвящена распространённым CSS-ошибкам, и в ней предлагаются оригинальные решения для каждой ошибки. Прочитав это руководство, вы, несомненно, узнали о некоторых знакомых ошибках в CSS и теперь будете знать, как с ними бороться, поскольку мы также рассмотрели решение для каждой ошибки. Не стесняйтесь оставлять свои мысли в комментариях. Если вы нашли статью полезной, поделитесь со своими друзьями. Спасибо.

Предыдущая Статья

Оптимизация Laravel Eloquent запросов

Следующая Статья

Переменные среды/окружения в Node.js: Как правильно их установить