🤔 Почему не пишем все стили в style?

Писать все стили в style (inline-стили) сложно поддерживать и переопределять. Внешние CSS-файлы и классы обеспечивают лучшее разделение кода, читаемость, переиспользование и производительность за счёт кеширования.

Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу знаний

🤔 Как изменить направление оси flexbox контейнера?

Чтобы изменить направление оси flexbox-контейнера, нужно использовать свойство CSS flex-direction. Это свойство определяет основную ось контейнера и направление размещения flex-элементов.

🚩Возможных значения flex-direction

🟠row:
Основная ось — горизонтальная, элементы располагаются слева направо. Это значение по умолчанию.
🟠row-reverse:
Основная ось — горизонтальная, элементы располагаются справа налево.
🟠column:
Основная ось — вертикальная, элементы располагаются сверху вниз.
🟠column-reverse:
Основная ось — вертикальная, элементы располагаются снизу вверх.

🚩Примеры использования:

Горизонтальное направление (слева направо):

.container {
    display: flex;
    flex-direction: row; /* или просто не указывать, так как это значение по умолчанию */
}

Горизонтальное направление (справа налево):

.container {
    display: flex;
    flex-direction: row-reverse;
}

Вертикальное направление (сверху вниз):

.container {
    display: flex;
    flex-direction: column;
}

Вертикальное направление (снизу вверх):

.container {
    display: flex;
    flex-direction: column-reverse;
}

