Модуль 36

CSS у великих проєктах

Ось готовий урок, створений у стилі CS50: енергійний, з аналогіями та акцентом на розумінні «чому».

🎓 Урок: CSS у великих проєктах (Архітектура та Масштабування)

Привіт! Радий бачити вас. Сьогодні ми не просто пишемо код, ми будуємо архітектуру.

Давайте почнемо з простого запитання: хто з вас коли-небудь писав CSS, а потім боявся щось змінити, бо це могло зламати щось в іншому кінці сайту? (Підніміть руку подумки ✋).

Якщо так — ви не одні. Це класична проблема масштабування. Сьогодні ми навчимося, як не перетворити наш проєкт на картковий будиночок.

1. 🔥 Вступ: Хаос у шафі

Уявіть, що ви живете самі в однокімнатній квартирі. Ваші шкарпетки лежать на стільці, футболки — на ліжку, а ключі — десь на столі. Ви точно знаєте, де що лежить. Це — ваш маленький CSS-файл на 50 рядків. Все просто.

А тепер уявіть, що ви керуєте величезним складом Amazon. Там працює 100 людей. Якщо ви просто кинете товар "на стілець", ніхто його ніколи не знайде. Або ще гірше: хтось подумає, що це сміття, і викине.

У великих проєктах CSS має дві страшні проблеми: 1. Глобальний простір імен (Global Scope): Якщо ви назвете клас .button, він застосується до всіх кнопок на сайті. І до кнопки "Купити", і до кнопки "Видалити акаунт". Ви хочете змінити одну, а ламаєте всі. 2. Війни специфічності (Specificity Wars): Це коли ви пишете div ul li a { color: red; }, щоб перебити попередній стиль, а ваш колега пише body div ul li a { color: blue !important; }. Це перетворюється на гонку озброєнь, де переможців немає.

Навіщо нам цей урок? Щоб ви могли писати CSS, який можна підтримувати роками, навіть якщо в команді 20 розробників.

2. 🧠 Теоретична база: Розділяй і володарюй

Як ми вирішуємо цю проблему? Ми перестаємо думати "сторінками" і починаємо думати "компонентами".

Що таке Компонентний підхід?

Це як LEGO. Ви не будуєте замок із суцільного шматка пластику. Ви будуєте його з маленьких цеглинок. * Кнопка — це компонент. * Картка товару — це компонент. * Меню навігації — це компонент.

Компонент має бути незалежним. Якщо ви вирвете кнопку з "шапки" сайту і вставите її в "підвал", вона має виглядати так само.

Методологія BEM (Block, Element, Modifier)

Це не технологія, це угода про іменування. Це найпопулярніший спосіб організації CSS у світі.

  • Block (Блок): Це сам компонент. Незалежний контейнер.
    • Приклад: .card
  • Element (Елемент): Частина блоку, яка не має сенсу без нього.
    • Приклад: .card__title (два підкреслення __ означають "всередині").
  • Modifier (Модифікатор): Варіант або стан блоку.
    • Приклад: .card--featured (два дефіси -- означають "модифікація", наприклад, "важлива картка").

Що треба запам’ятати залізно:

Ми намагаємося уникати вкладеності в CSS. Замість ul li a, ми даємо класу унікальне ім'я .menu__link.

Інтуїтивно: Читаючи ім'я класу, ви повинні розуміти, де цей елемент знаходиться і що він робить, навіть не дивлячись у HTML.

3. 🧪 Приклади: Від спагеті до структури

Приклад 1: Як роблять новачки (Spaghetti CSS) ❌

Дивіться сюди. Виглядає наче нормально, правда?

/* style.css */
.article {
  background: white;
}

.title { /* Занадто загальна назва! */
  font-size: 20px;
  color: black;
}

.button { /* Вплине на всі кнопки сайту */
  background: blue;
}

Що тут не так? Якщо я додам на сторінку віджет погоди, у якого теж є .title, стилі статті і погоди перемішаються. Це катастрофа.

Приклад 2: BEM у дії ✅

Перепишемо це "по-дорослому".

<!-- HTML -->
<article class="news-card news-card--large">
  <h2 class="news-card__title">Новий iPhone вийшов</h2>
  <button class="news-card__btn">Читати далі</button>
</article>

/* CSS */
/* Блок */
.news-card {
  background: white;
  padding: 20px;
}

