CSS *

Дизайн-токены — это язык, понятный как дизайнерам, так и разработчикам. Без него продукт получается разрозненным и неповоротливым. Токены и правильный нейминг помогают создавать новые разделы быстрее, а дизайнерам больше думать о сценариях и создавать визуал в рамках продукта, а не заниматься рутиной.

Если в вашем коде и макетах до сих пор живут значения типа #0055FF — вы копите технический долг, ведь если понадобится изменить этот цвет на другой, придется менять и все компоненты, где используется это значение. А про разные темы вообще можете забыть...

В конце статьи будут ссылки на доп. материалы из реальных дизайн-систем, откуда я брал информацию.

Многие верстальщики используют Flex на автомате просто потому, что привыкли к нему за долгие годы. Grid часто кажется чем-то избыточным или пугающим из-за своего специфического синтаксиса. На самом деле эти инструменты не заменяют друг друга, а решают принципиально разные задачи.

Разница между ними кроется в самом подходе к пространству. Flex создавался для работы в одном измерении, когда вам нужно выстроить элементы в строку или столбец. Grid же мыслит сразу в двух плоскостях, позволяя контролировать и ряды, и колонки одновременно.

В этой статье мы разберем конкретные ситуации, где один инструмент явно выигрывает у другого, чтобы вы перестали гадать и начали выбирать технологию осознанно. Для наглядности в наших примерах блоки Grid будут красными, а Flex — синие.

Под каждым примером есть полный код, который достаточно скопировать в файл и запустить.

Привет, Хабр!
Меня зовут Артём, я фаундер Leadl.ai. Мы строим AI-агента для поиска b2b-клиентов, и одна из его ключевых задач это мониторинг чатов и различных источников.
Звучит просто, пока не сталкиваешься с масштабом.

У нас в пуле 20000+ чатов в 15 источниках. Суммарно около 1000 000 000 сообщений в сутки. Из них реально полезных (запросы на услуги, поиск подрядчиков, вакансии) от силы 3-5%. Остальное: флуд, криптоспам, «доброе утро», мемы и бесконечные стикеры.

Задача: вытащить эти 3-5% качественных сообщений. Первой мыслью было отдать всё на откуп большой LLM типа GPT-4o. Посчитали. Среднее сообщение 50 токенов. 100 000 сообщений 50 токенов/сообщение ($10 / 1M токенов) = $50 в день только на input. Добавьте сюда output и prompt — и счёт легко перевалит за $100-150/день или $3000-4500/месяц. Для стартапа это путь в никуда.

Нам нужен был pipeline, который бы отсеивал мусор на ранних этапах, чтобы до дорогого LLM-скоринга доходило не более 5-10% от всего потока. Вот как мы его построили, через какие грабли прошли и что из этого вышло.

Знаете это чувство, когда сидишь на очередном спринт-планировании, команда пытается оценить таски, а планинг покер тормозит так, что успеваешь кофе сварить, пока карточка загрузится?

Вот у меня в AGG TEAM такая же история была. Мы пробовали:

Стоит начать с боли всех разработчиков Angular: когда начинаешь свой проект, всё чисто и красиво. Но когда проект уже идёт, появляются подписки на подписки, данные из разных запросов нужно объединить, а пользователь начинает нажимать кнопки слишком быстро.

И здесь приходит на помощь RxJS

RxJS часто пугает своей сложностью. Прикол в том, что вам не нужно знать все 100+ операторов. Достаточно освоить базовую пятёрку, которая покроет 80% проблем.

Привет, Хабр!

Мне грустно, что вы не используете многие HTML- и CSS-фичи. Я не могу смотреть на это, бездействуя, поэтому пришёл к вам. Хочу поделиться своим списком фич, которые уже давно пора использовать.

Конечно, я подумал о кроссбраузерности. Поэтому все фичи хорошо поддерживаются во всех современных браузерах с 2023 года. Я специально проверил их в «Can I use».

Давайте посмотрим, что я вам подготовил.

История фронтенда хорошо показывает, что инструменты редко исчезают мгновенно. Чаще они проходят понятный цикл: сначала решают конкретную проблему и быстро набирают популярность, потом становятся привычной частью стека, а со временем уступают место следующему подходу. Примерно так развивается и CSS-in-JS. Когда он появился, это выглядело логичным шагом: стили рядом с компонентами, темы, токены и удобная интеграция с React. Со временем стало ясно, что у этой модели есть и ограничения — стили генерируются в рантайме, усложняется SSR, а в больших приложениях начинают накапливаться накладные расходы. Появились попытки сделать CSS-in-JS легче и быстрее. Одной из них стал Stitches: он сохранил удобный DX и заметно сократил рантайм. Но развитие проекта остановилось, а требования к фронтенду продолжают расти. Поэтому всё чаще обсуждают другой подход — перенос генерации стилей на этап сборки. В этой логике и появился StyleX.

Это перевод статьи Брайана Тимана (Brian Teeman) о переопределении макета материала Joomla, с разделением блока вводного текста и полного текста материала. С примером возможного оформления.

Если кто-то из вас мечтает создать свой продукт, но не может решиться, копит бюджет или ищет инвесторов, этот цикл может изменить вашу жизнь.

Материал будет также полезен основателям с техническим складом ума, кто привык опираться на команду разработки, но старадает из-за сроков и стоимости реализации начальной стадии проектов.

В 2026 году выбор инструмента для стилизации — это не вопрос вкуса, а вопрос архитектуры. Мы разберём, где Tailwind CSS v4 выигрывает у признанных лидеров: компонентных библиотек (MUI, Ant Design) и CSS-in-JS решений (Styled Components).

