Frontend Советы

CSS переменные vs SCSS переменные - когда какие?

Сегодня покажу вам, как я выбираю между CSS custom properties (--var) и SCSS-переменными ($var). Оба инструмента решают похожую задачу, но работают в разное время и по-разному влияют на проект.

1) Как они живут

- SCSS $var - подставляются на этапе сборки. В итоговом CSS переменных уже нет. Быстро, просто, но не изменить в рантайме.
- CSS --var - существуют в браузере, участвуют в каскаде, могут меняться через медиа- и контейнер-запросы, селекторы, JS. Идеальны для тем, адаптивов и динамики.

2) Примеры на пальцах

Тема/бренд + тёмный режим (CSS)


:root { --primary: #4f46e5; }
.button { background: var(--primary); }

/* Тёмная тема меняет только значение */
.dark { --primary: #7c3aed; }

Адаптив без дублирования (CSS)


:root { --gap: 8px; }
@media (min-width: 768px) {
  :root { --gap: 16px; }
}
.grid { gap: var(--gap); }

Живая смена из JS (CSS)


document.documentElement.style.setProperty('--primary', '#22c55e');

Дизайн-токены, генерация классов (SCSS)


$colors: (
  primary: #4f46e5,
  success: #16a34a,
  danger:  #dc2626
);

@function color($name) { @return map-get($colors, $name); }

@each $name, $val in $colors {
  .text-#{$name} { color: $val; }
}

.btn--primary { background: color(primary); }

Флюидная типографика (CSS)


:root { --fs-h1: clamp(1.75rem, 1rem + 3vw, 3rem); }
h1 { font-size: var(--fs-h1); }

3) Когда что выбрать

- Берите SCSS $var, если:

- значения никогда не меняются в браузере;
- нужно удобно генерировать кучу классов/правил из карт и циклов;
- вы хотите ранний фейл при ошибке (компилятор сразу ругнётся).

- Берите CSS --var, если:

- требуется темизация, переключатели, A/B, кастомизация у пользователя;
- значения зависят от медиа/контейнер-запросов;
- хотите использовать calc(), clamp() и каскад как фичу.

4) Частые ошибки

- «Почему $primary не меняется в тёмной теме?» - потому что это SCSS и оно уже подставлено при сборке.
- var(--x) без фоллбэка:


  color: var(--link, #2563eb); /* ← безопаснее */

- Переопределение не там, где действует селектор. Помните: CSS-переменные каскадируют — задавайте их на нужной “высоте” (:root, .dark, контейнер).

5) Любимый гибрид-подход (очень практично)

- Храню источник правды в SCSS-карте → генерю из неё CSS-переменные в :root. Так у меня есть и удобство сборки, и сила рантайма.


$tokens: (
  primary: #4f46e5,
  spacing: 8px,
  radius: 12px
);

:root {
  @each $k, $v in $tokens {
    --#{$k}: #{$v};
  }
}

/* дальше в CSS / компоненте */
.card {
  padding: var(--spacing);
  border-radius: var(--radius);
  background: var(--primary);
}
.dark { --primary: #7c3aed; }

6) Мини-практика (сделайте прямо сейчас)

1. Возьмите ваш $colors в SCSS и сгенерируйте из него :root { --color-name: value }.
2. Переключите тему добавлением класса .dark на <html> и переопределите 2–3 ключевых токена.
3. Переведите один медиазависимый размер (например, `gap`) на CSS-переменную как в примере выше.

7) Чеклист напоследок

- Нужна динамика/тема/адаптив → CSS --var.
- Нужна генерация/сборка/статичность → SCSS $var.
- Большой проект? Делайте гибрид: токены → :root через SCSS.

👉@frontend_sovet

❤2

741 views09:10

Frontend Советы

🎨 CSS переменные: маленький хак для удобства

Сегодня хочу показать простой, но очень полезный приём при работе с CSS переменными.

Мы часто пишем что-то вроде:


:root {
  --primary-color: #4f46e5;
}
button {
  background: var(--primary-color);
}

Но что если переменная не определена? Браузер просто ничего не подставит. Чтобы подстраховаться, всегда задавайте fallback:


button {
  background: var(--primary-color, blue);
}

