10 хороших практик CSS

Каждый разработчик через это проходил – борьба с CSS, который сначала казался простым, но быстро становился громоздким. В этом руководстве мы рассмотрим распространенные подводные камни CSS и их современные, поддерживаемые решения. Давайте превратим ваш CSS из проблемного в профессиональный!

1. Юниты: освобождение от пикселей

Неправильный путь:

.container {
    width: 1200px;
    font-size: 16px;
    margin: 20px;
}

Лучший способ:

.container {
    width: 90vw;
    max-width: 75rem;
    font-size: 1rem;
    margin: 1.25rem;
}

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

2. Сброс CSS: начинаем с чистого листа

Неправильный путь:

/* Запуск без сброса настроек, с использованием настроек браузера по умолчанию */

Лучший способ:

*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    font-size: 16px;
    -webkit-text-size-adjust: 100%;
}

Сброс CSS обеспечивает единообразный рендеринг в разных браузерах. 
box-sizing: border-box Свойство делает расчет ширины интуитивно понятным, включая отступы и границы в общую ширину элемента.

3. Flexbox против Float: современные решения для макетов

Неправильный путь:

.container {
    overflow: hidden;
}
.sidebar {
    float: left;
    width: 300px;
}
.main {
    margin-left: 320px;
}

Лучший способ:

.container {
    display: flex;
    gap: 1.25rem;
}
.sidebar {
    flex-basis: 18.75rem;
    flex-shrink: 0;
}
.main {
    flex-grow: 1;
}

Flexbox обеспечивает мощные, гибкие макеты с меньшим количеством кода. Он обрабатывает интервалы, выравнивание и адаптивность более элегантно, чем плавающие элементы, и лучше поддерживается в современных браузерах.

4. Управление цветом: переменные для обеспечения согласованности

Неправильный путь:

.button {
    background-color: #007bff;
}
.link {
    color: #007bff;
}

Лучший способ:

:root {
    --primary-color: #007bff;
    --primary-hover: #0056b3;
}

.button {
    background-color: var(--primary-color);
}
.button:hover {
    background-color: var(--primary-hover);
}
.link {
    color: var(--primary-color);
}

Переменные CSS (пользовательские свойства) упрощают поддержание согласованных цветов и позволяют переключать темы. Они также делают ваш код более удобным для поддержки и снижают риск несоответствий.

5. Медиа-запросы: подход, ориентированный на мобильные устройства

Неправильный путь:

/* Desktop-first approach */
.container {
    width: 1200px;
}
@media (max-width: 768px) {
    .container {
        width: 100%;
    }
}

Лучший способ:

/* Mobile-first approach */
.container {
    width: 100%;
}
@media (min-width: 48em) {
    .container {
        width: 90%;
        max-width: 75rem;
    }
}

Mobile-first design гарантирует, что ваши базовые стили будут работать на небольших устройствах, а затем постепенно улучшать взаимодействие с большими экранами. Такой подход обычно приводит к более чистому и более удобному для обслуживания коду.

6. Конкретность: простота

Неправильный путь:

#header div.navigation ul li a.active {
    color: blue;
}

Лучший способ:

.nav-link--active {
    color: var(--primary-color);
}

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

7. Типографика: гибкий размер шрифта

Неправильный путь:

h1 {
    font-size: 32px;
}

Лучший способ:

h1 {
    font-size: clamp(1.75rem, 5vw, 2.5rem);
    line-height: 1.2;
}

Использование 
clamp() создает адаптивную типографику, которая плавно масштабируется между минимальными и максимальными размерами. Это устраняет необходимость в нескольких медиазапросах только для размеров шрифтов.

8. Макет сетки: правильные системы карт

Неправильный путь:

.card {
    width: calc(33.33% - 20px);
    float: left;
    margin: 10px;
}

Лучший способ:

.card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
    gap: 1.25rem;
}

CSS Grid с auto-fit и minmax() создает адаптивные макеты, которые автоматически подстраиваются под доступное пространство. Этот подход требует меньше кода и лучше обрабатывает крайние случаи.

9. Анимация: оптимизация производительности

Неправильный путь:

.element {
    transition: all 0.3s ease;
}

Лучший способ:

.element {
    transition: transform 0.3s ease, opacity 0.3s ease;
    will-change: transform;
}

Укажите точные свойства для анимации вместо использования all, и используйте  transform и ,  opacity когда это возможно, так как они оптимизированы для производительности. Используйте 
will-change умеренно для часто анимируемых элементов.

10. Пользовательские свойства для вариантов компонентов

Неправильный путь:

.button-primary {
    background: blue;
    padding: 10px 20px;
}
.button-secondary {
    background: gray;
    padding: 10px 20px;
}

Лучший способ:

.button {
    --button-bg: var(--primary-color);
    --button-padding: 0.625rem 1.25rem;

    background: var(--button-bg);
    padding: var(--button-padding);
}

.button--secondary {
    --button-bg: var(--secondary-color);
}

Использование пользовательских свойств CSS для вариантов уменьшает дублирование кода и делает компоненты более удобными для обслуживания. Это также упрощает создание согласованных вариаций в вашей системе дизайна.

Заключение

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