За что отвечает CSS

Основная ответственность CSS: оформление и макетирование

CSS (Cascading Style Sheets) отвечает за визуальное представление и структурное расположение элементов на веб-странице. Это отдельный уровень абстракции от HTML и JavaScript, каждый со своей ответственностью в триаде "Структура-Оформление-Логика".

Что входит в ответственность CSS

1. Визуальное оформление (Styling)

/* Цвета и текстура */
.button {
  background-color: #007bff;  /* Фон */
  color: white;                /* Цвет текста */
  border: 2px solid #0056b3;   /* Граница */
  border-radius: 4px;          /* Скругленные углы */
}

/* Типография */
.heading {
  font-family: "Segoe UI", sans-serif;
  font-size: 24px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0.5px;
}

/* Тени и эффекты */
.card {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
}

2. Макетирование и позиционирование (Layout)

/* Flexbox для гибких макетов */
.navbar {
  display: flex;
  justify-content: space-between;  /* Распределение по главной оси */
  align-items: center;             /* Выравнивание по поперечной */
  gap: 2rem;                       /* Расстояние между элементами */
}

/* CSS Grid для сложных сеток */
.dashboard {
  display: grid;
  grid-template-columns: 250px 1fr 300px;  /* 3 колонки */
  grid-gap: 2rem;
  min-height: 100vh;
}

/* Позиционирование */
.modal {
  position: fixed;                /* Относительно viewport */
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);  /* Центрирование */
}

/* Margin и Padding */
.container {
  margin: 2rem auto;      /* Внешние отступы */
  padding: 1rem;          /* Внутренние отступы */
  max-width: 1200px;
}

3. Адаптивность и отзывчивость (Responsiveness)

/* Mobile-first подход */
.product-card {
  width: 100%;           /* По умолчанию на весь экран */
  padding: 1rem;
}

/* Tablet и больше */
@media (min-width: 768px) {
  .product-card {
    width: 48%;          /* 2 колонки */
    padding: 1.5rem;
  }
}

/* Desktop и больше */
@media (min-width: 1024px) {
  .product-card {
    width: 23%;          /* 4 колонки */
    padding: 2rem;
  }
}

/* Гибкие размеры */
.header {
  font-size: clamp(16px, 4vw, 32px);  /* Масштабируется с viewport */
  width: min(90%, 1200px);             /* Макс ширина с отступами */
}

4. Анимации и переходы (Animations)

/* Простые переходы */
.button {
  background-color: blue;
  transition: background-color 0.3s ease;  /* Плавное изменение */
}

.button:hover {
  background-color: darkblue;  /* Изменяется со временем */
}

/* Сложные анимации */
@keyframes slideIn {
  from {
    transform: translateX(-100%);  /* Начальное состояние */
    opacity: 0;
  }
  to {
    transform: translateX(0);      /* Конечное состояние */
    opacity: 1;
  }
}

.modal {
  animation: slideIn 0.3s ease;  /* Применить анимацию */
}

/* CSS Transform для производительности */
.box {
  transition: transform 0.2s;  /* Лучше чем position */
}

.box:hover {
  transform: scale(1.05) rotate(2deg);  /* Трансформация */
}

5. Состояния элементов (States)

/* Pseudo-классы для состояний */

/* Ссылки */
a:link { color: blue; }        /* Не посещённая */
a:visited { color: purple; }   /* Посещённая */
a:hover { color: red; }        /* При наведении */
a:active { color: darkred; }   /* При клике */
a:focus { outline: 2px solid blue; }  /* При фокусе */

/* Форменные элементы */
input:disabled {
  opacity: 0.5;              /* Отключённый input */
  cursor: not-allowed;
}

input:invalid {
  border-color: red;         /* Невалидный input */
}

input:focus {
  outline: 2px solid blue;   /* При фокусе */
  box-shadow: 0 0 0 3px rgba(0, 0, 255, 0.1);
}

/* Custom классы для состояний */
.button.is-loading {
  opacity: 0.6;
  pointer-events: none;  /* Отключить клики */
}

.button.is-error {
  background-color: red;
}

6. Фильтры и эффекты (Effects)

/* Встроенные фильтры */
.image-grayscale {
  filter: grayscale(100%);  /* Чёрно-белое */
}

.image-blur {
  filter: blur(5px);        /* Размытие */
}

.image-bright {
  filter: brightness(1.2);  /* Яркость */
}

.image-saturated {
  filter: saturate(150%);    /* Насыщенность */
}