Теперь, даже если где-то вы забыли определить --primary-color, кнопка всё равно останется синим. 👍

Я лично часто использую это при темизации — можно быстро переключать темы, не боясь, что интерфейс "развалится".

Попробуйте применить у себя и посмотрите, насколько это уменьшит количество багов!

👉@frontend_sovet

👍4❤1

767 views18:16

Frontend Советы

🎨 Совет: не бойся CSS-переменных!

Сегодня хочу показать вам, как CSS-переменные реально упрощают жизнь фронтенд-разработчику.

Когда вы только начинаете изучать CSS, кажется, что переменные — это «фишка для продвинутых». Но на самом деле они помогают держать стиль проекта под контролем.

Пример 👇


:root {
  --main-color: #0ea5e9;
  --text-color: #1e293b;
}

body {
  background: var(--main-color);
  color: var(--text-color);
}

button {
  background: var(--main-color);
}

Теперь вы можете изменить цветовую схему всего проекта, просто поменяв значение --main-color в одном месте.
А если хотите сделать тёмную тему, достаточно переопределить эти переменные:


@media (prefers-color-scheme: dark) {
  :root {
    --main-color: #1e293b;
    --text-color: #f1f5f9;
  }
}

🔥 Всё — тёмная тема готова без лишнего кода!

Попробуйте применить это в своём проекте — даже маленьком. Потом уже не сможете без переменных 😄

👉@frontend_sovet

👍6🔥1

756 views09:40

Frontend Советы

3:53

This media is not supported in your browser

VIEW IN TELEGRAM

Сделать ошибки TypeScript более красивыми и человекочитаемыми в VSCode с помощью Pretty TypeScript Errors.

https://github.com/yoavbls/pretty-ts-errors

👉@frontend_sovet

👍2

698 views17:56

Frontend Советы

🔥 Сегодня разберём одну мелочь, которая часто делает код новичков неаккуратным — жёстко прописанные размеры.

Часто вижу такое:


.button {
  width: 200px;
  height: 50px;
}

❌ Проблема в том, что такие кнопки «ломаются» при адаптиве — текст не влезает, ширина не подстраивается под экран.

✅ Лучше так:


.button {
  padding: 12px 24px;
  display: inline-block;
}

Теперь размер зависит от контента, а не от фиксированных значений.
А если хочешь добавить гибкости — используй min-width или max-width, чтобы задать границы:


.button {
  padding: 12px 24px;
  min-width: 150px;
  max-width: 100%;
}

💡 Мой совет: всегда думай, нужно ли фиксировать размер, или можно доверить это контенту и адаптивности. В 80% случаев фиксированные размеры — зло 😄

👉@frontend_sovet

👍3

686 views07:52

Frontend Советы

Почему ваши UI-компоненты растут как снежный ком и как этого избежать

Когда один компонент делает всё: и рисует интерфейс, и тянет данные, и валидирует форму, и ещё 20 мелких задач. Такой код трудно поддерживать, тестировать и переиспользовать.

🧩 Как понять, что компонент уже перерос нормы?

- У него больше 200–250 строк.
- Он содержит и бизнес-логику, и сетевые запросы, и рендер - всё вперемешку.
- В нём много useEffect, часть из которых «о чём-то своём».
- Вы боитесь открыть файл, потому что там хаос.

🛠️ Что делать, чтобы этого избежать?

1. Выносите бизнес-логику в кастомные хуки

Например, вместо:


function UsersList() {
  const [users, setUsers] = useState([]);

  useEffect(() => {
    fetch('/api/users').then(r => r.json()).then(setUsers);
  }, []);

  return users.map(u => <UserCard key={u.id} user={u} />);
}

Сделайте:


function useUsers() {
  const [users, setUsers] = useState([]);

  useEffect(() => {
    fetch('/api/users').then(r => r.json()).then(setUsers);
  }, []);

  return users;
}

function UsersList() {
  const users = useUsers();
  return users.map(u => <UserCard key={u.id} user={u} />);
}

UI остаётся чистым.

2. Разделяйте компонент на контейнер и представление

- Контейнер — получает данные и передаёт вниз.
- Представление — только отображает.

3. Удаляйте «лишние» обязанности

