По мере того как развивается веб, должны меняться и наши привычки в CSS. Некоторые практики, которые когда-то были обычными, сегодня мешают производительности, доступности и гибкости. Рассмотрим 7 устаревших приёмов, которые вы, возможно, всё ещё используете, и современные, устойчивые к изменениям альтернативы.
Почему пора двигаться дальше
- Скорость, доступность, простота поддержки и адаптивный дизайн — основные цели современного фронтенд-разработки.
- Использование старых приёмов замедляет разработку и увеличивает технический долг.
- Переход на современные возможности CSS означает написание более чистого, простого и надёжного кода.
7 устаревших приёмов и что использовать вместо них
1. Верстка на таблицах
Проблема старого подхода: использование элемента <table> для построения структуры страницы — это нарушение семантики, ограничение адаптивности и ухудшение доступности.
Что делать: используйте Flexbox для простых одномерных макетов и CSS Grid для более сложных композиций. Более чистая разметка, лучшая адаптация и улучшенный пользовательский опыт.
2. Использование float для верстки
Проблема старого подхода: float требует хаков вроде clearfix и часто ломает контейнеры. Для современных задач это ненадёжное решение.
Что делать: замените на
.container {
display: flex;
}или Grid:
.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
}Так вы получите интуитивно понятные, устойчивые макеты с минимальным количеством кода.
3. Встроенные (inline) стили
Проблема старого подхода: встроенные стили смешивают контент и оформление, мешают повторному использованию и усложняют поддержку.
Что делать: перенесите стили во внешний CSS или используйте локальные стили в компонентах. Это сохраняет каскадность и делает стили предсказуемыми и повторно используемыми.
4. Фиксированные ширина и высота
Проблема старого подхода: фиксированные значения ширины и высоты не адаптируются под разные размеры экранов, из-за чего верстка ломается, контент обрезается или выходит за границы контейнера.
Что делать: используйте гибкие размеры:
.box {
width: 90%;
max-width: 1200px;
min-height: 200px;
}Элементы плавно подстраиваются под размер экрана без переполнений и обрезки.
5. Глубокое вложение селекторов
Проблема старого подхода: глубокое вложение селекторов (например, .nav ul li a span) создаёт хрупкий, чрезмерно специфичный CSS.
Что делать: упростите структуру с помощью методологии BEM или утилитарных классов:
.btn--primary {
/* styles */
}Код становится модульным, простым и удобным для отладки.
6. Встроенные JS-стили и атрибуты событий
Проблема старого подхода: внедрение JS-логики (onclick, style) прямо в HTML смешивает уровни ответственности и ухудшает поддержку.
Что делать: используйте внешние скрипты для переключения классов:
btn.addEventListener(
'click', () => btn.classList.toggle('active')
);Такой подход обеспечивает чистую, разделённую логику — стили и поведение остаются независимыми.
7. Спрайты для иконок
Проблема старого подхода: спрайты — это лишний багаж в условиях современных протоколов и инструментов.
Что делать: переходите на SVG-иконки, иконные шрифты или встроенные SVG. Они масштабируемы, доступны, проще в обслуживании и зачастую меньше по размеру.
Итог:
Откажитесь от устаревших CSS-практик — от верстки на таблицах до встроенных стилей. Вы получите более чистый, модульный код, лучшую производительность и адаптивность, а также повышенную доступность и простоту поддержки.
Переходите на современные приёмы CSS уже сегодня и создавайте устойчивые к изменениям стили, за которые ваша команда скажет вам спасибо.