Сайт Словарус 2.0 – это вторая улучшенная версия сайта с русской заменой иностранных слов, который я ранее делал по заказу Love Media и лично господина Маркелова.

Задача. Восстановить сайт из веб-архива и сделать его лучше.

словарус.рф

Обзор на браузерные API, которые стали Widely available в феврале 2026. Раз в месяц я буду вам напоминать, что вы уже можете использовать в проде. В этом месяце всё довольно скучно и одиноко.

Каждый месяц выходят новые CSS-свойства, HTML-атрибуты, JavaScript-методы и WebAPI, но применять в проде мы их конечно же не будем. 2.5 года назад также каждый месяц выходили новые фичи в браузере, а вот их уже пора начинать применять.

Привет, друзья!

В этой небольшой статье я расскажу вам о новом свойстве события toggle - source, а также о новом атрибуте HTML-элемента dialog - closedby.

Свойство source позволяет определять источник переключения видимости поповера (popover), а атрибут closedby позволяет декларативно управлять логикой закрытия dialog, но обо всем по порядку.

Среди фронтенд-разработчиков, привыкших к уютному миру Windows и macOS, бытует одно опасное заблуждение. Оно звучит так: «Если мой код валиден (XHTML 1.1 Strict, привет из 2000-х!), а CSS написан по спецификации, то сайт будет выглядеть одинаково везде».

Но стоит такому разработчику поставить условную Ubuntu или openSUSE, как мир рушится. Шрифты становятся корявыми, кнопки «раздуваются», а блоки, которые филигранно подгонялись пиксель в пиксель, начинают наезжать друг на друга.

Реакция — Почему Linux игнорирует мой CSS и подставляет свои шрифты?

Сразуу расставим точки над i: Linux ничего не игнорирует. Ваш браузер — будь то Chromium или Firefox — честно читает каждую строчку стилей. Проблема в том, что мы часто воспринимаем CSS как жесткий приказ, хотя на самом деле это лишь набор пожеланий. И когда система не может их выполнить, она включает режим «самодеятельности», который и рушит ваш дизайн.

Помните сказку про мальчика, который кричал «волки»? Примерно так же в 2025 году случилось с «программированием на CSS». Вышла функция if(). Блогеры преждевременно хайпанули: всё, теперь у нас условия в CSS. Разработчики пошли читать спецификации, попробовали — и довольно быстро выяснилось, что внутри условного выражения style() возможностей почти нет. Многие разочаровались и похоронили идею.

В конце 2025 года Chrome выкатил революционный Range Syntax For Style Container Queries. Обновлённый style() научился сравнивать переменные между собой и поддерживать диапазонные выражения. Мы наконец‑то получили мощную условную логику в CSS, но мало кто это заметил.

В этой статье мы попытаемся реанимировать идею программирования на CSS. На примере интерфейсного паттерна — «выделение диапазона дат в календаре» — разберём, как обычная JS‑логика превращается в CSS‑логику (спойлер: очень просто).

Привет, Хабр! Меня зовут Яков, я UI Kit Lead в Exante. На работе мы развиваем свою корпоративную дизайн-систему — мощную, заточенную под конкретные требования, но закрытую. В свободное время я переосмыслил ряд решений из рабочей практики, переработал их под общие паттерны и собрал в open-source библиотеку — Vacano UI.

64 компонента, 17 form-обёрток, 1800+ иконок, 10 валидаторов, документация для людей и MCP-сервер для AI-ассистентов.

Добрый день!

Хочу привести пример небольшой оптимизации интерфейса (frontend) мобильного приложения, сделанного на 1С.

Разницу вы сами можете проверить, скачав приложение и переключив флаг в настройках «Оформление HTML».

Привет, Хабр!

Вопросы по HTML и CSS всё реже встречаются на собеседованиях для фронтендеров. Но в основном это касается позиций middle и выше. А вот для начинающих специалистов они всё ещё есть.

Поскольку новичкам всегда сложнее проходить собеседования, я захотел помочь. Я поискал вопросы с собеседований, которые были в 2025 году, и составил список наиболее часто встречающихся вопросов.

А главное, отвечать на них будет ChatGPT. Я же буду его дополнять, если потребуется. Многие же используют его для подготовки. Вот и посмотрим, как он справится.

Сразу скажу, что буду душнить. Так что вы сами рассудите, кто из нас лучше отвечает.

Давайте начнём!

Эта статья - перевод поста в блоге Alex, Baton Corporation Team Lead, вышедшего 20 февраля 2026 г.

Я публикую этот перевод, потому что сам много экспериментировал с переносом на этап сборки применение Tailwind стилей, убрав их из runtime. Хоть мне и не удалось добиться таких впечатляющих результатов, как автору статьи, опыт был сугубо положительный, скорость загрузки и многие другие метрики, связанные с отзывчивостью интерфейса, ощутимо выросли.

В современном мире веб-разработки выбор стратегии рендеринга сайта является одним из ключевых решений, определяющих его производительность, оптимизацию для поисковых систем (SEO) и пользовательский опыт. От того, как и где генерируется HTML-код вашего приложения, зависит скорость загрузки, интерактивность и даже стоимость инфраструктуры. В этой статье мы подробно рассмотрим основные типы рендеринга — Client-Side Rendering (CSR), Server-Side Rendering (SSR), Static Site Generation (SSG), Incremental Static Regeneration (ISR) и набирающие популярность React Server Components (RSC) — их преимущества, недостатки, влияние на SEO и производительность, а также приведем примеры технологических стеков для каждого подхода.

Статья будет полезна для всех кто занимается разработкой сайта(вайбкодеры, веб-разработчки итп.)