Если компонент отвечает больше чем за одну задачу, значит это уже два компонента.

4. Не бойтесь мелких файлов

Один компонент = один файл = одна ответственность.

👉@frontend_sovet

👍1

667 views21:25

Frontend Советы

Шпаргалка по CSS

👉@frontend_sovet

👍4🔥2

849 views09:02

Frontend Советы

Как проверить, что данная строка является анаграммой другой строки в JavaScript?

Анаграмма — приём, состоящий в перестановке букв или звуков определённого слова, что в результате даёт другое слово или словосочетание. Несколько примеров анаграмм на английском:

1. evil = vile
2. a gentleman = elegant man
3. eleven plus two = twelve plus one

Так как же проверить, являются ли строки анаграммами в JS? На картинке пример кода, реализующий проверку с помощью встроенных функций.

👉@frontend_sovet

👍2❤1

736 views04:21

Frontend Советы

🎨 CSS Tip: Как скрыть контент визуально, но оставить его доступным

В погоне за минималистичным дизайном мы часто используем иконки без подписей. Но для пользователей скринридеров (и для SEO!) кнопка без текста - это проблема.

❌ Ошибка: Использовать display: none, visibility: hidden или opacity: 0.
Эти свойства полностью убирают элемент из дерева доступности. Скринридер его просто проигнорирует.

✅ Решение: Паттерн .visually-hidden (или .sr-only).
Этот класс заставляет элемент «исчезнуть» с экрана, но остаться в DOM и быть доступным для ассистивных технологий.

Разбор магии из сниппета:

1. position: absolute - убираем элемент из потока документа, чтобы он не занимал место.
2. width: 1px; height: 1px - некоторые скринридеры игнорируют элементы с нулевыми размерами, поэтому оставляем 1 пиксель.
3. overflow: hidden - скрываем контент, который не влезает в наш 1 пиксель.
4. white-space: nowrap - предотвращаем перенос текста (если текст разобьется на строки в 1px, скринридер может прочитать его некорректно).
5. clip-path: circle(0) - финальный штрих, полностью обрезаем видимую область этого 1 пикселя.

📌 Сниппет:


.visually-hidden {
  /* Убираем из потока */
  position: absolute;
  
  /* Размеры 1px, чтобы скринридер не игнорировал элемент */
  width: 1px;
  height: 1px;
  
  /* Скрываем всё, что не влезает */
  overflow: hidden;
  
  /* Запрещаем перенос строк */
  white-space: nowrap;
  
  /* Обрезаем визуальную часть */
  clip-path: circle(0);
  
  /* Альтернативные варианты скрытия: */
  /* transform: scale(0); */
  /* transform: translateX(-9999px); */
}

Итог:
✅ Виден для Screen Reader
✅ Перехватывает фокус (если это интерактивный элемент)
❌ Не занимает места в верстке
❌ Не реагирует на клики мыши (но работает с клавиатуры)

👉@frontend_sovet

❤1👍1

750 views08:28

Frontend Советы

⚛️ Как я перестал бояться useEffect и упростил код

Сегодня разберём проблему, которую я постоянно вижу в React-проектах - перегруженный useEffect.

Типичная картина:


useEffect(() => {
  fetchData();
  logEvent();
  updateTitle();
}, [user, token, locale, theme]);

❌ Что здесь не так:

🔘эффект делает слишком много
🔘зависимости растут как снежный ком
🔘любое изменение ломает логику
🔘сложно тестировать и дебажить

✅ Что я начал делать вместо этого

1. Один useEffect - одна причина


useEffect(() => {
  fetchData(user, token);
}, [user, token]);


useEffect(() => {
  updateTitle(locale);
}, [locale]);

2. Логику выношу в кастомные хуки


useUserData(user, token);
usePageTitle(locale);

Компонент сразу становится читабельным:


function Profile() {
  useUserData(user, token);
  usePageTitle(locale);

  return <UI />;
}

3. Не боюсь useCallback и useMemo, но использую осознанно

Не для «оптимизации ради оптимизации», а чтобы:

🔘стабилизировать зависимости
🔘убрать лишние перерендеры
🔘сделать поведение предсказуемым

👉@frontend_sovet

Please open Telegram to view this post