Пример HTML и CSS:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Flexbox Direction</title>
    <style>
        .container {
            display: flex;
            flex-direction: row; /* Измените значение на row-reverse, column, или column-reverse для проверки разных направлений */
            border: 1px solid #000;
            height: 200px;
        }
        .item {
            flex: 1;
            border: 1px solid #ccc;
            padding: 10px;
            margin: 5px;
            text-align: center;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="item">Item 1</div>
        <div class="item">Item 2</div>
        <div class="item">Item 3</div>
    </div>
</body>
</html>

Ставь 👍 и забирай 📚 Базу знаний

🤔 Какие плюсы и минусы есть у BFF (Backend for Frontend)?

Плюсы:
- Специфичная логика API под каждый фронт (web, mobile).
- Снижение объёма данных, оптимизация под UI.
- Централизация бизнес-логики UI.
Минусы:
- Увеличение количества слоёв и кода.
- Поддержка нескольких BFF может дублировать работу.
- Дополнительная нагрузка и задержка.

Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу знаний

🤔 Какая есть важная особенность у pipe?

Это популярная концепция в программировании, особенно в функциональных языках и библиотеках вроде RxJS (в контексте реактивного программирования). Она используется для последовательного применения функций к данным.

🚩Почему это важно?

🟠Чистота
pipe работает с чистыми функциями, которые не изменяют исходные данные и возвращают новый результат. Это повышает предсказуемость кода.
🟠Композиция
Вместо вложенных вызовов функций (когда результат одной функции передается в другую) pipe упрощает цепочку, делая её линейной.
🟠Читаемость
Код становится проще для понимания, особенно если функций много.
🟠Легкость модификации
Можно легко добавлять или удалять шаги в цепочке, не меняя структуру кода.

🚩Как работает `pipe`?

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

🚩Пример реализации простого `pipe`

const pipe = (...functions) => (input) => 
  functions.reduce((acc, fn) => fn(acc), input);

// Пример функций
const multiplyByTwo = (num) => num * 2;
const addThree = (num) => num + 3;
const square = (num) => num ** 2;

// Использование pipe
const processNumber = pipe(multiplyByTwo, addThree, square);

console.log(processNumber(5)); // ((5 * 2) + 3) ** 2 = 121

🚩Использование в RxJS

В контексте RxJS pipe используется для работы с потоками данных, где через него можно передавать операторы, такие как map, filter, mergeMap и другие.

import { of } from 'rxjs';
import { map, filter } from 'rxjs/operators';

// Создаем поток данных
const numbers$ = of(1, 2, 3, 4, 5);

// Используем pipe для применения операторов
numbers$
  .pipe(
    filter((num) => num % 2 === 0), // Оставляем только четные
    map((num) => num * 10)          // Умножаем их на 10
  )
  .subscribe((result) => console.log(result)); 
// Вывод: 20, 40

Ставь 👍 и забирай 📚 Базу знаний

🤔 Расскажи про memo в react

React.memo — это функция в React, которая используется для оптимизации производительности функциональных компонентов. Она предотвращает ненужные повторные рендеры, если пропсы компонента не изменились.

🚩Зачем нужен `React.memo`?

В React каждый раз, когда родительский компонент обновляется, все его дочерние компоненты тоже ререндерятся, даже если их пропсы остались неизменными. Это может негативно сказаться на производительности, особенно если дочерний компонент выполняет сложные вычисления или рендерит большое количество данных.
React.memo решает эту проблему, запоминая (мемоизируя) предыдущий результат рендера и сравнивая его с новыми пропсами. Если пропсы не изменились, компонент просто использует закэшированное представление, а не ререндерится.

🚩Как использовать `React.memo`?

React.memo — это функция высшего порядка (HOC), которая оборачивает функциональный компонент

import React from "react";

const MyComponent = ({ value }) => {
  console.log("Рендер компонента!");
  return <div>Значение: {value}</div>;
};

// Оборачиваем компонент в React.memo
const MemoizedComponent = React.memo(MyComponent);

export default MemoizedComponent;

🚩Пример без React.memo vs. с React.memo

Допустим, у нас есть родительский компонент, который изменяет состояние при каждом клике

import React, { useState } from "react";
import MemoizedComponent from "./MyComponent";

const Parent = () => {
  const [count, setCount] = useState(0);

  return (
    <div>
      <button onClick={() => setCount(count + 1)}>Увеличить</button>
      <MemoizedComponent value="Привет, мир!" />
    </div>
  );
};

export default Parent;

🚩Когда НЕ стоит использовать `React.memo`?

Если компонент всегда ререндерится из-за изменения пропсов – смысла в memo нет.
Если компонент рендерится быстро – оптимизация может быть ненужной, а проверка пропсов даже замедлит работу.
Если пропсы часто изменяются – кэширование теряет смысл, так как все равно ререндерится.

Ставь 👍 и забирай 📚 Базу знаний

🤔 Что такое переменная?

Переменная — это именованная область памяти, в которой хранится значение. Она позволяет повторно использовать данные, изменять их и передавать между частями программы.

Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу знаний

🔥 Скрытые вакансии с удаленной работой для Frontend разработчика, которые нигде больше не публикуются. Напрямую от компаний, с контактами рекрутеров.

🔹 Frontend Jobs | Вакансии
🔹 Node.js Jobs | Вакансии

🔸 Все каналы с вакансиями

🤔 Когда брать абсолютные величины а когда относительные?

Выбор между абсолютными и относительными единицами измерения зависит от контекста использования и целей, которые вы преследуете. Рассмотрим подробнее, когда и почему стоит использовать те или иные единицы.

🚩Абсолютные величины (например, px, pt, cm, in)

Имеют фиксированные размеры и не зависят от других элементов или размеров экрана. Они всегда остаются одинаковыми, независимо от контекста.

🚩Когда использовать

1⃣Пиксели (`px`)
Точные размеры: Когда вам нужно задать точные размеры элементов, например, для пиксельной точности в дизайне.
Фиксированные элементы: Для элементов, размеры которых не должны изменяться в зависимости от экрана или родительского элемента (например, логотипы или иконки).
Маленькие декоративные элементы: Когда размеры элементов настолько малы, что относительные единицы могут привести к неконтролируемому результату.

.logo {
  width: 100px;
  height: 50px;
}

🚩Относительные величины (например, %, em, rem, vw, vh)

Изменяются в зависимости от других элементов или размеров экрана. Они позволяют создавать более гибкие и адаптивные макеты.

🟠Проценты (`%`)
Адаптивные макеты: Когда нужно, чтобы элемент занимал определенный процент от размера родительского элемента.
Контейнеры и блоки: Для ширины и высоты блоков, которые должны изменяться вместе с размерами родителя.

.container {
  width: 80%;
  height: 50%;
}

🟠Эм (`em`)
Шрифты: Когда нужно задавать размер шрифта относительно размера шрифта родителя.
Внутренние отступы и поля: Для создания элементов, которые масштабируются вместе с текстом.

.text {
  font-size: 1.2em;
  margin: 1em;
}

🟠Рем (`rem`):
Глобальная консистентность: Когда нужно задавать размер относительно корневого элемента (обычно <html>), что обеспечивает более предсказуемое масштабирование.
Шрифты и отступы: Для элементов, которые должны быть пропорциональны базовому размеру шрифта

body {
  font-size: 16px;
}

.header {
  font-size: 2rem; /* 32px */
  margin: 1rem;    /* 16px */
}

🟠Вьюпорт (`vw`, `vh`):
Адаптивные размеры: Когда размеры элементов должны быть пропорциональны размеру вьюпорта (окна браузера).
Фоновые изображения и видео: Для элементов, которые должны занимать определенный процент от экрана.

.hero {
  width: 100vw;
  height: 100vh;
}

🚩Комбинированное использование

Иногда можно комбинировать абсолютные и относительные единицы для достижения наилучшего результата.

.container {
  width: 80%;  /* Относительная ширина */
  padding: 20px; /* Абсолютный внутренний отступ */
}

.text {
  font-size: 1.5rem; /* Относительный размер шрифта */
  margin: 2em; /* Относительный внешний отступ */
}

Ставь 👍 и забирай 📚 Базу знаний

🤔 С помощью чего можно рассчитать идентификатор в js?

В JavaScript есть несколько способов сгенерировать уникальный идентификатор (ID), в зависимости от требований:

🟠 Генерация UUID
UUID (универсально уникальный идентификатор) – это 128-битное число, представленное строкой в формате xxxxxxxx-xxxx-Mxxx-Nxxx-xxxxxxxxxxxx.
Генерация с помощью crypto.randomUUID() (современный способ)

const id = crypto.randomUUID();
console.log(id); // Например: "3d593c8e-7a34-45f7-9a14-2f5f5788d4ec"

Использование библиотеки uuid

import { v4 as uuidv4 } from 'uuid';

const id = uuidv4();
console.log(id); // "f47ac10b-58cc-4372-a567-0e02b2c3d479"

🟠Хеш-функции (SHA, MD5)
Если нужно вычислить уникальный идентификатор на основе входных данных (например, строки или объекта), можно использовать хеш-функции.
SHA-256 через crypto.subtle

async function generateHash(input) {
    const encoder = new TextEncoder();
    const data = encoder.encode(input);
    const hashBuffer = await crypto.subtle.digest('SHA-256', data);
    return [...new Uint8Array(hashBuffer)].map(b => b.toString(16).padStart(2, '0')).join('');
}

generateHash("hello").then(console.log);
// Например: "2cf24dba5fb0a30e26e83b2ac5b9e29e1b161e5c1fa7425e73043362938b9824"

🟠Генерация случайного идентификатора
Если нужна просто случайная строка, можно использовать Math.random().
Базовая генерация ID

const id = Math.random().toString(36).substring(2, 10);
console.log(id); // Например: "5g7f8a1z"

Более безопасный вариант с crypto.getRandomValues()

function generateRandomId(length = 16) {
    const array = new Uint8Array(length);
    crypto.getRandomValues(array);
    return [...array].map(b => b.toString(16).padStart(2, '0')).join('');
}

console.log(generateRandomId(8)); // Например: "a3f9b8c7"

🟠Инкрементальные ID
Если нужно просто увеличивающееся число (например, ID для записей в массиве), можно использовать счётчик

let counter = 0;
function generateIncrementalId() {
    return ++counter;
}

console.log(generateIncrementalId()); // 1
console.log(generateIncrementalId()); // 2
console.log(generateIncrementalId()); // 3

🟠Хеширование строки (например, объекта)
Можно создать ID, основываясь на JSON-объекте.

function hashObject(obj) {
    return JSON.stringify(obj)
        .split("")
        .reduce((hash, char) => {
            return ((hash << 5) - hash) + char.charCodeAt(0);
        }, 0)
        .toString(16);
}

console.log(hashObject({ name: "Alice", age: 25 })); // Например: "-3d4e5f"

Ставь 👍 и забирай 📚 Базу знаний

🤔 Если у нас есть CSS, зачем существуют теги strong, center, etc?

Некоторые теги (strong, em) имеют семантический смысл — важны для SEO и доступности. Например, strong указывает на важность, а не только жирный стиль.

Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу знаний

🤔 Что такое нотация о-большое?

O-большое (Big O) — это способ описания эффективности алгоритма в зависимости от размера входных данных. Она показывает, как быстро растёт время выполнения или использование памяти при увеличении количества входных данных.

🚩Зачем нужна O-большое?

Когда мы пишем код, важно понимать, насколько он эффективен, особенно при работе с большими массивами или сложными вычислениями.
Big O помогает:
- Оценить время работы алгоритма.
- Понять, как алгоритм масштабируется.
- Сравнить разные алгоритмы и выбрать лучший.

🚩Примеры сложности алгоритмов

O(1) – Константное время

function getFirstElement(arr) {
  return arr[0]; // Не зависит от размера массива
}

O(N) – Линейное время

function findElement(arr, target) {
  for (let i = 0; i < arr.length; i++) { 
    if (arr[i] === target) return i;
  }
  return -1;
}

O(N²) – Квадратичное время (плохо)

function bubbleSort(arr) {
  for (let i = 0; i < arr.length; i++) {
    for (let j = 0; j < arr.length; j++) {
      if (arr[i] > arr[j]) {
        [arr[i], arr[j]] = [arr[j], arr[i]];
      }
    }
  }
  return arr;
}

O(log N) – Логарифмическое время (оптимально)

function binarySearch(arr, target) {
  let left = 0, right = arr.length - 1;
  
  while (left <= right) {
    let mid = Math.floor((left + right) / 2);
    
    if (arr[mid] === target) return mid;
    if (arr[mid] < target) left = mid + 1;
    else right = mid - 1;
  }

  return -1;
}

Ставь 👍 и забирай 📚 Базу знаний

🤔 Что делать, когда база стала слишком «жирной» и отчёт создаётся очень долго, а нужен сейчас?

- Кэшировать отчёты.
- Подготовить агрегации заранее (materialized views).
- Выполнить асинхронную генерацию отчёта и уведомление по готовности.
- Использовать временные таблицы.
- Запустить тяжёлый запрос ночью и хранить результат.

Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу знаний

🤔 Что можешь рассказать об version?

version (версия) – это числовой или текстовый идентификатор, который используется для обозначения определённого состояния кода, программы, библиотеки или API.
Версия помогает понимать, какие изменения были внесены, и совместима ли текущая версия с предыдущими.

🟠Семантическое версионирование (SemVer)
Наиболее распространённый стандарт версионирования – SemVer (Semantic Versioning). Он использует формат

MAJOR.MINOR.PATCH

Пример в package.json (Node.js-проекты):

{
  "name": "my-app",
  "version": "1.2.3"
}

Команда для обновления версии в package.json

npm version major   # 2.0.0
npm version minor   # 1.3.0
npm version patch   # 1.2.4

🟠Версионирование API
При работе с REST API или GraphQL API тоже используют версии, чтобы не ломать старые клиенты.

https://api.example.com/v1/users
https://api.example.com/v2/users

🟠Версионирование в Git
В Git версиями называют теги (tags), привязанные к коммитам.

git tag v1.0.0
git push origin v1.0.0

Чтобы посмотреть все версии

git tag

Ставь 👍 и забирай 📚 Базу знаний

🤔 А что значит объект передаётся по ссылке?

Это означает, что при передаче объекта в функцию (или присвоении) передаётся не копия объекта, а ссылка на него. Все изменения, сделанные с объектом внутри функции, сохраняются и снаружи.

Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу знаний

🤔 Что такое usecontext?

Это один из встроенных хуков, который позволяет компонентам подписываться на контекст и получать доступ к данным контекста. Используется для передачи данных через дерево компонентов без необходимости передавать пропсы на каждом уровне. Это особенно полезно для глобальных данных, таких как текущий авторизованный пользователь, тема (светлая/темная) или настройки локализации.

🚩Как он работает

🟠Создание контекста
Для создания контекста используется функция createContext. Она возвращает объект контекста, который содержит два компонента: Provider и Consumer.

      import React, { createContext, useState } from 'react';

   const MyContext = createContext();
   

🟠Provider
Компонент Provider используется для предоставления значения контекста всем дочерним компонентам. Все компоненты внутри Provider могут получить доступ к значениям, переданным в value.

      const MyProvider = ({ children }) => {
     const [state, setState] = useState('Hello World');

     return (
       <MyContext.Provider value={{ state, setState }}>
         {children}
       </MyContext.Provider>
     );
   };
   

🟠useContext
Используется для подписки на контекст в функциональных компонентах. Он принимает объект контекста, возвращаемый из createContext, и возвращает текущее значение контекста.

      import React, { useContext } from 'react';

   const MyComponent = () => {
     const { state, setState } = useContext(MyContext);

     return (
       <div>
         <p>{state}</p>
         <button onClick={() => setState('New Value')}>Change Value</button>
       </div>
     );
   };
   

Полный пример

import React, { createContext, useState, useContext } from 'react';

// Создание контекста
const MyContext = createContext();

const MyProvider = ({ children }) => {
  const [state, setState] = useState('Hello World');

  return (
    <MyContext.Provider value={{ state, setState }}>
      {children}
    </MyContext.Provider>
  );
};

const MyComponent = () => {
  const { state, setState } = useContext(MyContext);

  return (
    <div>
      <p>{state}</p>
      <button onClick={() => setState('New Value')}>Change Value</button>
    </div>
  );
};

const App = () => (
  <MyProvider>
    <MyComponent />
  </MyProvider>
);

export default App;

Ставь 👍 и забирай 📚 Базу знаний

🤔 Чем let отличается от var?

Переменные, объявленные через let, имеют блочную область видимости, тогда как var — функциональную область видимости. Это значит, что let не доступен за пределами блока, в котором объявлен, а var доступен в пределах функции. Также, переменные, объявленные через let, не подвержены всплытию (hoisting) так же, как var. Let считается более безопасным для использования в современных проектах.

Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу знаний

🤔 Как происходит tostring?

Метод .toString() используется для преобразования значения в строку. Он есть у всех объектов в JavaScript, потому что наследуется от Object.prototype. Однако, его поведение зависит от типа данных.

🟠toString() у примитивов
Числа, строки, булевы значения, null, undefined
Для примитивных типов toString() работает просто — возвращает строковое представление значения:

console.log((123).toString());     // "123"
console.log(true.toString());      // "true"
console.log(false.toString());     // "false"
console.log((3.14).toString());    // "3.14"

Но null и undefined не имеют метода toString() и вызов приведёт к ошибке

console.log(null.toString());   // ❌ Ошибка: Cannot read properties of null
console.log(undefined.toString()); // ❌ Ошибка

Поэтому для них лучше использовать String()

console.log(String(null));       // "null"
console.log(String(undefined));  // "undefined"

🟠toString() у массивов
Для массивов toString() преобразует их в строку, разделяя элементы запятой

console.log([1, 2, 3].toString()); // "1,2,3"
console.log(["яблоко", "банан"].toString()); // "яблоко,банан"
console.log([].toString()); // "" (пустая строка)

🟠`toString()` у объектов
По умолчанию метод toString() у объекта возвращает строку вида [object Object]

const obj = { a: 1, b: 2 };
console.log(obj.toString()); // "[object Object]"

Если нужно другое поведение, можно переопределить toString() в объекте

const user = {
  name: "Иван",
  age: 30,
  toString() {
    return `Имя: ${this.name}, Возраст: ${this.age}`;
  }
};

console.log(user.toString()); // "Имя: Иван, Возраст: 30"

🟠`toString()` у классов
Можно переопределять метод toString() в классах

class Person {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }

  toString() {
    return `${this.name} (${this.age} лет)`;
  }
}

