Налаштування стилів CSS та SCSS в компонентах

Jul 8, 2024

Лекція: Налаштування стилів CSS та SCSS в компонентах

Основні моменти

  • Переконайтеся, що стилі підключені правильно в CSS/SCSS.
  • Перегляньте назви компонентів і змініть їх за потреби.
  • Перевірте підключення шрифтів через link або import в index.html.
  • Використовуйте інспектор браузера для діагностики проблем зі стилями.
  • Звертайтеся до компонентів правильно, перевіряйте правильність назв і синтаксису.
  • Використовуйте модулі SCSS для коректного застосування стилів.

Поради по налагодженню стилів

  • CSS: Перевірте коректність значень таких властивостей, як justify-content, align-items, gap, column-gap.
  • Media Queries: Пробуйте прибрати width для певних елементів, щоб перевірити, чи це впливає на відображення.
  • Ієрархія стилів: Переконайтеся, що стилі мають правильну ієрархію, наприклад, section .item {}.
  • Використання класів: Додавайте класи відповідно до умов, перевіряйте правильність умов логіки.

Процес роботи з компонентами

  • Імпорт стилів: Підключайте стилі через імпорт у відповідні компоненти. Наприклад, імпорт CSS у індексний HTML файл.
  • Файлова структура: Створіть папки для різних компонентів для зручності, наприклад articles, і включайте всі необхідні файли.
  • CSS модулі: Використовуйте CSS модулі для компонентів, роблячи стиль більш локальним та контрольованим.

Діагностика проблем

  • Помилки при імпорті: Перевіряйте правильність шляхів та назв файлів при імпорті стилів для уникнення помилок.
  • Інспектор стилів: Використовуйте інспектор браузера для перевірки застосованих стилів і діагностики проблем.
  • Правильність властивостей: Якщо властивості не працюють, спробуйте відмовитися від зайвих значень або змінити їх, наприклад, використовуючи % замість px.

Практичні поради

  • Після внесення змін зберігайте файли та оновлюйте сторінку для перевірки ефекту змін.
  • Для кожного нового елементу перевіряйте коректність іменування та властивостей.
  • Виконуйте невеликі проміжні перевірки, щоб упевнитися, що ви на правильному шляху.

Домашнє завдання

  • Спробуйте створити статті (компоненти articles), використовуючи приклад з лекції.
  • Використовуйте різні дизайни та стилі для практики.

Це основні моменти з лекції по налаштуванню стилів CSS та SCSS в компонентах, які допоможуть вам краще розібратися з темою та застосувати ці знання на практиці.