VIEW IN TELEGRAM

👍2

845 views18:10

Frontend Советы

CSS совет 💡

Проявите креативность с текстом всего с 3 строками CSS-кода ✨

👉@frontend_sovet

👍1

458 views07:17

Frontend Советы

🚀 Подборка полезных IT каналов в Max

Системное администрирование, DevOps 📌

https://max.ru/i_odmin Все для системного администратора
https://max.ru/bash_srv Bash Советы
https://max.ru/sysadminof Книги для админов, полезные материалы
https://max.ru/i_odmin_book Библиотека Системного Администратора
https://max.ru/i_devops DevOps: Пишем о Docker, Kubernetes и др.

1C разработка 📌
https://max.ru/odin1c_rus Cтатьи, курсы, советы, шаблоны кода 1С

Программирование C++📌
https://max.ru/cpp_lib Библиотека C/C++ разработчика

Программирование Python 📌
https://max.ru/python_of Python академия.
https://max.ru/BookPython Библиотека Python разработчика

Java разработка 📌
https://max.ru/bookjava Библиотека Java разработчика

GitHub Сообщество 📌
https://max.ru/githublib Интересное из GitHub

Базы данных (Data Base) 📌
https://max.ru/database_info Все про базы данных

Фронтенд разработка 📌
https://max.ru/frontend_1 Подборки для frontend разработчиков

Библиотеки 📌
https://max.ru/programmist_of Книги по программированию
https://max.ru/proglb Библиотека программиста
https://max.ru/bfbook Книги для программистов

Программирование 📌
https://max.ru/bookflow Лекции, видеоуроки, доклады с IT конференций
https://max.ru/itmozg Программисты, дизайнеры, новости из мира IT
https://max.ru/php_lib Библиотека PHP программиста 👨🏼‍💻👩‍💻

Шутки программистов 📌
https://max.ru/itumor Шутки программистов

Защита, взлом, безопасность 📌
https://max.ru/thehaking Канал о кибербезопасности
https://max.ru/xakkep_1 Хакер Free

Книги, статьи для дизайнеров 📌
https://max.ru/odesigners Статьи, книги для дизайнеров

Математика 📌
https://max.ru/Pomatematike Канал по математике
https://max.ru/phismat_1 Обучающие видео, книги по Физике и Математике

Вакансии 📌
https://max.ru/progjob Вакансии в IT

Мир технологий 📌
https://max.ru/mir_teh Канал для любознательных

Бонус 📌
https://max.ru/piterspb_78 Свежие новости Санкт-Петербурга
https://max.ru/mockva_life Свежие новости Москвы

MAX

Системный Администратор | Sysadmin Windows & Linux Server. …

Купить рекламу: https://telega.in/m/i_odmin

Блог практикующего админа. Настройка Windows Server, Active Directory (AD), GPO и терминальных серверов (RDP). Раб…

👎6💩4🤡1

417 views09:11

Frontend Советы

⚛️ Прощай, e.preventDefault(): Нативные формы в React

Управление формами в React всегда требовало кучи бойлерплейта: отдельные useState для данных, лоадеров и ошибок, ручной try/catch и обязательный e.preventDefault().

В React 19 появились Actions и новые хуки, которые забирают эту рутину на себя, используя нативные возможности браузера.

1. useActionState (Стейт формы)
Позволяет привязать асинхронную функцию к форме и автоматически сохранять результат её выполнения (например, сообщения об ошибках).

2. useFormStatus (Контекст лоадера)
Позволяет дочерним элементам читать статус родительской формы (загрузка, отправленные данные). Больше не нужно прокидывать пропс isLoading сквозь всё дерево компонентов.

🚀 Как это выглядит на практике:


import { useActionState, useFormStatus } from "react";

// 1. Асинхронный экшен (может быть и Server Action)
async function createUserAction(prevState, formData) {
  const name = formData.get("name");
  
  if (!name) return { error: "Имя обязательно!" };
  
  await fetch("/api/users", { method: "POST", body: name });
  return { success: true, message: "Пользователь создан!" };
}

// 2. Изолированная кнопка, которая "знает" о статусе загрузки
function SubmitButton() {
  const { pending } = useFormStatus();
  return (
    <button disabled={pending}>
      {pending ? "Сохраняем..." : "Создать"}
    </button>
  );
}