const person = new Person("Анна", 25);
console.log(person.toString()); // "Анна (25 лет)"

🟠`toString()` у функций
Функции тоже имеют метод toString(), но он возвращает их исходный код

function hello() {
  return "Привет!";
}

console.log(hello.toString());
// "function hello() { return 'Привет!'; }"

Для стрелочных функций

const sum = (a, b) => a + b;
console.log(sum.toString());
// "(a, b) => a + b"

🟠Использование `String()` вместо `.toString()`
Лучше использовать String(значение), потому что toString() не работает на null и undefined

console.log(String(null));      // "null"
console.log(String(undefined)); // "undefined"
console.log(String(42));        // "42"
console.log(String({ a: 1 }));  // "[object Object]"

Ставь 👍 и забирай 📚 Базу знаний

🤔 В чём разница между Vue и React?

React — библиотека, Vue — фреймворк. React использует JSX и JavaScript-подход к компонентам. Vue использует шаблоны и декларативный подход. Vue имеет встроенную реактивность и систему директив, тогда как в React управление состоянием и логикой происходит через хуки и сторонние библиотеки.

Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу знаний

🤔 Для чего нуден key при работе со списками?

В React при рендере списков (например, через .map()) каждому элементу необходимо передавать уникальный key. Это помогает React оптимизировать перерисовку и правильно отслеживать изменения в списке.

