Как должен выглядеть CSS?

Правильно написанный CSS должен быть читаемым, предсказуемым, легко поддерживаемым и масштабируемым. Это не просто набор правил, а структурированная система, где каждый селектор и свойство находятся на своих местах. Хороший CSS следует методологии (например, БЭМ), минимизирует дублирование, использует семантические имена классов и грамотно работает с каскадом. Ниже — подробные принципы, примеры и антипаттерны, которые помогут вам писать профессиональный код.

Основные принципы хорошего CSS-кода

1. Читаемость выше «креативности»

CSS пишут не для машины (ей всё равно), а для людей — вас и ваших коллег. Код должен быть понятен без лишних комментариев.

• Каждое правило с новой строки.
• Отступы внутри блока (обычно 2 или 4 пробела).
• Один пробел после двоеточия (стиль: property: value;).
• Закрывающая фигурная скобка на новой строке.
• Разделение логических блоков пустыми строками.

Пример хорошего форматирования:

.card {
    display: flex;
    flex-direction: column;
    padding: 20px;
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.card__title {
    font-size: 1.25rem;
    font-weight: bold;
    margin-bottom: 10px;
}

.card__text {
    color: #666;
    line-height: 1.5;
}

2. Единообразие (стилизация кода)

Выберите один стиль и придерживайтесь его во всём проекте. Это касается кавычек (используйте двойные), форматирования цветов (шестнадцатеричные, rgb, hsl — единообразно), написания свойств (например, сначала размер, потом цвет).

3. Семантические имена классов (не по цвету, а по смыслу)

Плохой пример: .red-text, .blue-button, .left-sidebar. Что делать, когда текст станет синим, а кнопка — красной? Переименовывать классы во всей вёрстке.

Хороший пример: .warning-text (текст ошибки), .primary-button (главная кнопка), .main-sidebar (боковая колонка). Имена отражают роль элемента, а не его внешний вид.

4. DRY (Don't Repeat Yourself) — не повторяйтесь

Если вы написали одно и то же свойство для десяти разных селекторов — вы делаете что-то не так. Выносите повторяющиеся стили в общий класс или используйте препроцессоры (@extend, mixins).

Организация CSS-файлов (структура проекта)

Для проектов больше одной страницы не стоит сваливать все стили в один гигантский файл. Типовая архитектура (по методологии 7-1):

sass/
|– abstracts/ (миксины, переменные, функции)
|– base/ (сброс стилей, базовые теги)
|– components/ (карточки, кнопки, формы)
|– layout/ (шапка, подвал, сетка)
|– pages/ (стили конкретных страниц)
|– themes/ (темы оформления)
|– vendors/ (сторонние библиотеки)
`– main.scss (главный файл, который импортирует всё)

Методологии написания CSS (обязательно к изучению)

БЭМ (Блок, Элемент, Модификатор)

Самая популярная методология в рунете. Формат: .block__element--modifier.

• Блок — самостоятельный компонент (.card, .header).
• Элемент — часть блока (.card__title, .card__image).
• Модификатор — состояние или вариант блока (.card--featured, .button--disabled).

Плюсы: понятная структура, нет конфликтов имён, легко масштабировать.

Современный подход: CSS-in-JS и Utility-first (Tailwind)

Сейчас набирает популярность подход, где CSS пишется прямо в JS-компонентах (styled-components) или используются атомарные классы (Tailwind CSS). Он даёт высокую скорость разработки, но требует привыкания.

Распространённые ошибки начинающих (как НЕ надо писать)

• Использование !important везде: признак плохой архитектуры. Реальная необходимость возникает в 1% случаев.
• Слишком глубокая вложенность: .header .nav .menu .item .link. Это создаёт высокую специфичность и жёсткую привязку к структуре HTML.
• Магические числа: margin-top: 17px; откуда 17? Если это не часть сетки с ритмом — будет выглядеть случайно.
• Огромный файл без комментариев: через 2 месяца вы забудете, зачем написали те или иные стили.
• Смешивание вендорных префиксов и стандартных свойств вразнобой: -webkit-border-radius должен идти сразу перед стандартным border-radius.

Базовые принципы организации CSS-правил внутри блока

Внутри одного селектора порядок свойств не обязателен для работы, но важен для читаемости. Рекомендуемая группировка:

1. Позиционирование (position, top, left, z-index).
2. Блочная модель (display, margin, padding, width, height).
3. Типографика (font, color, text-align, line-height).
4. Визуальное оформление (background, border, box-shadow, opacity).
5. Анимации и трансформации (transition, transform, animation).

Это не жёсткое правило, но оно помогает быстро ориентироваться в чужом коде.

Как CSS должен работать с сайтом (подключение)

Есть три способа, и правильный — только один для серьёзных проектов.

Правильный: внешний файл (ссылкой в head)

<link rel="stylesheet" href="/styles/main.css">

Плюсы: кэширование браузером, разделение контента и оформления.

Неправильный для продакшена: внутренний CSS (тег style)

<style> .card { ... } </style>

Годится только для прототипов или email-писем.

Избегайте: инлайновый CSS

<div style="color: red;">

Это кошмар поддержки: смешение контента и стилей, высокий приоритет, сложно переопределять.

Адаптивный CSS — обязательное требование времени

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

• Медиа-запросы: @media (max-width: 768px) { ... } для мобильных устройств.
• Относительные единицы: rem, em, %, vw, vh вместо абсолютных px для адаптивности.
• Гибкие сетки: Flexbox и Grid, а не таблицы или float.

Современные фишки, которые должен знать каждый

• clamp() — для резиновой типографики: font-size: clamp(1rem, 2.5vw, 2rem);
• container queries — адаптация компонента от размера родителя, а не окна браузера.
• CSS-переменные (--primary-color: #345;) — для тем и упрощения поддержки.
• :has() — родительский селектор (меняем стиль родителя, если внутри есть определённый элемент).

Инструменты для проверки качества CSS

• Stylelint — линтер для CSS (проверяет синтаксис, порядок свойств, именование).
• Prettier — автоматическое форматирование кода.
• Chrome DevTools (Coverage) — показывает, сколько CSS не используется, помогает чистить.

Как CSS связан с CMS и конструкторами

Если вы работаете с CMS, например с Joomla или WordPress, ваши CSS-правила могут переопределяться стилями плагинов и тем. Чтобы избежать конфликтов, пишите стили с достаточной специфичностью и не забывайте про приоритет источника. В конструкторах вроде SitePro.by кастомный CSS добавляется в специальный блок — там те же правила хорошего тона работают.

Краткий чек-лист: как должен выглядеть ваш CSS

Перед тем как считать задачу выполненной, проверьте свой CSS по этим пунктам:

• [ ] Код отформатирован единообразно (отступы, кавычки).
• [ ] Имена классов говорят о функции, а не о цвете/расположении.
• [ ] Нет дублирования одинаковых значений (DRY).
• [ ] Минимум вложенности (редко больше 3 уровней).
• [ ] Адаптивность (медиа-запросы + гибкие единицы).
• [ ] Нет !important без крайней необходимости.
• [ ] Цвета в едином формате (hex или hsl).
• [ ] Порядок свойств логичен (блочная модель → типографика → оформление).
• [ ] Комментарии к неочевидным местам.
• [ ] CSS-файлы разбиты на логические части.

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