/* Модифікатор блоку */
.news-card--large {
  font-size: 1.2em;
  border: 2px solid gold;
}

/* Елемент */
.news-card__title {
  font-weight: bold;
  /* Ми не пишемо .news-card .title — ми даємо унікальне ім'я! */
}

/* Елемент */
.news-card__btn {
  background: blue;
  color: white;
}

Запитання до вас: Чому я назвав кнопку .news-card__btn, а не просто .btn? Пауза на роздуми... Відповідь: Тому що це кнопка, яка специфічна саме для цієї картки новини. Якщо у нас буде глобальна кнопка, ми назвемо її .btn, але для унікальних елементів ми використовуємо прив'язку до блоку.

Приклад 3: Змінні (Custom Properties) — Сила масштабу

У великому проєкті ви не пишете #007bff (синій колір) у 50 місцях. Бо коли дизайнер скаже: "Давайте зробимо сайт трохи фіолетовим", ви будете плакати.

Ви робите так:

:root {
  --main-color: #007bff;
  --spacing-unit: 16px;
}

.news-card__btn {
  background-color: var(--main-color);
  padding: var(--spacing-unit);
}

.header {
  background-color: var(--main-color); /* Той самий колір! */
}

Тепер, змінивши один рядок у :root, ви змінюєте дизайн усього величезного порталу. Це магія? Ні, це інженерія.

4. 🛠 Практична частина

Прийшов час забруднити руки кодом.

Завдання 1: Рефакторинг (BEM) У вас є такий код:

<div class="profile">
  <img class="photo" src="user.jpg">
  <span class="name">David Malan</span>
</div>

Перепишіть класи в HTML, використовуючи методологію BEM.

Завдання 2: Створення модифікатора Додайте до вашого коду з Завдання 1 клас-модифікатор для профілю, який є "активним" (наприклад, зелена рамка навколо фото). Як ви назвете цей клас?

Завдання 3: "А що, якщо..." Уявіть, що ви використовуєте клас .profile__name. Що станеться, якщо ви напишете в CSS такий селектор: .sidebar .profile__name { color: red; } Чи це гарна ідея в рамках BEM? (Підказка: ми говорили про вкладеність).

Завдання 4: Міні-кейс Створіть змінні CSS для "Темної теми". 1. Визначте --bg-color і --text-color для світлої теми. 2. Використайте їх для body та .card. 3. Додайте медіа-запит @media (prefers-color-scheme: dark), де змініть значення цих змінних.

5. 💡 Мислення як у розробника

Як думає Senior Frontend Developer, дивлячись на макет?

  1. Він не бачить сторінку. Він бачить набір прямокутників (компонентів).
  2. Він боїться слова !important. Якщо вам доводиться писати !important, значить, ваша архітектура десь дала тріщину. Це як заклеювати дірку в кораблі скотчем. Працює, але ненадовго.
  3. Він любить довгі назви класів. .c-btn — це погано. .checkout-form__submit-button — це чудово. Код читають люди, а не машини. Чим зрозуміліша назва, тим менше документації треба писати.

Типова помилка новачка: Намагатися повторити структуру HTML у CSS.

/* ❌ ПОГАНО */
.header > nav > ul > li > a { ... }

Це називається "крихкий код". Варто змінити ul на div у HTML, і весь CSS зламається. BEM вирішує це, бо ви просто звертаєтесь до .nav__link, і йому байдуже, де він лежить.

6. 🧩 Підсумок

Сьогодні ми зробили великий крок від "кодера" до "архітектора".

  • Ви зрозуміли, що глобальний простір імен — це ворог у великих проєктах.
  • Ви навчилися використовувати BEM, щоб ізолювати стилі (Блок, Елемент, Модифікатор).
  • Ви побачили, як CSS змінні рятують вас від рутинної роботи при редизайні.

Тепер ви можете відкрити будь-який великий сайт (наприклад, Airbnb або сайт вашого улюбленого банку), подивитися в інспектор коду і побачити там знайомі патерни: __, -- і довгі зрозумілі назви.

Що далі? Тепер, коли у нас є порядок у назвах, виникає питання: "А чи не можна писати CSS швидше? Наприклад, використовувати цикли або функції?". Спойлер: Можна. На наступному уроці ми поговоримо про SASS та препроцесори — інструменти, які роблять CSS справжньою мовою програмування.

Це був CS50. Побачимось!

← До списку уроків Наступний урок →