Профиль навыка

Современный CSS

Flexbox, Grid, CSS Variables, Container Queries, @layer, has()

Frontend Development CSS и стилизация

Ролей

6

где встречается этот навык

Грейдов

5

сформированная дорожка роста

Обязательных требований

28

ещё 2 — необязательные

Домен

Frontend Development

Группа

CSS и стилизация

Последнее обновление

17.03.2026

Как использовать

Выберите текущий грейд и сравните ожидания. Карточки ниже покажут, что нужно закрыть для следующего уровня.

Чего ждут на каждом уровне

Таблица показывает, как меняется глубина владения навыком от Junior до Principal.

Роль Обязательность Описание
Desktop Developer (Electron/Tauri) Применяет CSS для Electron UI: Flexbox, Grid, CSS variables. Стилизует desktop-элементы (titlebar, sidebar). Понимает различия CSS в Chromium vs браузерах.
Frontend Developer (Angular) Обязателен Применяет современный CSS в Angular-компонентах: Flexbox и Grid для вёрстки, CSS Custom Properties для тем, :host и ::ng-deep (с осторожностью) для стилизации. Понимает ViewEncapsulation режимы.
Frontend Developer (React) Обязателен Владеет основами современного CSS для React: flexbox и grid для лейаутов, CSS custom properties для переменных, media queries для адаптивности. Применяет CSS Modules или Tailwind CSS для изоляции стилей в компонентах.
Frontend Developer (Svelte) Обязателен Использует scoped-стили в Svelte-компонентах, применяет CSS Grid и Flexbox для адаптивной вёрстки. Понимает каскадность в контексте Svelte: стили компонента изолированы, глобальные стили через :global(). Работает с CSS variables для тем оформления.
Frontend Developer (Vue) Обязателен Применяет scoped-стили и CSS-переменные во Vue SFC. Использует Flexbox и Grid для макетов Vue-компонентов, понимает каскадность стилей и специфичность в контексте scoped и deep-селекторов Vue.
Fullstack Developer Обязателен Применяет современный CSS для верстки fullstack-приложений: Flexbox и Grid для лейаутов, CSS-переменные для темизации, медиа-запросы для адаптивности. Понимает каскадность и специфичность, верстает по макетам с pixel-perfect точностью.
Роль Обязательность Описание
Desktop Developer (Electron/Tauri) Создаёт responsive desktop layouts через CSS Container Queries. Реализует тёмную/светлую тему через CSS variables и prefers-color-scheme. Использует CSS Nesting и @layer. Анимирует через CSS transitions/animations.
Frontend Developer (Angular) Обязателен Использует продвинутые CSS-техники: Container Queries для responsive-компонентов, CSS Layers для управления специфичностью, анимации через Angular Animations API, CSS-in-JS через styleUrls и inline styles.
Frontend Developer (React) Обязателен Использует продвинутые CSS-возможности в React-компонентах: container queries, :has(), @layer для управления специфичностью, CSS logical properties. Настраивает CSS Modules с типизацией через typed-css-modules, анимации через Framer Motion.
Frontend Developer (Svelte) Обязателен Применяет продвинутые CSS-фичи в Svelte: container queries, has(), nesting, слои каскада (@layer). Создаёт адаптивные layout-ы с dynamic viewport units, использует Svelte transitions и animations с CSS keyframes для плавных UI-переходов.
Frontend Developer (Vue) Обязателен Создаёт адаптивные макеты с Container Queries и CSS Grid во Vue-компонентах. Реализует анимации через CSS Transitions и Vue Transition/TransitionGroup, использует :deep() и :slotted() селекторы.
Fullstack Developer Обязателен Самостоятельно реализует сложные UI-компоненты с Современный CSS. Оптимизирует производительность рендеринга. Пишет тесты. Применяет для state management.
Роль Обязательность Описание
Desktop Developer (Electron/Tauri) Обязателен Проектирует CSS architecture для desktop (CSS Modules, styled-components, Tailwind). Оптимизирует CSS performance через contain, will-change. Создаёт platform-specific styles (Windows/macOS/Linux).
Frontend Developer (Angular) Обязателен Проектирует CSS-архитектуру Angular-приложения: стратегия ViewEncapsulation, CSS Custom Properties для динамического theming, производительные анимации через will-change и GPU-слои, критический CSS для SSR.
Frontend Developer (React) Обязателен Проектирует CSS-архитектуру React-приложения: систему дизайн-токенов через CSS custom properties, адаптивную типографику через clamp(), оптимизацию CLS через aspect-ratio. Обеспечивает совместимость CSS-стратегии с React Server Components и streaming.
Frontend Developer (Svelte) Обязателен Проектирует CSS-архитектуру для масштабируемых Svelte-приложений: методологию токенов, слои стилей, стратегию responsive design. Оптимизирует Critical CSS для SvelteKit SSR, внедряет CSS Houdini API и @property для продвинутых анимаций.
Frontend Developer (Vue) Обязателен Проектирует CSS-архитектуру для масштабных Vue-приложений — CSS Layers для управления каскадом, custom properties для theming, View Transitions API. Оптимизирует критические стили через Vite CSS code splitting.
Fullstack Developer Обязателен Создаёт сложные CSS-решения для fullstack-приложений: анимации с GPU-ускорением, Container Queries для компонентной адаптивности, CSS Layers для управления специфичностью. Оптимизирует критический CSS для SSR-страниц и решает проблемы FOUC.
Роль Обязательность Описание
Desktop Developer (Electron/Tauri) Обязателен Определяет CSS стратегию для Electron-команды. Формирует design tokens и style guidelines. Координирует CSS architecture.
Frontend Developer (Angular) Обязателен Устанавливает CSS-стандарты для Angular-проекта: архитектура стилей (BEM vs utility), правила использования ::ng-deep и ViewEncapsulation, performance-бюджеты для CSS, стратегия поддержки браузеров.
Frontend Developer (React) Обязателен Стандартизирует CSS-подходы в React-проектах команды: выбор методологии (Tailwind/Modules), конвенции, инструменты анализа. Внедряет автоматические проверки CSS-качества: stylelint, визуальное регрессионное тестирование, мониторинг CSS bundle size.
Frontend Developer (Svelte) Обязателен Стандартизирует CSS-практики в Svelte-команде: соглашения по scoped vs global стилям, naming conventions, архитектурные паттерны. Определяет стратегию поддержки браузеров, внедряет visual regression testing для Svelte-компонентов через Playwright.
Frontend Developer (Vue) Обязателен Определяет стандарты CSS-архитектуры для Vue-команд — методологии, tooling, performance budgets для стилей. Внедряет системы автоматической проверки CSS-качества — Stylelint, visual regression через Playwright.
Fullstack Developer Обязателен Проектирует CSS-архитектуру fullstack-приложений: стратегия CSS-in-JS vs utility-first, управление критическим CSS при SSR, оптимизация загрузки стилей. Определяет стандарты стилизации и решает архитектурные проблемы масштабирования CSS для команды.
Роль Обязательность Описание
Desktop Developer (Electron/Tauri) Обязателен Формирует enterprise CSS стандарты для Electron desktop. Оценивает CSS approaches для desktop. Определяет theming strategy.
Frontend Developer (Angular) Обязателен Формирует стратегию CSS на уровне Angular-платформы: единая система дизайн-токенов, CSS Houdini для кастомных свойств, интеграция CSS-слоёв с микрофронтендовой архитектурой и Angular Elements.
Frontend Developer (React) Обязателен Определяет долгосрочную CSS-стратегию для React-экосистемы: архитектуру токенов, подход к темизации, стандарты accessibility. Оценивает новые CSS-спецификации и их влияние на архитектуру стилей, планирует миграционные пути.
Frontend Developer (Svelte) Обязателен Формирует CSS-стратегию на уровне организации, исследует возможности компилятора Svelte для оптимизации стилей. Влияет на развитие CSS-инструментария Svelte-экосистемы, определяет направление от utility-first к component-scoped подходам в масштабе платформы.
Frontend Developer (Vue) Обязателен Формирует CSS-стратегию для Vue-экосистемы организации — оценка подходов к стилизации, интеграция с design tokens, progressive enhancement. Исследует и внедряет новые CSS-возможности — @scope, nesting, scroll-driven animations.
Fullstack Developer Обязателен Определяет CSS-стратегию организации для fullstack-проектов: единые принципы стилизации, инструменты для кросс-проектной консистентности, performance-бюджеты для CSS. Исследует новые CSS-спецификации и внедряет их в продуктовую разработку.

Сообщество

👁 Следить ✏️ Предложить изменение Войдите, чтобы предлагать изменения
📋 Предложения
Пока нет предложений для Современный CSS
Загрузка комментариев...