Bersarang CSS asli dapat menyederhanakan kode CSS Anda dan meningkatkan pengalaman pengkodean Anda secara keseluruhan.

Secara historis, CSS telah menjadi bahasa yang sulit untuk dikerjakan. Preprosesor CSS mempermudah bekerja dengan CSS dan juga menyediakan fitur tambahan seperti loop, mixin, dan lainnya. Selama bertahun-tahun, CSS menjadi lebih mampu dan mengadopsi beberapa fitur yang awalnya diperkenalkan oleh preprosesor CSS. Salah satu fitur tersebut adalah "gaya bersarang".

Penataan gaya bersarang memungkinkan pengembang untuk menyusun aturan CSS di dalam satu sama lain, yang mencerminkan struktur HTML. Ini menghasilkan kode yang lebih terorganisir dan mudah dibaca, karena hubungan antara elemen HTML dan gaya yang sesuai terlihat jelas secara visual.

Gaya Bersarang: Cara Lama

Nested Styling adalah fitur yang tersedia di banyak Preprosesor CSS seperti Sass, Stylus, dan Lebih Sedikit CSS. Meskipun sintaks mungkin berbeda di antara preprosesor ini, konsep dasarnya tetap konsisten. Jika Anda ingin gaya semua

instagram viewer
h1 elemen dalam a div dengan nama kelas dari wadah, dalam CSS biasa, Anda akan menulis:

.container {
background-color: #f2f2f2;
}
.containerh1 {
font-size: 44px;
}

Dalam preprosesor CSS seperti Less CSS, Anda menerapkan gaya bersarang seperti ini:

.container{
background-color: #f2f2f2;
h1 {
font-size:44px;
 }
}

Blok kode di atas mencapai hasil yang sama seperti penerapan CSS biasa, tetapi memudahkan pengembang mana pun yang membaca kode untuk memahami apa yang sedang terjadi. Rasa "hierarki" ini adalah salah satu nilai jual terbesar dari preprosesor CSS.

Pohon sarang dapat disarangkan ke kedalaman apa pun tanpa batasan, tetapi penting untuk berhati-hati, karena sarang yang terlalu dalam dapat menyebabkan verbositas kode.

Styling Bersarang Asli di CSS

Tidak semua browser menyertakan dukungan untuk gaya bersarang asli. Itu Dapatkah saya menggunakan... situs web dapat membantu Anda memeriksa apakah browser target Anda mendukung fitur ini.

Penataan gaya bersarang asli di CSS berfungsi mirip dengan preprosesor CSS, artinya memungkinkan untuk menyarangkan pemilih apa pun di dalam yang lain. Tetapi ada satu perbedaan utama yang harus Anda perhatikan. Lihatlah blok kode di bawah ini:

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>

Di blok kode di atas, div dengan nama kelas wadah memiliki warna dasar merah. Gaya untuk h1 unsur terletak pada .wadah memblokir. Ini h1 elemen memiliki warna kuning. Saat Anda menjalankan kode ini di browser, Anda mungkin melihat ada yang salah. Browser dengan benar menerapkan warna latar belakang merah ke wadah div, tapi h1 tidak memiliki gaya yang sesuai.

Ini karena gaya bersarang bekerja sedikit berbeda di CSS dibandingkan dengan preprosesor CSS seperti Less. Anda tidak bisa langsung mereferensikan elemen HTML di pohon bersarang. Untuk memperbaikinya, Anda perlu menggunakan ampersand (&) seperti yang diilustrasikan di bawah ini:

.container {
background-color: red;
 & h1 {
color: yellow;
 }
}

Pada blok kode di atas, & bertindak sebagai referensi ke pemilih induk. Menempatkan ampersand sebelum h1 elemen harus memberi tahu browser bahwa Anda menargetkan semua anak h1 elemen pada wadah div. Ketika Anda menjalankan kode di browser, Anda akan melihat yang berikut:

Sejak & adalah simbol yang digunakan untuk mereferensikan elemen induk, sangat mungkin untuk menargetkan kelas semu dan elemen semu seperti ini:

.parent1{
 &:hover{
background-color: red;
 }
 &::before{
content:"Hereisapseudoelement.";
 }
}

Sebelum menerapkan gaya bersarang CSS, jika Anda ingin menerapkan gaya secara kondisional, bergantung pada lebar browser, Anda harus menggunakan metode seperti berikut:

p {
color:black;
}
@media (min-width:750px) {
p {
color:gray;
 }
}

Saat browser merender halaman, itu menentukan warna file P elemen berdasarkan lebar browser. Jika lebar browser melebihi 750px, gunakan warna abu-abu; jika tidak, ini menerapkan warna default (hitam).

Implementasi ini berfungsi dengan baik, tetapi seperti yang dapat Anda bayangkan, hal-hal dapat menjadi sangat bertele-tele dengan cepat, terutama ketika Anda perlu menerapkan gaya yang berbeda berdasarkan aturan tertentu. Sekarang mungkin untuk bersarang pertanyaan media langsung di blok gaya elemen.

p {
color:black;
@media (min-width:750px) {
color:gray;
 }
}

Blok kode ini pada dasarnya melakukan hal yang sama seperti yang sebelumnya, tetapi memiliki keuntungan karena mudah dipahami. Dengan hanya melihat kueri media dan elemen induk bersarang, Anda dapat mengetahui bagaimana browser akan menerapkan gaya yang sesuai saat kondisi yang ditentukan terpenuhi.

Menata Situs Web Dengan Gaya Bersarang CSS

Inilah saatnya untuk mempraktikkan semua yang telah Anda pelajari sejauh ini membangun situs web sederhana dan memanfaatkan fitur gaya bersarang di CSS. Buat folder dan beri nama apa pun yang Anda inginkan. Di folder itu, buat file index.htm dan a style.css mengajukan.

Dalam index.htm file, tambahkan kode boilerplate berikut:

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>

Blok kode di atas menentukan markup untuk situs web berita palsu. Selanjutnya, buka style.css file dan tambahkan kode berikut:

.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;
 }
}

Blok kode di atas memberi gaya situs web sepenuhnya dengan gaya bersarang CSS. Itu .wadah pemilih bertindak sebagai kedalaman akar. Anda dapat membuat referensi ke pemilih ini menggunakan & simbol. Ketika Anda menjalankan kode di browser, Anda akan melihat yang berikut:

Apakah Anda Masih Membutuhkan Preprosesor CSS?

Dengan diperkenalkannya gaya bersarang ke CSS asli, preprosesor CSS mungkin tampak tidak diperlukan. Namun, penting untuk diingat bahwa praprosesor CSS menawarkan lebih dari sekadar gaya bersarang. Mereka menyediakan fitur seperti loop, mixin, fungsi, dan lainnya. Pada akhirnya, apakah akan menggunakan praprosesor CSS atau tidak bergantung pada kasus penggunaan khusus dan preferensi pribadi Anda.