Домен
Frontend Development
Профиль навыка
Flexbox, Grid, CSS Variables, Container Queries, @layer, has()
Ролей
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-спецификации и внедряет их в продуктовую разработку. |