/* Комбинированные фильтры */
.image-complex {
  filter: brightness(1.1) contrast(1.2) saturate(1.3);
}

/* Backdrop фильтры (размытие фона) */
.modal-header {
  backdrop-filter: blur(10px);  /* Размытие элементов позади */
  background-color: rgba(255, 255, 255, 0.8);
}

7. Типография (Typography)

/* Загрузка шрифтов */
@font-face {
  font-family: "CustomFont";
  src: url("/fonts/custom.woff2") format("woff2");
}

/* Применение шрифтов */
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto;
  font-size: 16px;          /* Базовый размер */
  line-height: 1.6;         /* Высота строки */
  color: #333;              /* Цвет текста */
}

/* Форматирование текста */
.text-center { text-align: center; }
.text-truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.text-uppercase { text-transform: uppercase; }

/* Улучшение читаемости */
h1, h2, h3 {
  letter-spacing: -0.02em;   /* Уменьшить расстояние */
  line-height: 1.2;          /* Меньше для заголовков */
}

p {
  line-height: 1.8;          /* Больше для текста */
  hyphens: auto;             /* Переносы слов */
}

Что НЕ входит в ответственность CSS

/* НЕПРАВИЛЬНО — Логика пользовательского взаимодействия */
.button {
  /* CSS не может обработать клик самостоятельно */
  on-click: doSomething();  /* ❌ Этого нет! */
}

/* НЕПРАВИЛЬНО — Получение данных с сервера */
.item {
  /* CSS не может загружать данные */
  fetch: "/api/data";  /* ❌ Это делает JavaScript */
}

/* НЕПРАВИЛЬНО — Условная логика на основе состояния */
.item {
  /* Вместо этого используйте JavaScript для добавления класса */
  display: none if (isHidden);  /* ❌ Синтаксис неправильный */
  /* Правильно: */
  display: none;  /* CSS */
}

.item.hidden {
  display: none;  /* HTML + JS управляет классом */
}

CSS vs JavaScript vs HTML

<!-- HTML — Структура и семантика -->
<button id="submit-btn" class="btn btn-primary" type="submit">
  Отправить
</button>

<style>
  /* CSS — Визуальное представление -->
  #submit-btn {
    background-color: blue;
    padding: 10px 20px;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.3s;
  }
  
  #submit-btn:hover {
    background-color: darkblue;
  }
  
  #submit-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
  }
</style>

<script>
  // JavaScript — Поведение и логика
  const button = document.getElementById("submit-btn");
  
  button.addEventListener("click", () => {
    // Обработка клика
    button.disabled = true;
    button.textContent = "Отправка...";
    
    // Отправка данных
    fetch("/api/submit", { method: "POST" })
      .then(response => response.json())
      .then(data => {
        button.disabled = false;
        button.textContent = "Отправлено!";
      });
  });
</script>

Примеры Ответственности CSS

Пример 1: Навигационное меню

/* CSS отвечает за */
navbar { display: flex; background: #333; }
navbar a { color: white; padding: 1rem; text-decoration: none; }
navbar a:hover { background: #555; }  /* Визуальные эффекты */

Пример 2: Модальное окно

/* CSS отвечает за */
.modal { position: fixed; background: white; box-shadow: 0 4px 20px rgba(0,0,0,0.2); }
.modal.hidden { display: none; }  /* Видимость */

Пример 3: Форма

/* CSS отвечает за */
input { border: 1px solid #ccc; padding: 0.5rem; font-size: 16px; }
input:focus { border-color: blue; outline: none; box-shadow: 0 0 0 3px rgba(0,0,255,0.1); }
input.error { border-color: red; }

Ключевые выводы

CSS отвечает за:

1. Визуальное оформление элементов (цвета, тени, граница)
2. Макетирование и позиционирование (Flexbox, Grid)
3. Адаптивность и отзывчивость дизайна
4. Анимации и переходы между состояниями
5. Изначальные состояния элементов (hover, focus, disabled)
6. Типография и читаемость текста
7. Эффекты и фильтры

CSS НЕ отвечает за:

1. Обработку событий пользователя (это JavaScript)
2. Изменение DOM структуры (это JavaScript)
3. Загрузку и обработку данных (это JavaScript/Backend)
4. Сложную условную логику (это JavaScript)
5. Управление состоянием приложения (это JavaScript)

CSS — это инструмент для создания красивого, адаптивного и отзывчивого интерфейса. JavaScript добавляет интерактивность. Вместе они создают современные веб-приложения.