Кое-что о нативной вложенности CSS

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

Что такое вложение CSS?

Как фронтенд-разработчик, я уверен, что вы знакомы с этим кодом CSS.

<div class="box">
  <p>hello medium</p>
  <div>hello fatfish</div>
</div>
.box{
  background-color: rgba(0, 0, 0, 0.3);
}

.box p{
  color: green;
}

.box div{
  color: red;
}

Да, вы должны были написать SCSS или более раннюю версию, что может упростить эту задачу.

.box{
  background-color: rgba(0, 0, 0, 0.3);

  p{
    color: green;
  }

  div{
    color: red;
  }
}

Благодаря вложенности CSS мы можем писать модульный и более удобный код CSS.

2. Как вкладывать селекторы в CSS

Я никогда не думал, что когда-нибудь смогу писать вложенный код прямо в CSS. Как должен быть написан приведенный выше пример?

.box{
  background-color: rgba(0, 0, 0, 0.1);

  & p{
    color: green;
  }

  & div{
    color: red;
  }
}

Да, нам нужно использовать только & для вложенности!

3. Как использовать функцию вложения CSS в браузере Chrome

Функция вложения CSS все еще находится на экспериментальной стадии. Если вы хотите, чтобы приведенный выше код работал, вам необходимо выполнить следующие два шага.

  1. Введите chrome://flags/ в адресной строке браузера Chrome.
  2. 2. Найдите Experimental Web Platform features и установите для него значение «Включено».

Дополнительные материалы на PlainEnglish.io. Подпишитесь на нашу бесплатную еженедельную рассылку новостей. Подпишитесь на нас в Twitter, LinkedIn, YouTube и Discord .

Заинтересованы в масштабировании запуска вашего программного обеспечения? Ознакомьтесь с разделом Схема.