🚩Почему `key` важен?

React использует виртуальный DOM и при обновлении сравнивает новый список с предыдущим.
Без key React не понимает, какие элементы изменились, удалились или добавились.
Это может привести к неожиданному поведению, например, сбросу состояния или неправильному рендеру.

🚩Как использовать `key` правильно?

const users = ["Alice", "Bob", "Charlie"];

function UserList() {
    return (
        <ul>
            {users.map((user, index) => (
                <li key={user}>{user}</li> // Хорошо, если `user` уникален
            ))}
        </ul>
    );
}

🚩Что будет без `key`?

Если не указать key, React выдаст предупреждение:

Warning: Each child in a list should have a unique "key" prop.

Кроме того, при изменении списка возможны проблемы с перерисовкой

{users.map((user, index) => (
    <input key={index} defaultValue={user} />
))}

Ставь 👍 и забирай 📚 Базу знаний

🤔 Какие могут быть оптимизации для снижения обмена данных между frontend и сервером?

- Использование GraphQL — запрашивать только нужные поля;
- Сжатие трафика (gzip, brotli);
- Кеширование на уровне клиента и сервера;
- Дебаунсинг и троттлинг запросов;
- Использование infinite scroll и пагинации;
- Оптимизация количества ререндеров и уменьшение частоты обновлений.

Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу знаний

