Шпаргалка CSS допомагає швидко згадати найуживаніші властивості, селектори й правила верстки, коли потрібно не шукати все по різних джерелах, а одразу застосувати потрібний код. Такий формат особливо корисний під час щоденної роботи з макетами, виправленням стилів і адаптацією інтерфейсів.
Базові принципи CSS
Шпаргалка CSS починається з трьох речей: селектор, властивість і значення. Селектор визначає елемент на сторінці, властивість описує, що саме змінюється, а значення задає конкретний результат.
Найпростіший запис виглядає так:
- p — селектор абзаців
- color — властивість кольору тексту
- #333 — значення
Каскад CSS вирішує, яке правило переможе, якщо стилі конфліктують. Вищий пріоритет мають специфічніші селектори, а також правила, що йдуть нижче у файлі, якщо специфічність однакова.
Селектори, які потрібні найчастіше
Шпаргалка CSS для селекторів найкраще працює, коли під рукою є саме ті варіанти, які реально використовуються в макетах.
- p — елемент
- .card — клас
- #header — ID
- nav a — вкладений селектор
- button:hover — псевдоклас стану
- input:focus — фокус елемента форми
Для швидкої перевірки варто дивитися, чи стилі справді застосувалися до потрібного елемента в інспекторі браузера. Якщо правило не спрацювало, зазвичай проблема в специфічності, помилці в назві класу або в тому, що інше правило йде пізніше.
Властивості, без яких не обходиться верстка
Шпаргалка CSS для щоденної роботи майже завжди включає текст, відступи, розміри та модель блоку.
Текст і колір
Шпаргалка CSS для тексту зводиться до кількох ключових властивостей: color, font-size, font-weight, line-height і text-align. Вони керують читабельністю сильніше за будь-які декоративні ефекти.
Відступи та розміри
Шпаргалка CSS для відступів має пам’ятати різницю між margin і padding: margin створює зовнішній простір, padding — внутрішній. Для ширини й висоти часто використовують width, max-width, height і min-height.
Box model
Шпаргалка CSS для box model пояснює, що фактичний розмір елемента може змінюватися через padding і border. Щоб розрахунки були передбачуваними, часто ставлять box-sizing: border-box;.
Практична перевірка проста: якщо блок почав поводитися інакше після додавання padding, варто перевірити box-sizing і подивитися реальні розміри в інспекторі.
Flexbox і базова адаптивність
Шпаргалка CSS для сучасних макетів майже завжди включає Flexbox, бо він добре підходить для вирівнювання елементів у рядках і колонках.
- display: flex; — вмикає flex-контейнер
- justify-content — вирівнює по головній осі
- align-items — вирівнює по поперечній осі
- gap — задає проміжки між елементами
- flex-wrap — дозволяє переносити елементи
Для адаптивності найчастіше використовують max-width: 100%;, відсоткові ширини та медіазапити. Якщо блоки на мобільному ламають сітку, спочатку перевіряють фіксовані ширини, великі відступи й елементи, які не можуть стискатися.
Швидкі правила, які економлять час
Шпаргалка CSS стає справді корисною, коли в ній є не лише властивості, а й короткі робочі звички.
- Спочатку перевіряйте селектор, потім значення.
- Для нових макетів одразу задавайте box-sizing: border-box;.
- Після зміни flex-налаштувань дивіться на перенесення, вирівнювання і проміжки.
- Якщо стиль не видно, шукайте перекриття іншим правилом або медіазапитом.
- Для нестабільних блоків тестуйте поведінку в вузькому вікні браузера.
Добра шпаргалка CSS не замінює розуміння верстки, але помітно скорочує час на рутинні правки. Коли під рукою є правильні селектори, базові властивості й кілька перевірених прийомів, навіть складніший макет легше зібрати без зайвих пауз і пошуків.
