Cách sử dụng CSS Nesting 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".
Việc lồng các quy tắc CSS tạo điều kiện thể hiện trực quan mối tương quan giữa các phần tử HTML và các kiểu tương ứng của chúng bằng cách cho phép các nhà phát triển nhúng các quy tắc CSS vào nhau. Kết quả là một cấu trúc tổ chức được cải thiện và khả năng đọc mã, với sự mô tả rõ ràng về cách các kiểu được áp dụng theo thứ bậc dựa trên hệ thống phân cấp HTML.
Kiểu dáng lồng nhau: Cách cũ
Kiểu dáng lồng nhau là một chức năng có thể được tìm thấy trong một số bộ tiền xử lý CSS như Sass, Stylus và Less CSS. Mặc dù cú pháp của chúng có thể khác nhau nhưng chúng có chung một nền tảng. Chẳng hạn, nếu một người muốn áp dụng kiểu cho tất cả các thành phần trong một thành phần mang tên lớp “container”, mã CSS tiêu chuẩn sẽ như sau:
.container {
background-color: #f2f2f2;
}
.container h1 {
font-size: 44px;
}
16px; } trong mã tiền xử lý của họ. Điều này cho phép tạo kiểu có tổ chức và hiệu quả, dễ dàng thích ứng với các yếu tố khác nhau trên trang web.
.container{
background-color: #f2f2f2;
h1 {
font-size:44px;
}
}
Đoạn mã nói trên cho thấy kết quả tương tự như CSS thông thường, đồng thời thúc đẩy sự hiểu biết và rõ ràng giữa các nhà phát triển đang đọc mã nguồn. Khái niệm về’cấu trúc phân cấp’này được coi là một lợi thế đáng kể liên quan đến bộ tiền xử lý CSS.
Mặc dù không có hạn chế về độ sâu của việc lồng trong cấu trúc cây, nhưng điều quan trọng là phải thận trọng khi tạo các phần tử được lồng sâu do khả năng tăng độ phức tạp và độ dài của mã có thể xảy ra do các hoạt động như vậy.
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. Trang web 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 lồng nhau trong chức năng CSS gốc có thể so sánh với các kiểu được tìm thấy trong bộ tiền xử lý CSS, cho phép đóng gói bất kỳ bộ chọn nào trong bộ chọn khác. Tuy nhiên, điều quan trọng là phải nhận ra sự khác biệt cơ bản giữa hai cách tiếp cận. Hãy xem xét ví dụ sau:
<!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 đoạn mã được cung cấp, phần tử div có thuộc tính lớp là “vùng chứa” có bóng nền màu đỏ thẫm. Các đặc điểm thiết kế của thành phần tiêu đề được bao gồm trong giới hạn của thực thể div đã nói ở trên. Cụ thể, thành phần tiêu đề có sắc tố màu vàng chanh. Tuy nhiên, khi được thực thi thông qua trình duyệt internet, người ta có thể nhận thấy rằng có sự không nhất quán trong cách thể hiện trực quan của các phần tử. Mặc dù thực tế là trình duyệt truyền chính xác phông nền màu đỏ cho div đã nói ở trên, nhưng có vẻ như tiêu đề thiếu các phần tô điểm trực quan cần thiết.
Trong CSS, việc lồng các kiểu hoạt động khác với trong các bộ tiền xử lý CSS, chẳng hạn như Ít hơn. Không thể tham chiếu trực tiếp một phần tử HTML trong một hệ thống phân cấp lồng nhau. Tuy nhiên, người ta có thể sử dụng ký hiệu dấu và (&) để giải quyết vấn đề này, như minh họa trong ví dụ được cung cấp.
.container {
background-color: red;
& h1 {
color: yellow;
}
}
Việc kết hợp ký hiệu dấu và ("&") trước chỉ định “h1” đóng vai trò là chỉ báo của bộ chọn chính, do đó chỉ định nhắm mục tiêu của tất cả các phần tử “h1” con nằm trong thành phần “div” bao gồm. Việc thực thi mã này trong trình duyệt web sẽ tạo ra màn hình hiển thị nhiều tiêu đề “h1” được sắp xếp theo chiều dọc liên tiếp, mỗi tiêu đề theo sau là đoạn văn bản tương ứng.
Xem xét rằng dấu và & đóng vai trò là ký hiệu để xác định phần tử cha, nên việc xử lý có chọn lọc các lớp giả và phần tử giả của phần tử theo cách được mô tả bên dưới là khả thi:
.parent1{
&:hover{
background-color: red;
}
&::before{
content:"Here is a pseudo element.";
}
}
Truy vấn phương tiện lồng nhau
Trước khi CSS lồng nhau ra đời, để triển khai các kiểu có điều kiện dựa trên độ rộng của trình duyệt, người ta buộc phải sử dụng một kỹ thuật như đã nói ở trên:
p {
color:black;
}
@media (min-width:750px) {
p {
color:gray;
}
}
Khi trình duyệt web xử lý trang và tính toán kích thước của nó, nó sẽ thiết lập màu sắc của thành phần đoạn văn theo kích thước của cửa sổ trình duyệt. Trong trường hợp chiều rộng của trình duyệt vượt quá 750 pixel, màu xám được sử dụng làm màu nền cho thẻ; ngược lại, nếu chiều rộng thấp hơn ngưỡng này, màu đen được xác định trước sẽ được áp dụng.
Thật vậy, mặc dù cách tiếp cận này có thể hoạt động hiệu quả, nhưng nó có thể dẫn đến sự phổ biến của mã ngày càng trở nên cồng kềnh, đặc biệt khi cố gắng triển khai các sắc thái phong cách khác nhau theo các tiêu chí cụ thể. May mắn thay, với sự ra đời của khả năng đóng gói#### Truy vấn phương tiện trực tiếp trong các thuộc tính kiểu của một thành phần riêng lẻ, người ta có thể hợp lý hóa và hợp nhất logic trình bày của chúng theo cách ngắn gọn và gắn kết hơn.
p {
color:black;
@media (min-width:750px) {
color:gray;
}
}
Việc triển khai hiện tại cung cấp một cách tiếp cận đơn giản hơn so với người tiền nhiệm của nó, được đặc trưng bởi khả năng đọc nâng cao cho phép người dùng phân biệt ứng dụng kiểu của trình duyệt dựa trên truy vấn phương tiện và cấu trúc của phần tử gốc xung quanh.
Tạo kiểu trang web với CSS Nested Styles
Bắt buộc phải áp dụng kiến thức thu được cho đến nay bằng cách xây dựng một trang web cơ bản và sử dụng chức năng tạo kiểu phân cấp trong CSS. Để bắt đầu quá trình này, hãy thiết lập một thư mục và gán cho nó một tiêu đề bạn chọn. Trong thư mục này, tạo hai tệp-“index.html” và “style.css”.
Trong tệp HTML chính, điều cần thiết là bao gồm một trình giữ chỗ hoặc mã khung cung cấp cấu trúc và chức năng cơ bản cho trang web. Mẫu này, thường được gọi là mã"bản mẫu", thiết lập nền tảng cho phần còn lại của các thành phần trên trang để xây dựng. Nó bao gồm các thành phần tiêu chuẩn như tiêu đề, thẻ meta, biểu định kiểu và tập lệnh cần thiết để hiển thị và tương tác phù hợp. Bằng cách kết hợp mã cơ bản này trong tệp index.htm, nhà phát triển có thể đảm bảo tính nhất quán trên tất cả các trang và hợp lý hóa quy trình làm việc của họ bằng cách tránh các tác vụ lặp đi lặp lại.
<!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="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ước khối này mô tả định dạng cho một trang web tin tức giả mạo. Do đó, hãy truy cập tài liệu style.css và thêm chỉ thị tiếp theo vào đó:
.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ã nói trên sử dụng các kỹ thuật CSS nâng cao để tùy chỉnh trực quan toàn diện nội dung trang web. Bộ chọn được sử dụng, được ký hiệu là “.container”, đóng vai trò là nền tảng mà tất cả các yếu tố thiết kế khác được xây dựng trên đó. Lựa chọn cụ thể này có thể dễ dàng truy cập và thao tác thông qua việc sử dụng ký hiệu dấu và (&). Khi thực hiện trong trình duyệt web, người ta sẽ quan sát thấy một bố cục đẹp mắt về mặt thẩm mỹ bao gồm các thành phần khác nhau được sắp xếp tỉ mỉ theo các thông số kỹ thuật được xác định trước.
Bạn vẫn cần Bộ tiền xử lý CSS chứ?
Mặc dù sự ra đời của các kiểu lồng nhau trong CSS gốc có thể cho thấy tiện ích bị giảm sút đối với các bộ tiền xử lý CSS, nhưng điều cần thiết là phải nhớ rằng các bộ tiền xử lý này cung cấp nhiều khả năng hơn là các khả năng lồng nhau đơn thuần. Bao gồm trong số các điều khoản của chúng là các cấu trúc như vòng lặp, mixin và chức năng, khiến chúng trở thành các tài nguyên không thể thiếu ngoài sự sắp xếp theo phong cách đơn thuần. Sự lựa chọn giữa việc sử dụng một bộ tiền xử lý CSS hay tránh sử dụng một bộ phụ thuộc vào các nhu cầu và sở thích cụ thể của từng kịch bản riêng lẻ và sở thích của nhà phát triển.