Привет, Хабр!
Я начинал изучать вёрстку в 2010 году. Я не знал английский, поэтому у меня был ограниченный набор материала. Кто помнит видеоуроки Попова?
Хорошо, что сейчас ситуация уже лучше. В целом можно найти очень классные статьи, видео и бесплатные курсы. Но и мне есть что сказать!
Я собрал несколько советов. По моей задумке, если вы обратите внимание на эти аспекты, то ваш код будет лучше.
Давайте посмотрим, что я вам подготовил.
Заполнение данных с помощью виртуальной клавиатуры
Сегодня пользователи в основном используют смартфоны для сёрфинга в интернете. Так что они постоянно взаимодействуют с виртуальной клавиатурой, заполняя формы. И чем она удобнее, тем лучше.
В этой задаче браузеры могут нам помочь. Дело в том, что у виртуальной клавиатуры есть одно суперполезное свойство. Она может подстраиваться под тип данных, который нужно ввести.
Фронтендеру остаётся только правильно работать с атрибутами type и inputmode, а именно установить значение под требуемый тип данных. И всё: браузеры отобразят подходящую клавиатуру.
Например, на сайте Ozon используется атрибут type со значением email. В результате если начать ввод электронной почты, то будет отображена клавиатура с буквами, специальными символом @.
А при вводе цифрового года мы уже увидим клавиатуру с цифрами, благодаря атрибуту inputmode со значением numeric.
Это простое, но очень важное действие со стороны разработчика. Так что не пренебрегайте им.
Основные навигационные элементы
В любом обучающем ролике по вёрстке обязательно будут рассказывать про HTML5-элементы. Элементы header, footer, section и т. д. Только я очень редко встречаю разработчика, который понимает, чем же элементы полезны.
Мне кажется, что такое положение дел возникает из-за того, что начинающему специалисту дают кучу HTML-элементов и говорят: «Вот запомни и используй все! Семантика суперважна! Не будешь этого делать, будет плохо». В результате у человека возникает каша, а с годами он в принципе забывает про эти элементы.
Я думал, как можно изменить сложившуюся ситуацию. Честно, не придумал решение, но мысль есть. Представьте, что из всех HTML5-элементов вам нужно запомнить два. Это элементы main и nav.
Почему я выбрал их? В обучающем контенте рассказывают о пользе семантики всех HTML5-элементов. Но во многих случаях есть кейсы, когда нельзя однозначно сказать, какой элемент нужно использовать.
С элементами main и nav всё однозначно. Первый обозначает область основного контента. Второй — область навигации по сайту или странице.
Кому важна эта информация? Здесь давайте поговорим о пользователях.
Большинство продуктов разрабатываются для людей, которые воспринимают интерфейс глазами. Они визуально узнают, где находится контент и навигация. Для таких пользователей элементы не приносят существенной пользы.
А вот незрячие пользователи не могут воспринимать интерфейс визуально. Они используют скринридер. Пока он не скажет фразы «Основной контент» или «Навигация», пользователь ничего не поймёт.
Для демонстрации я покажу разницу разметок с использованием элементов main и nav и без них. Буду использовать скринридер NVDA в режиме «Диалоговое окно со списком элементов в режиме обзора». Включается он сочетанием клавиш insert+f7.
<body>
<div class="navigation">
<ul>
<li><a href="index.html">Главная</a></li>
<li><a href="about-me.html">Обо мне</a></li>
<li><a href="contacts.html">Контакты</a></li>
</ul>
</div>
<div class="content">
<h1>Сайт о разработчике</h1>
<p>Я занимаюсь разработкой с 2020 года.</p>
</div>
</body>
<body>
<nav class="navigation">
<ul>
<li><a href="index.html">Главная</a></li>
<li><a href="about-me.html">Обо мне</a></li>
<li><a href="contacts.html">Контакты</a></li>
</ul>
</nav>
<main class="content">
<h1>Сайт о разработчике</h1>
<p>Я занимаюсь разработкой с 2020 года.</p>
</main>
</body>
Элементы main и nav помогают скринридеру найти основную область с контентом и навигацию. Без них не получится. По этой причине на любой странице всегда должен быть элемент main, а элемент nav всегда нужно использовать для разметки навигации.
Систематизация CSS-значений дизайн-системы
В современной разработке все стремятся к систематизации. Если вы получили макет от дизайнера, где используется двадцать вариантов размера текста или пятнадцать цветов, то это признак непрофессионализма. Классные специалисты создают дизайн-системы, где чётко используется ограниченный набор значений для отступов, цветов, размера текста и так далее.
Благодаря этому у фронтендера есть возможность сохранить систематизацию. Для этого используется подход с переменными. Давайте сразу перейдём к примеру.
.page {
border: 0.25rem solid #6d47d9;
}
a:not([class]) {
color: #6d47d9;
}
.awesome-button {
padding: 0.5rem 0.25rem;
background-color: #6d47d9;
}В этом фрагменте кода есть несколько мест, где повторяются значения. Например, значение #6d47d9 используется во всех правилах для свойств border, color и background-color.
.page {
border: 0.25rem solid #6d47d9; /* 1 место */
}
a:not([class]) {
color: #6d47d9; /* 2 место */
}
.awesome-button {
padding: 0.5rem 0.25rem;
background-color: #6d47d9; /* 3 место */
}Допустим, этот код нужно поддерживать. Через какое-то время в проекте происходит редизайн. В дизайн-системе вместо цвета #6d47d9 надо будет использовать цвет #5130b3.
Вам нужно в трёх местах произвести замену. Либо «руками», либо через ваши инструменты разработки. В рамках десяти строчек кода это не так страшно. А теперь представьте, что их пять тысяч или десять тысяч...
У меня было много разных стрессовых ситуаций, связанных с заменой значений. Заменял не все значения или автозамена происходила криво. В итоге у меня появился страх, что что-то пойдёт не так. По этой причине я стал выносить значения свойств в отдельные переменные.
Существует несколько подходов по работе с переменными. CSS-препроцессорные переменные, пользовательские CSS-свойства и т. д. Мне больше нравится второй, поэтому в нашем примере буду использовать его.
У нас используется значение #6d47d9 в трёх местах. Давайте сохраним его в свойстве --accent-color, и уже его будем использовать для свойств border, color и background-color.
:root {
--accent-color: #6d47d9; /* объявление "переменной" */
}
.page {
border: 0.25rem solid var(--accent-color); /* 1 место */
}
a:not([class]) {
color: var(--accent-color); /* 2 место */
}
.awesome-button {
padding: 0.5rem 0.25rem;
background-color: var(--accent-color); /* 3 место */
}
Теперь мы можем менять значение в одном месте! Давайте изменим значение #6d47d9 на #5130b3.
:root {
--accent-color: #5130b3;
}
.page {
border: 0.25rem solid var(--accent-color);
}
a:not([class]) {
color: var(--accent-color);
}
.awesome-button {
padding: 0.5rem 0.25rem;
background-color: var(--accent-color);
}Не будем останавливаться. У нас есть ещё значения 0.25rem и 0.5rem. Давайте теперь добавим для них переменные.
:root {
--space-xs: 0.5rem;
--space-2xs: 0.25rem;
--accent-color: #5130b3;
}
.page {
border: var(--space-2xs) solid var(--accent-color);
}
a:not([class]) {
color: var(--accent-color);
}
.awesome-button {
padding: var(--space-xs) var(--space-2xs);
background-color: var(--accent-color);
}Такую версию нашего кода очень легко менять. Для подтверждения этого представим, что нам надо написать новые стили. Например, мы определим свойство padding со значением 0.5rem для элемента с классом .page.
У нас уже есть для него своя переменная. Поэтому воспользуемся ей.
:root {
--space-2xs: 0.25rem;
--space-xs: 0.5rem;
--accent-color: #5130b3;
}
.page {
border: var(--space-2xs) solid var(--accent-color);
padding: var(--space-xs);
}
a:not([class]) {
color: var(--accent-color);
}
.awesome-button {
padding: var(--space-xs) var(--space-2xs);
background-color: var(--accent-color);
}Конечно, в реальной разработке многое зависит от дизайнера. Если он не создаёт дизайн-систему, то будут сложности.
Только не спешите писать негативный комментарий. По моему опыту, дизайнеры достаточно легко идут на систематизацию значений. Скажу больше — многие кайфовали, что их дизайн становился более консистентным. Уверен, у вас будет так же.
Правила именования переменных для дизайн-системы
Говоря о переменных, частая проблема придумать им подходящие названия. Это одна из главных проблем в программировании! Блин, я без каких-либо шуток тратил по часу, думая, как лучше назвать переменные. В ходе своих мук выявил для себя несколько правил.
Проанализировав большинство значений в CSS, можно разделить их на несколько групп. Первая группа — «Цвета».
Составляя дизайн‑систему, дизайнеры используют основной, акцентирующий и вспомогательный цвета. Для каждого из них используют более светлый и более тёмный оттенок. Давайте тоже воспользуемся этой информацией.
Основной цвет назовём main, акцентирующий — accent и вспомогательный — assistive. Для оттенка цвета будем использовать постфиксы -light (светлый) и -dark (тёмный).
:root {
/* основной цвет */
--main-color-light: #fed330;
--main-color: #fed330;
--main-color-dark: #fbc604;
/* акцентирующий цвет */
--accent-color-light: #c6b2ff;
--accent-color: #6d47d9;
--accent-color-dark: #5130b3;
/* вспомогательный цвет */
--assistive-color-light: #fafafa;
--assistive-color: #eee;
--assistive-color-dark: #b8b4b4;
}Следующая категория — «Размеры». К ней я отношу значения, которые указывают размер чего-либо. Например, элемента, текста, отступа, радиус скругления и т. д.
Для именования переменных в этой категории я использую размерную сетку одежды. Мне кажется, это всем известная альтернатива. Все же знают, что размер s меньше, чем 2xl.
В итоге у меня получается целый ряд значений от 2xs до 2xl.
:root {
/* размер пространства */
--space-2xs: 0.25rem;
--space-xs: 0.5rem;
--space-s: 0.75rem;
--space-m: 1rem;
--space-l: 1.25rem;
--space-xl: 1.5rem;
--space-2xl: 1.75rem;
/* размер текста */
--font-size-xs: 0.5rem;
--font-size-s: 0.75rem;
--font-size-m: 1rem;
--font-size-l: 1.25rem;
--font-size-xl: 1.5rem;
--font-size-2xl: 1.75rem;
/* размер радиуса скругления */
--border-radius-s: 0.5rem;
--border-radius-m: 1rem;
--border-radius-l: 1.25rem;
}При работе дизайнеры могут менять насыщенность элемента. Например, толщину шрифта или тени. Я лично называю эту категорию «Насыщенность». В ней я использую постфиксы -light и -bold.
:root {
--font-weight-light: 300;
--font-weight: 400;
--font-weight-dark: 700;
}Это основной набор моих переменных. Но это не догма! Вы можете использовать его для старта, потом придумав свой. Главное убедитесь, что названия переменных понятны всей команде.
Отдельные переменные под цвет темы интерфейса
Мы уже знаем, как называть большинство переменных из дизайн‑системы. Но я не рассмотрел два важных момента: это белый и чёрный цвета. В дизайне они являются основополагающими и используются всегда. У нас же по умолчанию страница белая, а текст — чёрный. Поэтому под них я выделяю отдельные две переменные. Только как их назвать?
Первой мыслью было использовать имена --white-color и --black-color.
:root {
--white-color: #fcfcfc;
--black-color: #222;
}Будет всё работать. Только по-хорошему нужно дать возможность просмотреть интерфейс в светлой и тёмной темах. И тут возникает проблема.
Когда мы переключаем тему со светлой на тёмную или наоборот, происходит обмен местами белого и чёрного оттенков. Например, в светлой теме мы читаем чёрный текст на белом фоне, а в тёмной — светлый текст на тёмном фоне.
Назвав переменные --white-color и --black-color, мы в имени зафиксировали значение. В итоге произойдёт путаница.
:root {
--white-color: #fcfcfc;
--black-color: #222;
}
@media (prefers-color-scheme: dark) {
/* в переменной с белым оттенком чёрный цвет, а в переменной с чёрным оттенком — белый цвет. Путаница! */
.page {
--white-color: #222;
--black-color: #fcfcfc;
}
}Нужно более абстрактное название. Я подумал, что для тем мы используем основной и акцентирующий. Так и назовём --main-mode-color и --accent-mode-color.
:root {
--main-mode-color: #fcfcfc;
--accent-mode-color: #222;
}
@media (prefers-color-scheme: dark) {
.page {
--main-mode-color: #1e2229;
--accent-mode-color: #ebecef;
}
}Теперь никакой путаницы нет.
Заключение
Давайте подведём итог. В этой статье я поделился следующими советами:
Помните про атрибуты
typeиinputmodeпри вёрстке форм.На странице обязательно должны быть элементы
navиmain.Старайтесь сохранить значения в одном месте, где вам удобнее их изменять.
Выделите отдельные переменные цвета под светлую и тёмную тему.
Создайте группу переменных для дизайн-системы.
Также я недавно рассказал про новые возможности CSS, которые будут актуальные в ближайшие года. Рекомендую вам ознакомиться с ними.
На этом я прощаюсь. Спасибо за чтение!
P. S. Помогаю больше узнать про CSS в своём ТГ-канале CSS isn't magic. Присоединяйтесь. Ссылка в профиле.
© 2025 ООО «МТ ФИНАНС»
Комментарии (3)
Wyse
24.08.2025 16:31
Если кто то думает что ИИ заменят там даже самых базовых людей фронтов джунов или еще кого нибудь там. То не заходите в интернет и не позорьтесь. ИИ - максимум лишь инструмент который УПРОЩАЕТ а не ЗАМЕНЯЕТ какие то таски. ИИ банально не смог ответить на вопрос из теста по русскому языку. У меня так друг завалил аттестацию)))) Доверился ботику.
Hadjimurad
Джуниор фронтенд-разработчик и советы для них, это все еще актуально? Просто везде пишут (и показывают), что их всех уже заменили. Или еще не всех?!
Wyse
и кем же их заменили ?