// 3. Сама форма
export function UserForm() {
  const [state, formAction] = useActionState(createUserAction, null);

  return (
    // Просто передаем action в форму! Никаких onSubmit.
    <form action={formAction}>
      <input name="name" placeholder="Введите имя" />
      
      {state?.error && <p className="error">{state.error}</p>}
      {state?.success && <p className="success">{state.message}</p>}
      
      <SubmitButton />
    </form>
  );
}

🧠 Senior-нюансы:
• Где вызывать useFormStatus? Он работает под капотом как Context API. Поэтому его нужно вызывать только в дочерних компонентах внутри <form>. Если вызвать его в компоненте UserForm из примера выше, pending всегда будет false.

• Progressive Enhancement: Если вы используете фреймворк с SSR (например, Next.js), такая форма может отправить данные даже если JavaScript на клиенте еще не загрузился или вовсе отключен.

👉@frontend_sovet

👍1

395 views09:20

Frontend Советы

🚀 Подборка полезных IT каналов в Max

Системное администрирование, DevOps 📌

https://max.ru/i_odmin Все для системного администратора
https://max.ru/bash_srv Bash Советы
https://max.ru/sysadminof Книги для админов, полезные материалы
https://max.ru/i_odmin_book Библиотека Системного Администратора
https://max.ru/i_devops DevOps: Пишем о Docker, Kubernetes и др.
https://max.ru/tipsysdmin Типичный Сисадмин

1C разработка 📌
https://max.ru/odin1c_rus Cтатьи, курсы, советы, шаблоны кода 1С

Программирование C++📌
https://max.ru/cpp_lib Библиотека C/C++ разработчика

Программирование Go📌
https://max.ru/golang_lib Библиотека Go (Golang) разработчика

Программирование React📌
https://max.ru/react_lib React

Программирование Python 📌
https://max.ru/python_of Python академия.
https://max.ru/BookPython Библиотека Python разработчика

Java разработка 📌
https://max.ru/bookjava Библиотека Java разработчика

GitHub Сообщество 📌
https://max.ru/githublib Интересное из GitHub

Базы данных (Data Base) 📌
https://max.ru/database_info Все про базы данных

Фронтенд разработка 📌
https://max.ru/frontend_1 Подборки для frontend разработчиков

Библиотеки 📌
https://max.ru/programmist_of Книги по программированию
https://max.ru/proglb Библиотека программиста
https://max.ru/bfbook Книги для программистов

Программирование 📌
https://max.ru/bookflow Лекции, видеоуроки, доклады с IT конференций
https://max.ru/itmozg Программисты, дизайнеры, новости из мира IT
https://max.ru/php_lib Библиотека PHP программиста 👨🏼‍💻👩‍💻

Шутки программистов 📌
https://max.ru/itumor Шутки программистов

Защита, взлом, безопасность 📌
https://max.ru/thehaking Канал о кибербезопасности
https://max.ru/xakkep_1 Хакер Free

Книги, статьи для дизайнеров 📌
https://max.ru/odesigners Статьи, книги для дизайнеров

Математика 📌
https://max.ru/Pomatematike Канал по математике
https://max.ru/phismat_1 Обучающие видео, книги по Физике и Математике

Вакансии 📌
https://max.ru/progjob Вакансии в IT

Мир технологий 📌
https://max.ru/mir_teh Канал для любознательных

Бонус 📌
https://max.ru/piterspb_78 Свежие новости Санкт-Петербурга
https://max.ru/mockva_life Свежие новости Москвы

MAX

Bash Советы - Bash Scripting | Linux Terminal & Shell. Скри…

Укроти командную строку. Пишем эффективные Bash-скрипты для сервера и десктопа. Магия текстовой обработки: Grep, Sed, Awk и регулярные выражения (Regex). Настр…

💩2👍1

450 viewsedited 09:56

Frontend Советы

Совет по CSS 💡

Знаете ли вы о свойстве shape-outside в CSS?

Demo https://www.codewithshripal.com/playground/css/shape-outside

👉@frontend_sovet

👍2

320 views15:34

About

Blog

Apps

Platform