Собственная вложенность CSS может упростить код CSS и улучшить общий опыт кодирования.
Исторически CSS был трудным языком для работы. Препроцессоры CSS упростили работу с CSS, а также предоставили дополнительные функции, такие как циклы, примеси и многое другое. С годами CSS стал более функциональным и перенял некоторые функции, изначально представленные препроцессорами CSS. Одной из таких функций является «вложенный стиль».
Вложенные стили позволяют разработчикам вкладывать правила CSS друг в друга, отражая структуру HTML. Это приводит к более организованному и удобочитаемому коду, поскольку взаимосвязь между элементами HTML и соответствующими им стилями становится визуально очевидной.
Вложенные стили: старый способ
Вложенные стили — это функция, доступная во многих Препроцессоры CSS, такие как Sass, Стилус и Меньше CSS. Хотя синтаксис этих препроцессоров может различаться, основная концепция остается неизменной. Если вы хотите стилизовать все h1 элементы в див с именем класса контейнер, в обычном CSS вы бы написали:
.container {
background-color: #f2f2f2;
}
.containerh1 {
font-size: 44px;
}
В препроцессоре CSS, таком как Less CSS, вы реализуете вложенные стили следующим образом:
.container{
background-color: #f2f2f2;
h1 {
font-size:44px;
}
}
Приведенный выше блок кода дает те же результаты, что и обычная реализация CSS, но позволяет любому разработчику, читающему код, понять, что происходит. Это чувство «иерархии» было одним из самых больших преимуществ препроцессоров CSS.
Дерево вложенности может быть вложено на любую глубину без ограничений, но важно соблюдать осторожность, так как слишком глубокая вложенность может привести к многословию кода.
Нативные вложенные стили в CSS
Не все браузеры поддерживают собственные вложенные стили. Могу ли я использовать... веб-сайт может помочь вам проверить, поддерживает ли ваш целевой браузер эту функцию.
Собственные вложенные стили в CSS работают аналогично препроцессорам CSS, а это означает, что любой селектор можно вложить в другой. Но есть одно ключевое отличие, которое вы должны отметить. Взгляните на блок кода ниже:
html>
<htmllang="en">
<head>
<metacharset="UTF-8" />
<metaname="viewport"content="width=device-width, initial-scale=1.0" />
<title>Nested Styling in CSStitle>
head>
<body>
<divclass="container">
<h1>Hello from the children of planet Earth!h1>
div>
<style>
.container {
background-color: red;
h1 {
color: yellow;
}
}
style>
body>
html>
В приведенном выше блоке кода div с именем класса контейнер имеет красный цвет фона. Стиль для h1 элемент лежит в .контейнер блокировать. Этот h1 элемент имеет желтый цвет. Когда вы запускаете этот код в браузере, вы можете заметить что-то не так. Браузер правильно применяет красный цвет фона к контейнер див, но h1 не имеет соответствующего стиля.
Это связано с тем, что вложенные стили работают в CSS немного иначе, чем в препроцессорах CSS, таких как Less. Вы не можете напрямую ссылаться на элемент HTML во вложенном дереве. Чтобы исправить это, вам нужно использовать амперсанд (&), как показано ниже:
.container {
background-color: red;
& h1 {
color: yellow;
}
}
В приведенном выше блоке кода & действует как ссылка на родительский селектор. Ставим амперсанд перед h1 элемент должен сообщать браузеру, что вы нацелены на все дочерние h1 элементы на контейнер разд. Когда вы запустите код в браузере, вы должны увидеть следующее:
С & является символом, используемым для ссылки на родительский элемент, вполне возможно ориентироваться на псевдоклассы и псевдоэлементы элемента следующим образом:
.parent1{
&:hover{
background-color: red;
}
&::before{
content:"Hereisapseudoelement.";
}
}
До реализации вложенных стилей CSS, если вы стремились применять стили условно, в зависимости от ширины браузера, вам приходилось прибегать к следующему методу:
p {
color:black;
}
@media (min-width:750px) {
p {
color:gray;
}
}
Когда браузер отображает страницу, он определяет цвет п элемент в зависимости от ширины браузера. Если ширина браузера превышает 750 пикселей, он использует серый цвет; в противном случае применяется цвет по умолчанию (черный).
Эта реализация отлично работает, но, как вы можете себе представить, все может быстро стать довольно многословным, особенно когда вам нужно применить разные стили на основе определенных правил. Теперь можно вкладывать медиазапросы непосредственно в блоке стилей элемента.
p {
color:black;
@media (min-width:750px) {
color:gray;
}
}
Этот блок кода делает в основном то же самое, что и предыдущий, но имеет то преимущество, что его легко понять. Просто взглянув на медиа-запрос и вложенный родительский элемент, вы можете сказать, как браузер будет применять соответствующие стили при выполнении определенных условий.
Стилизация веб-сайта с помощью вложенных стилей CSS
Пришло время применить на практике все, чему вы научились до сих пор, создание простого веб-сайта и используя функцию вложенных стилей в CSS. Создайте папку и назовите ее как хотите. В этой папке создайте index.htm и стиль.css файл.
в index.htm файл, добавьте следующий шаблонный код:
html>
<htmllang="en">
<head>
<metacharset="UTF-8" />
<metaname="viewport"content="width=device-width, initial-scale=1.0" />
<linkrel="stylesheet"href="style.css" />
<title>Simple Websitetitle>
head>
<body>
<divclass="container">
<divclass="article">
<h1>Lorem ipsum dolor sit amet consectetur adipisicing elit.h1>
<divclass="meta-data">
<spanclass="author">David Uzonduspan>
<spanclass="time">3 hours agospan>
div>
<div>
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Illo ut
quasi hic sint dolorum sapiente magni ratione? Suscipit commodi ad,
asperiores nostrum natus aperiam et alias, officiis dolorum ipsa vero
minima consequatur recusandae quasi aliquid quibusdam ducimus eaque!
Excepturi voluptas eveniet nemo, earum doloribus, soluta architecto
iste repellat autem aspernatur beatae ut quis odio est voluptates sunt
qui rerum blanditiis minus! Rerum labore nobis, odit quod amet dolorum
quae laudantium.
div>
div>
<divclass="sidebar">
<h2>Trending Articlesh2>
<h4>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Fugit, iusto ipsum!h4>
div>
div>
body>
html>
Приведенный выше блок кода определяет разметку для веб-сайта фиктивных новостей. Далее откройте стиль.css файл и добавьте следующий код:
.container {
display: flex;
gap: 25px;@media(max-width: 750px) {
flex-direction: column;
}.article{
width:90%;
}& div:nth-child(3) {
text-align: justify;
}& span {
color: rgb(67, 66, 66);&:nth-child(1)::before {
font-style: italic;
content: "Writtenby ";
}&:nth-child(2) {
font-style: italic;
&::before {
content: " ~ ";
}
}
}.meta-data {
margin-bottom: 10px;
padding-bottom: 10px;
border-bottom: solid 1px;
}
}
Приведенный выше блок кода полностью стилизует веб-сайт с помощью вложенных стилей CSS. .контейнер selector действует как глубина корня. Вы можете сослаться на этот селектор, используя & символ. Когда вы запустите код в браузере, вы должны увидеть следующее:
Вам все еще нужен препроцессор CSS?
С введением вложенных стилей в собственный CSS препроцессоры CSS могут оказаться ненужными. Однако важно помнить, что препроцессоры CSS предлагают больше, чем просто вложенные стили. Они предоставляют такие функции, как циклы, примеси, функции и многое другое. В конечном счете, использовать ли препроцессор CSS или нет, зависит от вашего конкретного варианта использования и личных предпочтений.