CSS — чек-лист

НЕ ОБЯЗАТЕЛЬНОДЛЯ НОВИЧКОВ

Разработчику Аналитику Тестировщику
Архитектору Инженеру

Загрузка вопросов…

---

Чек-лист самопроверки

Практика по структуре страницы (DOCTYPE, header, main, форма) — HTML-страницы целиком. По пунктам 15–26 (центрирование, Flex, Grid, адаптив) — HTML + CSS — готовые макеты: копируйте пример, меняйте одно свойство и смотрите результат в браузере. Когда база усвоена — те же блоки на Tailwind: Tailwind — готовые блоки. Пункты 32–34 (transition, @keyframes, производительность) — CSS-анимации — готовые эффекты — fade in, спиннер, hover-кнопка с построчным разбором.

1. Понимаю ли я, что CSS — это язык описания стилей, а не язык программирования?
2. Могу ли я объяснить разницу между HTML (структурой) и CSS (оформлением)?
3. Знаю ли я, как подключить CSS-файл к HTML-документу через <link>?
4. Умею ли я использовать встроенные стили через атрибут style?
5. Понимаю ли я, как работают селекторы по тегу, классу и идентификатору?
6. Знаю ли я разницу между классом (.class) и идентификатором (#id)?
7. Могу ли я объяснить, что такое каскадность в CSS?
8. Понимаю ли я, как работает наследование стилей?
9. Знаю ли я, как рассчитывается специфичность селекторов?
10. Умею ли я использовать универсальный селектор (*) и понимаю его последствия?
11. Знаю ли я, как работают псевдоклассы (:hover, :focus, :active, :visited)?
12. Могу ли я использовать псевдоэлементы (::before, ::after)?
13. Понимаю ли я модель блока (box model) — content, padding, border, margin?
14. Знаю ли я разницу между box-sizing: content-box и border-box?
15. Умею ли я центрировать элемент по горизонтали и вертикали?
16. Знаю ли я, как работают медиавыражения (@media) для адаптивного дизайна?
17. Могу ли я создать мобильный макет с использованием медиазапросов?
18. Понимаю ли я разницу между display — block, inline, inline-block?
19. Знаю ли я, как работает display: none и чем он отличается от visibility: hidden?
20. Умею ли я использовать Flexbox для одномерной компоновки?
21. Знаю ли я основные свойства Flexbox — flex-direction, justify-content, align-items, flex-wrap?
22. Могу ли я создать карточную сетку с помощью Flexbox?
23. Понимаю ли я, как работает CSS Grid?
24. Знаю ли я свойства Grid — grid-template-columns, grid-template-rows, grid-gap, grid-area?
25. Могу ли я создать сложный макет с помощью Grid?
26. Умею ли я комбинировать Flexbox и Grid в одном проекте?
27. Знаю ли я, как работают относительные (em, rem, %) и абсолютные (px, pt) единицы измерения?
28. Понимаю ли я, когда использовать rem вместо em?
29. Умею ли я создавать и использовать CSS-переменные (кастомные свойства)?
30. Знаю ли я, как изменить CSS-переменную через JavaScript?
31. Могу ли я реализовать переключение темы (светлая/тёмная) с помощью переменных?
32. Понимаю ли я, как работают переходы (transition)?
33. Знаю ли я, как создавать анимации с помощью @keyframes?
34. Умею ли я оптимизировать анимации для производительности (через transform и opacity)?
35. Знаю ли я, как работают псевдоклассы :nth-child, :first-of-type, :not()?
36. Могу ли я стилизовать формы — инпуты, кнопки, селекты?
37. Понимаю ли я, как стилизовать состояния фокуса для доступности?
38. Знаю ли я, как работают z-index и контексты наложения (stacking context)?
39. Умею ли я позиционировать элементы с помощью position — static, relative, absolute, fixed, sticky?
40. Понимаю ли я, как работает float и почему его не рекомендуется использовать сегодня?
41. Знаю ли я, как подключать и использовать веб-шрифты через @font-face?
42. Могу ли я обеспечить fallback-шрифты на случай недоступности основного?
43. Понимаю ли я, как проверять контрастность цветов для доступности?
44. Знаю ли я, как использовать prefers-color-scheme для автоматического выбора темы?
45. Умею ли я писать семантически корректные и переиспользуемые стили?
46. Знаю ли я методологию BEM и могу ли применять её на практике? См. Подключение и методологии.
47. Понимаю ли я, что такое CSS-модули и зачем они нужны? См. Подключение.
48. Знаю ли я, как работают scoped-стили во Vue или Svelte?
49. Могу ли я отладить стили с помощью DevTools в браузере?
50. Умею ли я обосновать выбор CSS-подхода (обычный CSS, препроцессор, CSS-in-JS) для заданного проекта?
51. Понимаю ли я разницу между :is(), :where() и :has() и умею ли использовать функции значений (calc(), clamp(), color-mix())? См. Функции в CSS.
52. Знаю ли я, зачем нужны @layer в каскаде?
53. Использую ли я prefers-reduced-motion и forced-colors для доступности?
54. Могу ли я по сводке рекомендаций назвать, что использовать, чего избегать и где быть осторожным (макет, viewport, touch, производительность)?
55. Понимаю ли я, когда регистрировать кастомные свойства через @property и как выбирать syntax, inherits, initial-value (например, для <angle>, <color>, <length-percentage>)?

---