Cách sử dụng Nesting CSS gốc trong các ứng dụng web của bạn
Trong lịch sử, 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. Trong những năm qua, CSS đã có nhiều khả năng hơn và áp dụng một số tính năng ban đầu được giới thiệu bởi bộ tiền xử lý CSS. Một tính năng như vậy là “kiểu dáng lồng nhau”.
MUO VIDEO TRONG NGÀY
CUỘN ĐỂ TIẾP TỤC VỚI NỘI DUNG
Kiểu lồng nhau cho phép các nhà phát triển lồng các quy tắc CSS vào nhau, phản ánh cấu trúc HTML. Điều này dẫn đến mã có tổ chức hơn và dễ đọc hơn, vì mối quan hệ giữa các phần tử HTML và các kiểu tương ứng của chúng là rõ ràng.
Mục lục
Kiểu dáng lồng nhau: Cách cũ
Nested Styling 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 với tên lớp của vùng chứa, trong CSS thông thường, bạn sẽ viết:
.container {
background-color: #f2f2f2;
}.container h1 {
font-size: 44px;
}
Trong một bộ tiền xử lý CSS như Less CSS, bạn triển khai kiểu dáng lồng nhau như sau:
.container{
background-color: #f2f2f2; h1 {
font-size:44px;
}
}
Khối mã ở trên đạt được kết quả tương tự như cách triển khai CSS thông thường nhưng giúp bất kỳ nhà phát triển nào đọc mã cũng dễ dàng nắm bắt được điều gì đang diễn ra. Cảm giác về “hệ thống phân cấp” này là một trong những điểm bán hàng lớn nhất của bộ tiền xử lý CSS.
Cây lồng có thể được lồng ở bất kỳ độ sâu nào mà không có giới hạn, nhưng điều cần thiết là phải thận trọng, vì việc lồng quá sâu có thể dẫn đến độ dài của mã.
Kiểu lồng nhau gốc trong CSS
Không phải tất cả các trình duyệt đều hỗ trợ kiểu lồng nhau riêng. Các Tôi có thể sử dụng… trang web 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.
Kiểu dáng lồng nhau tự nhiên trong CSS hoạt động tương tự như bộ tiền xử lý CSS, nghĩa là có thể lồng bất kỳ bộ chọn nào vào bên trong bộ chọn khác. Nhưng có một điểm khác biệt chính mà bạn cần lưu ý. Hãy xem khối mã bên dưới:
<!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 với vùng chứa tên lớp có màu nền đỏ. Kiểu dáng cho 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, bạn có thể nhận thấy điều gì đó không ổn. Trình duyệt áp dụng chính xác màu nền đỏ cho div vùng chứa, nhưng h1 không có 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 một chút trong CSS so với các bộ tiền xử lý CSS như Ít hơn. Bạn không thể tham chiếu trực tiếp một phần tử HTML trong một cây lồng nhau. Để khắc phục điều này, bạn cần sử dụng dấu và (&) như minh họa bên dưới:
.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. Đặt dấu và 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ử h1 con trên div vùng chứa. Khi bạn chạy mã trong trình duyệt, bạn sẽ thấy như sau:
Vì & là biểu tượng được sử dụng để tham chiếu 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ư thế này:
.parent1{
&:hover{
background-color: red;
}
&::before{
content:"Here is a pseudo element.";
}
}
Trước khi triển khai kiểu lồng nhau CSS, nếu bạn muốn áp dụng các kiểu theo điều kiện, tùy thuộc vào độ rộng của trình duyệt, bạn phải sử dụng một phương pháp như 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ó áp dụng màu mặc định (màu đ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ể trở nên khá dài dòng một cách nhanh chóng, đặc biệt là khi bạn cần áp dụng các kiểu 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 hoạt động giống như khối trước, nhưng nó có ưu điểm là dễ hiểu. Bằng cách chỉ nhìn vào truy vấn phương tiện và phần tử cha lồng nhau, bạn có thể biết trình duyệt sẽ áp dụng các kiểu phù hợp như thế nào khi các điều kiện đã xác định được đáp ứng.
Tạo kiểu trang web với CSS Nested Styles
Đã đến lúc áp dụng mọi thứ bạn đã học cho đến nay vào thực tế bằng cách xây dựng một trang web đơn giản và tận 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 cho nó bất cứ điều gì bạn muốn. Trong thư mục đó, tạo tệp index.htm và tệp style.css.
Trong tệp index.htm, hãy 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 một trang web tin tức giả. Tiếp theo, 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 tạo kiểu hoàn toàn cho trang web bằng kiểu lồng CSS. Bộ chọn .container đóng vai trò là độ sâu gốc. Bạn có thể tham chiếu đến bộ chọn này bằng biểu tượng &. Khi bạn chạy mã trong trình duyệt, bạn sẽ thấy như sau:
Bạn vẫn cần một bộ tiền xử lý CSS?
Với việc giới thiệu các kiểu lồng nhau cho CSS gốc, bộ tiền xử lý CSS có vẻ không cần thiết. Tuy nhiên, điều quan trọng cần lưu ý là bộ tiền xử lý CSS cung cấp nhiều thứ hơn là chỉ tạo kiểu lồng nhau. Chúng cung cấp các tính năng như vòng lặp, mixin, chức năng, v.v. Cuối cùng, việc có sử dụng bộ tiền xử lý CSS hay không tùy thuộc vào trường hợp sử dụng cụ thể và sở thích cá nhân của bạn.