🤔 Как изменить стили кнопок с атрибутом disabled?

C атрибутом disabled, используя селекторы атрибутов. Селектор [disabled] позволяет выбрать все элементы, которые имеют этот атрибут, а селектор :disabled позволяет выбрать все элементы, которые находятся в состоянии disabled.

🚩Пример использования

🟠Селектора [disabled]
Этот селектор выбирает все элементы, у которых присутствует атрибут disabled.

button[disabled] {
    background-color: gray;
    color: white;
    border: 1px solid #ccc;
    cursor: not-allowed; /* Указывает, что элемент недоступен для взаимодействия */
    opacity: 0.6; /* Уменьшает непрозрачность */
}

🟠Псевдокласса :disabled
Этот селектор выбирает все элементы, которые находятся в состоянии disabled.

button:disabled {
    background-color: gray;
    color: white;
    border: 1px solid #ccc;
    cursor: not-allowed;
    opacity: 0.6;
}

🚩Полные примеры

С HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Disabled Button Styling</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <button>Active Button</button>
    <button disabled>Disabled Button</button>
</body>
</html>

С CSS

/* Стили для активных кнопок */
button {
    background-color: blue;
    color: white;
    border: 1px solid #000;
    padding: 10px 20px;
    cursor: pointer;
}

/* Стили для кнопок с атрибутом disabled */
button[disabled] {
    background-color: gray;
    color: white;
    border: 1px solid #ccc;
    cursor: not-allowed;
    opacity: 0.6;
}

/* Альтернативный способ с использованием псевдокласса :disabled */
button:disabled {
    background-color: gray;
    color: white;
    border: 1px solid #ccc;
    cursor: not-allowed;
    opacity: 0.6;
}

🟠Комбинированный подход
Вы можете комбинировать селекторы атрибутов с другими селекторами для более точного применения стилей.

/* Стили для кнопок с классом .special, которые имеют атрибут disabled */
button.special[disabled] {
    background-color: darkgray;
    color: black;
    border: 1px dashed #999;
    cursor: not-allowed;
    opacity: 0.7;
}

Ставь 👍 и забирай 📚 Базу знаний