46. CSS Nesting (вложенность)

CSS Nesting (Вложенность)

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

Что такое CSS Nesting?

Вложенность в CSS означает, что вы можете определить стили для дочерних элементов внутри блока стилей родительского элемента. Это значительно упрощает процесс написания и понимания CSS, особенно когда речь идет о сложных структурах HTML.

Пример:

Представим, у нас есть следующий HTML код:

<nav>
  <ul>
    <li><a href="#">Главная</a></li>
    <li><a href="#">О нас</a></li>
    <li><a href="#">Контакты</a></li>
  </ul>
</nav>

Без вложенности CSS для стилизации этого HTML, нам бы пришлось писать так:

nav ul {
  list-style: none;
}

nav ul li {
  display: inline-block;
  margin-right: 10px;
}

nav ul li a {
  text-decoration: none;
  color: black;
}

nav ul li a:hover {
  color: red;
}

С использованием вложенности, код становится компактнее и понятнее:

nav {
  ul {
    list-style: none;

    li {
      display: inline-block;
      margin-right: 10px;

      a {
        text-decoration: none;
        color: black;

        &:hover {  /* &: означает текущий селектор (a) */
          color: red;
        }
      }
    }
  }
}

Обратите внимание на &: - это специальный символ, который ссылается на текущий селектор (в данном случае, a). Он необходим для псевдоклассов и псевдоэлементов.

Практические примеры кода

Пример 1: Кнопка с разными состояниями

<button class="my-button">Кнопка</button>

.my-button {
  background-color: blue;
  color: white;
  padding: 10px 20px;
  border: none;
  cursor: pointer;

  &:hover {
    background-color: darkblue;
  }

  &:focus {
    outline: none;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
  }

  &:disabled {
    background-color: gray;
    cursor: not-allowed;
  }
}

Пример 2: Форма с полями ввода

<form class="my-form">
  <input type="text" placeholder="Имя">
  <input type="email" placeholder="Email">
  <button type="submit">Отправить</button>
</form>

.my-form {
  display: flex;
  flex-direction: column;
  width: 300px;

  input {
    margin-bottom: 10px;
    padding: 5px;
    border: 1px solid #ccc;
  }

  button {
    background-color: green;
    color: white;
    padding: 10px;
    border: none;
    cursor: pointer;
  }
}

Жизненный пример

Многие современные CSS препроцессоры (например, Sass, Less, Stylus) поддерживают вложенность. Фреймворки, такие как Bootstrap и Materialize, часто используют вложенность внутри своих SCSS/LESS файлов для создания более модульного и поддерживаемого CSS. При разработке крупных проектов, где важна организация и читаемость кода, вложенность становится незаменимым инструментом. Например, в React-приложениях с использованием styled-components, вложенность позволяет стилизовать компоненты, сохраняя структуру HTML.

Ключевые моменты

• Читаемость: Улучшает читаемость и организацию CSS кода.
• Избежание повторений: Уменьшает количество повторений селекторов.
• Модульность: Способствует созданию модульного CSS.
• Поддержка: Облегчает поддержку и рефакторинг кода.
• Препроцессоры: В основном используется с CSS препроцессорами (Sass, Less, Stylus).
• &: Используется для ссылки на текущий селектор, особенно при работе с псевдоклассами и псевдоэлементами.

Интерактивный пример