Trước đây, CSS là một ngôn ngữ khó làm việc. Bộ tiền xử lý CSS giúp làm việc với CSS dễ dàng hơn và cũng cung cấp các tính năng bổ sung như vòng lặp, mixin, v.v. Qua nhiều năm, CSS đã trở nên mạnh mẽ hơn và đã áp dụng một số tính năng ban đầu được giới thiệu bởi các bộ tiền xử lý CSS. Một tính năng như vậy là “kiểu dáng lồng nhau”.
VIDEO MUO TRONG NGÀY
CUỘN ĐỂ TIẾP TỤC
Kiểu dáng lồng nhau cho phép các nhà phát triển lồng các quy tắc CSS vào trong chính họ, phản ánh cấu trúc của HTML. Điều này dẫn đến mã có tổ chức và dễ đọc hơn vì mối quan hệ giữa các phần tử HTML và kiểu tương ứng của chúng được thể hiện rõ ràng.
Kiểu dáng lồng nhau: cách cũ
Kiểu dáng lồng nhau là một tính năng có sẵn trong nhiều bộ tiền xử lý CSS như Sass, Stylus và Less CSS. Mặc dù cú pháp có thể khác nhau giữa các bộ tiền xử lý này nhưng khái niệm cơ bản vẫn nhất quán. Nếu bạn muốn tạo kiểu cho tất cả các phần tử h1 trong div bằng tên lớp vùng chứa, bằng CSS đơn giản, bạn sẽ viết:
.container {
background-color: #f2f2f2;
}
.container h1 {
font-size: 44px;
}
Trong bộ tiền xử lý CSS như Less CSS, bạn triển khai kiểu dáng lồng nhau như thế này:
.container{
background-color: #f2f2f2; h1 {
font-size:44px;
}
}
Khối mã ở trên tạo ra kết quả tương tự như triển khai CSS đơn giản, nhưng giúp mọi nhà phát triển đọc mã dễ dàng hơn để hiểu điều gì đang diễn ra. Ý thức về “thứ bậc” này là một trong những điểm mạnh nhất của bộ tiền xử lý CSS.
Cây lồng nhau có thể được lồng vào bất kỳ độ sâu nào mà không bị hạn chế, nhưng phải cẩn thận vì việc lồng quá sâu có thể dẫn đến tính dài dòng trong mã.
Kiểu gốc được lồng trong CSS
Không phải tất cả các trình duyệt đều hỗ trợ kiểu lồng nhau gốc. Tôi có thể sử dụng… có thể giúp bạn kiểm tra xem trình duyệt mục tiêu của bạn có hỗ trợ tính năng này hay không.
Các kiểu gốc được lồng trong CSS hoạt động tương tự như các bộ tiền xử lý CSS, nghĩa là có thể lồng bất kỳ bộ chọn nào vào trong một bộ chọn khác. Nhưng có một điểm khác biệt chính mà bạn nên chú ý. Hãy nhìn vào khối mã dưới đây:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Nested Styling in CSS</title>
</head>
<body>
<div class="container">
<h1>Hello from the children of planet Earth!</h1>
</div>
<style>
.container {
background-color: red;h1 {
color: yellow;
}
}
</style>
</body>
</html>
Trong khối mã ở trên, div có vùng chứa tên lớp có nền màu đỏ. Kiểu dáng của phần tử h1 nằm trong khối .container. Phần tử h1 này có màu vàng. Khi bạn chạy mã này trong trình duyệt của mình, bạn có thể nhận thấy có gì đó không ổn. Trình duyệt áp dụng chính xác màu nền đỏ cho phần tử div vùng chứa, nhưng phần tử h1 không được tạo kiểu phù hợp.
Điều này là do kiểu dáng lồng nhau hoạt động hơi khác trong CSS so với các bộ tiền xử lý CSS như Less. Bạn không thể tham chiếu trực tiếp phần tử HTML trong cây lồng nhau. Để khắc phục điều này, bạn cần sử dụng dấu và (&) như hình dưới đây:
.container {
background-color: red; & h1 {
color: yellow;
}
}
Trong khối mã ở trên, & hoạt động như một tham chiếu đến bộ chọn gốc. Việc đặt ký hiệu trước phần tử h1 sẽ cho trình duyệt biết rằng bạn đang nhắm mục tiêu tất cả các phần tử con h1 trong div vùng chứa. Sau khi chạy mã trong trình duyệt, bạn sẽ thấy:
Vì & là ký hiệu được sử dụng để chỉ phần tử cha, nên hoàn toàn có thể nhắm mục tiêu các lớp giả và phần tử giả của một phần tử như sau:
.parent1{
&:hover{
background-color: red;
}
&::before{
content:"Here is a pseudo element.";
}
}
Trước khi triển khai các kiểu CSS lồng nhau, nếu bạn định áp dụng các kiểu có điều kiện dựa trên độ rộng của trình duyệt, bạn phải sử dụng phương pháp sau:
p {
color:black;
}@media (min-width:750px) {
p {
color:gray;
}
}
Khi trình duyệt hiển thị trang, nó sẽ xác định màu của phần tử p dựa trên chiều rộng của trình duyệt. Nếu chiều rộng của trình duyệt vượt quá 750px, nó sẽ sử dụng màu xám; mặt khác, nó sử dụng màu mặc định (đen).
Việc triển khai này hoạt động tốt, nhưng như bạn có thể tưởng tượng, mọi thứ có thể nhanh chóng trở nên dài dòng, đặc biệt khi bạn phải áp dụng các phong cách khác nhau dựa trên các quy tắc nhất định. Giờ đây có thể lồng các truy vấn phương tiện trực tiếp vào khối kiểu của một phần tử.
p {
color:black; @media (min-width:750px) {
color:gray;
}
}
Khối mã này về cơ bản thực hiện giống như khối mã trước nhưng có ưu điểm là dễ hiểu. Chỉ cần nhìn vào truy vấn phương tiện và phần tử cha lồng nhau để xem trình duyệt sẽ áp dụng các kiểu thích hợp như thế nào khi đáp ứng một số điều kiện nhất định.
Tạo kiểu cho trang web của bạn bằng các kiểu CSS lồng nhau
Đã đến lúc thực hành mọi thứ bạn đã học cho đến nay bằng cách xây dựng một trang web đơn giản và sử dụng tính năng tạo kiểu lồng nhau trong CSS. Tạo một thư mục và đặt tên nó bất cứ điều gì bạn muốn. Trong thư mục này, tạo tệp index.htm và tệp style.css.
Trong tệp index.htm, thêm mã soạn sẵn sau:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="https://wilku.top/how-to-use-native-css-nesting-in-your-web-applications/style.css" />
<title>Simple Website</title>
</head>
<body>
<div class="container">
<div class="article">
<h1>Lorem ipsum dolor sit amet consectetur adipisicing elit.</h1>
<div class="meta-data">
<span class="author">David Uzondu</span>
<span class="time">3 hours ago</span>
</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>
<div class="sidebar">
<h2>Trending Articles</h2>
<h4>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Fugit, iusto ipsum!</h4>
</div>
</div>
</body>
</html>
Khối mã ở trên xác định đánh dấu cho trang web tin tức giả mạo. Sau đó mở tệp style.css và thêm đoạn mã sau:
.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: "Written by ";
}
&:nth-child(2) {
font-style: italic;
&::before {
content: " ~ ";
}
}
}
.meta-data {
margin-bottom: 10px;
padding-bottom: 10px;
border-bottom: solid 1px;
}
}
Khối mã ở trên định kiểu trang web hoàn toàn bằng các kiểu lồng nhau CSS. Bộ chọn .container đóng vai trò là độ sâu gốc. Bạn có thể tham khảo bộ chọn này bằng ký hiệu &. Sau khi chạy mã trong trình duyệt, bạn sẽ thấy:
Bạn vẫn cần bộ tiền xử lý CSS chứ?
Với việc đưa các kiểu lồng nhau vào CSS gốc, các bộ tiền xử lý CSS có vẻ không cần thiết. Tuy nhiên, hãy nhớ rằng bộ tiền xử lý CSS không chỉ cung cấp kiểu dáng lồng nhau. Chúng cung cấp các tính năng như vòng lặp, mixin, hàm, v.v. Cuối cùng, việc có sử dụng bộ tiền xử lý CSS hay không phụ thuộc vào trường hợp sử dụng cụ thể và sở thích cá nhân của bạn.
