CSS — это не просто язык стилей. Это тонкий инструмент психологического давления на будущего себя, коллег и случайного разработчика, который через полгода откроет проект «просто поправить кнопку».
Если писать CSS аккуратно, с дизайн-системой, понятными токенами, переиспользуемыми компонентами и внятной структурой, то проект будет жить долго и счастливо. А нам ведь не это нужно.
Нам нужно, чтобы через неделю ты открыл styles.css, увидел там .block-new-final-2, три слоя !important, отступ margin-top: 37px и тихо закрыл ноутбук.
Разбираем, как писать CSS по-настоящему страшно.
1. Называй классы так, будто это черновик, который никто не увидит
Плохой CSS начинается с хорошего хаоса в нейминге.
Не надо никаких BEM, CSS Modules, utility-классов, дизайн-токенов или хотя бы минимальной логики. Просто называй классы по настроению.
.box {}
.box2 {}
.new-box {}
.content-wrapper-new {}
.final-card {}
.final-card-new {}
.final-card-new2 {}Особенно хорошо, если название отражает не смысл элемента, а историю твоей боли:
.fix {}
.fix2 {}
.normal {}
.almost-ok {}
.dont-touch {}Идеальный класс — это тот, который ничего не объясняет, но уже пугает.
Через неделю ты должен смотреть на .left-block-new-version и думать: «Это левый блок? Новый? Версия чего? Почему он справа?»
2. Используй !important как знак уверенности
Настоящий мастер CSS не разбирается, почему стиль не применяется. Он просто побеждает каскад силой.
.button {
color: red !important;
padding: 12px !important;
margin-top: 24px !important;
}Если не помогло — добавь ещё.
.header .nav .menu .item .link {
color: blue !important;
}!important — это не костыль. Это крик души, превращённый в синтаксис.
Главное — использовать его не только в критичных местах, а везде: в кнопках, заголовках, карточках, модалках, футере, hover-состояниях и даже там, где стиль и так прекрасно применялся.
Через неделю ты захочешь изменить цвет кнопки. Через две — поймёшь, что кнопка не меняется, потому что цвет уже «важный». Через три — напишешь ещё один !important, но уже с ощущением, что проект победил.
3. Не заводи дизайн-систему
Дизайн-система — это для слабых. Там какие-то токены, правила, сетки, состояния компонентов, типографика, палитра. Скучно.
Гораздо веселее каждый раз подбирать цвет вручную.
.card-title {
color: #222;
}
.modal-title {
color: #242424;
}
.sidebar-title {
color: #1f1f1f;
}
.footer-title {
color: #232323;
}Вроде почти одинаково. Но не совсем. И это прекрасно.
То же самое с размерами:
h1 {
font-size: 42px;
}
.page-title {
font-size: 40px;
}
.hero-title {
font-size: 44px;
}
.main-title {
font-size: 41px;
}Никто не должен знать, какой размер заголовка правильный. Правильный размер — тот, который «вроде нормально смотрится».
А если дизайнер спросит, почему на разных страницах разные отступы, можно уверенно сказать: «Это особенности реализации».
4. Используй магические отступы
Магические отступы — душа хаотичного CSS.
.card {
margin-top: 37px;
padding-left: 19px;
}
.button {
transform: translateY(3px);
}
.title {
margin-bottom: 13px;
}Почему 37px? Потому что 36px было мало, а 40px уже много.
Почему 13px? Потому что «на глаз норм».
Почему translateY(3px)? Потому что иначе кнопка «как-то не там».
Главное — не оставлять комментариев. Будущий разработчик должен пройти путь познания сам.
Особенно хорошо работают такие конструкции:
.form {
margin-top: -8px;
}
.form-title {
margin-bottom: 27px;
}
.form-button {
margin-top: 31px;
}Если для выравнивания элемента тебе пришлось использовать отрицательный отступ, абсолютное позиционирование и лёгкую молитву — значит, ты на правильном пути.
5. Пиши стили «на глаз»
Не надо измерять, сверять с макетом, использовать переменные, смотреть в дизайн-токены. Просто открыл браузер, подвигал значение, стало «примерно похоже» — коммит.
.banner {
width: 93%;
margin-left: 17px;
}Если элемент не помещается — уменьши шрифт. Если всё разъехалось — добавь overflow: hidden. Если стало хуже — добавь position: relative. Если совсем плохо — значит, нужен z-index: 9999.
.modal {
z-index: 999999;
}Профессиональный подход: чем больше девяток, тем выше ответственность компонента.
6. Смешивай подходы
Сегодня пиши по BEM.
.card__title {}
.card__button {}Завтра — по настроению.
cardTitle {}
new-button {}Послезавтра — utility-классами.
.mt-10 {}
.red {}
.big-text {}А потом добавь inline-стили в JSX, потому что «тут только один раз».
<div style={{ marginTop: '23px', color: '#333' }}>
Hello
</div>Идеальный проект должен выглядеть так, будто над ним одновременно работали пять команд, три фрилансера и один человек, который видел CSS впервые, но был очень уверен в себе.
7. Дублируй всё
Если кнопка уже есть — не переиспользуй её. Просто скопируй стили и немного измени.
.button {
padding: 12px 24px;
border-radius: 8px;
}
.button-new {
padding: 13px 25px;
border-radius: 9px;
}
.button-main {
padding: 12px 23px;
border-radius: 8px;
}
.button-main-new {
padding: 14px 24px;
border-radius: 10px;
}Через месяц в проекте будет 18 видов одной и той же кнопки. Каждая будет «почти как основная», но ломаться по-своему.
Это удобно: любое изменение превращается в археологическую экспедицию.
8. Не думай о состояниях
Hover? Focus? Disabled? Active? Error? Loading?
Зачем усложнять.
Сделай обычное состояние и надейся, что пользователь не будет пользоваться интерфейсом слишком активно.
.input {
border: 1px solid #ccc;
}А когда появится ошибка, просто добавь новый класс:
.input-error-new-final {
border: 1px solid red !important;
}Когда понадобится disabled — ещё один:
.input-disabled-real {
opacity: 0.5;
}Когда окажется, что disabled и error могут быть одновременно, можно сделать вид, что такой сценарий невозможен.
9. Игнорируй адаптивность до последнего
Сначала сверстай под свой экран. Желательно под 1440px. Всё остальное — проблемы пользователей.
Потом, когда на мобильном всё развалится, добавь медиа-запросы в конец файла.
@media (max-width: 768px) {
.card {
width: 100%;
}
.title {
font-size: 28px;
}
}Не помогло? Добавь ещё ниже.
@media (max-width: 768px) {
.title {
font-size: 24px !important;
}
}Потом ещё один, но уже на 767px, потому что «так заработало».
@media (max-width: 767px) {
.title {
margin-top: 17px;
}
}В хорошем хаотичном CSS медиа-запросы должны быть как слои древнего города: каждый новый слой скрывает ошибки предыдущего.
10. Не удаляй старый CSS
Удалять стили опасно. Вдруг где-то используется?
Поэтому оставляй всё.
.old-card {}
.old-card-new {}
/* maybe used */
.card-test {}
.card-test2 {}
.card-final {}Комментарии особенно помогают:
/* TODO: refactor later */
/* временно */
/* не трогать */
/* почему-то нужно */Лучший комментарий в CSS:
/* fixed */Что fixed? Где fixed? Почему fixed? Уже не важно.
Как понять, что ты всё сделал правильно
Ты на верном пути, если:
- один и тот же цвет встречается в 14 вариантах;
- кнопка не меняет стиль без
!important; - в проекте есть классы
.new,.new2,.final,.real-final; - отступы выглядят как случайные числа;
- никто не знает, можно ли удалить половину CSS;
- адаптивность держится на отрицательных отступах;
- любое изменение одного блока ломает три других;
- ты боишься открыть файл, который сам писал неделю назад.
А если серьёзно
Плохой CSS редко появляется из-за незнания синтаксиса. Чаще он появляется из-за отсутствия системы.
Чтобы не превратить стили в минное поле, нужны простые вещи: единые правила именования, дизайн-токены, переиспользуемые компоненты, понятная структура файлов, ограниченное использование !important, нормальная работа с состояниями и адаптивностью.
CSS сам по себе не хаотичен. Хаотичным его делает подход «сейчас быстро поправлю».
А потом это «быстро» живёт в проекте годами.
