M

MLOG

Tiếng Việt

Khám phá sức mạnh của Lồng ghép CSS, mang cú pháp giống Sass vào CSS gốc. Tìm hiểu cách tính năng mới này đơn giản hóa việc tạo kiểu, cải thiện khả năng đọc và bảo trì mã cho các nhà phát triển web toàn cầu.

Lồng ghép CSS: Cú pháp giống Sass trong CSS Gốc dành cho Lập trình viên Toàn cầu

Trong nhiều năm, các nhà phát triển web đã dựa vào các bộ tiền xử lý CSS như Sass, Less, và Stylus để khắc phục những hạn chế của CSS tiêu chuẩn. Một trong những tính năng được yêu thích nhất của các bộ tiền xử lý này là lồng ghép (nesting), cho phép bạn viết các quy tắc CSS bên trong các quy tắc CSS khác, tạo ra một cấu trúc trực quan và có tổ chức hơn. Giờ đây, nhờ sự phát triển của các tiêu chuẩn CSS, tính năng lồng ghép CSS gốc cuối cùng đã ra mắt, mang đến một giải pháp thay thế mạnh mẽ mà không cần đến các công cụ bên ngoài.

Lồng ghép CSS là gì?

Lồng ghép CSS là một tính năng cho phép bạn lồng các quy tắc CSS vào bên trong các quy tắc CSS khác. Điều này có nghĩa là bạn có thể nhắm mục tiêu các phần tử cụ thể và trạng thái của chúng trong một bộ chọn cha, giúp CSS của bạn ngắn gọn và dễ đọc hơn. Nó mô phỏng cấu trúc phân cấp của HTML, cải thiện khả năng bảo trì và giảm sự lặp lại. Hãy tưởng tượng bạn có một menu điều hướng. Theo cách truyền thống, bạn có thể viết CSS như thế này:


.navbar {
  background-color: #f0f0f0;
  padding: 10px;
}

.navbar a {
  color: #333;
  text-decoration: none;
}

.navbar a:hover {
  color: #007bff;
}

Với tính năng lồng ghép CSS, bạn có thể đạt được kết quả tương tự với một cách tiếp cận có cấu trúc hơn:


.navbar {
  background-color: #f0f0f0;
  padding: 10px;

  a {
    color: #333;
    text-decoration: none;

    &:hover {
      color: #007bff;
    }
  }
}

Lưu ý cách các quy tắc a và a:hover được lồng trong quy tắc .navbar. Điều này chỉ ra rõ ràng rằng các kiểu này chỉ áp dụng cho các thẻ liên kết bên trong thanh điều hướng. Ký hiệu & đề cập đến bộ chọn cha (.navbar) và rất quan trọng đối với các lớp giả như :hover. Cách tiếp cận này dễ dàng áp dụng cho các dự án đa dạng, từ các trang web đơn giản đến các ứng dụng web phức tạp được khán giả toàn cầu sử dụng.

Lợi ích của việc sử dụng Lồng ghép CSS Gốc

Sự ra đời của lồng ghép CSS gốc mang lại một loạt lợi ích cho các nhà phát triển web:

Cách sử dụng Lồng ghép CSS

Lồng ghép CSS sử dụng một cú pháp đơn giản được xây dựng dựa trên các quy ước CSS hiện có. Dưới đây là phân tích các khái niệm chính:

Lồng ghép cơ bản

Bạn có thể lồng bất kỳ quy tắc CSS nào vào bên trong một quy tắc CSS khác. Ví dụ:


.container {
  width: 80%;
  margin: 0 auto;

  h2 {
    font-size: 2em;
    color: #333;
  }
}

Đoạn mã này tạo kiểu cho tất cả các phần tử h2 bên trong phần tử .container.

Sử dụng bộ chọn &

Bộ chọn & đại diện cho bộ chọn cha. Nó rất cần thiết cho các lớp giả, phần tử giả và các bộ kết hợp. Ví dụ:


button {
  background-color: #007bff;
  color: #fff;
  padding: 10px 20px;
  border: none;
  cursor: pointer;

  &:hover {
    background-color: #0056b3;
  }

  &::after {
    content: '';
    display: block;
    width: 100%;
    height: 2px;
    background-color: #0056b3;
  }
}

Trong ví dụ này, &:hover áp dụng các kiểu khi nút được di chuột qua, và &::after thêm một phần tử giả sau nút. Lưu ý tầm quan trọng của việc sử dụng "&" để tham chiếu đến bộ chọn cha.

Lồng ghép với Truy vấn phương tiện (Media Queries)

Bạn cũng có thể lồng các truy vấn phương tiện bên trong các quy tắc CSS để tạo ra các thiết kế đáp ứng:


.card {
  width: 300px;
  margin: 20px;
  border: 1px solid #ccc;

  @media (max-width: 768px) {
    width: 100%;
    margin: 10px 0;
  }
}

Đoạn mã này điều chỉnh chiều rộng và lề của phần tử .card khi chiều rộng màn hình nhỏ hơn 768px. Đây là một công cụ mạnh mẽ để tạo các trang web thích ứng với các kích thước màn hình khác nhau được khán giả toàn cầu sử dụng.

Lồng ghép với các Bộ kết hợp (Combinators)

Các bộ kết hợp CSS (ví dụ: >, +, ~) có thể được sử dụng trong các quy tắc lồng nhau để nhắm mục tiêu các mối quan hệ cụ thể giữa các phần tử:


.article {
  h2 {
    margin-bottom: 10px;
  }

  > p {
    line-height: 1.5;
  }

  + .sidebar {
    margin-top: 20px;
  }
}

Trong ví dụ này, > p nhắm mục tiêu các đoạn văn là con trực tiếp của phần tử .article, và + .sidebar nhắm mục tiêu phần tử anh em ngay sau đó có lớp .sidebar.

Hỗ trợ trình duyệt và Polyfills

Tính đến cuối năm 2023, lồng ghép CSS đã nhận được sự chú ý đáng kể và được hỗ trợ bởi hầu hết các trình duyệt hiện đại, bao gồm Chrome, Firefox, Safari và Edge. Tuy nhiên, điều quan trọng là phải kiểm tra ma trận hỗ trợ trình duyệt hiện tại trên các tài nguyên như Can I use để đảm bảo khả năng tương thích cho đối tượng mục tiêu của bạn. Đối với các trình duyệt cũ hơn không hỗ trợ lồng ghép CSS gốc, bạn có thể sử dụng một polyfill, chẳng hạn như plugin PostCSS Nested, để chuyển đổi CSS lồng của bạn thành mã tương thích.

Các phương pháp hay nhất cho Lồng ghép CSS

Mặc dù lồng ghép CSS mang lại nhiều lợi ích, điều cần thiết là sử dụng nó một cách thận trọng để tránh tạo ra mã quá phức tạp hoặc khó bảo trì. Dưới đây là một số phương pháp hay nhất cần tuân theo:

Ví dụ về Lồng ghép CSS trong thực tế

Hãy khám phá một số ví dụ thực tế về cách lồng ghép CSS có thể được sử dụng để tạo kiểu cho các thành phần giao diện người dùng khác nhau:

Nút bấm (Buttons)


.button {
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  cursor: pointer;

  &.primary {
    background-color: #007bff;
    color: #fff;

    &:hover {
      background-color: #0056b3;
    }
  }

  &.secondary {
    background-color: #f0f0f0;
    color: #333;

    &:hover {
      background-color: #e0e0e0;
    }
  }
}

Đoạn mã này định nghĩa các kiểu cho một lớp .button chung và sau đó sử dụng lồng ghép để tạo các biến thể cho các nút chính và phụ.

Biểu mẫu (Forms)


.form-group {
  margin-bottom: 20px;

  label {
    display: block;
    margin-bottom: 5px;
  }

  input[type="text"],
  input[type="email"],
  textarea {
    width: 100%;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
  }

  .error-message {
    color: red;
    margin-top: 5px;
  }
}

Đoạn mã này tạo kiểu cho các nhóm biểu mẫu, nhãn, trường nhập liệu và thông báo lỗi trong một biểu mẫu.

Menu điều hướng (Navigation Menus)


.nav {
  list-style: none;
  margin: 0;
  padding: 0;

  li {
    display: inline-block;
    margin-right: 20px;

    a {
      text-decoration: none;
      color: #333;

      &:hover {
        color: #007bff;
      }
    }
  }
}

Đoạn mã này tạo kiểu cho một menu điều hướng, các mục danh sách và các thẻ liên kết trong menu.

Lồng ghép CSS so với Bộ tiền xử lý CSS

Lồng ghép CSS là một sự thay đổi cuộc chơi cho các nhà phát triển web đã dựa vào các bộ tiền xử lý CSS trong nhiều năm. Trong khi các bộ tiền xử lý cung cấp một loạt các tính năng, bao gồm biến, mixin và hàm, lồng ghép CSS gốc cung cấp một phần đáng kể các khả năng này trực tiếp trong trình duyệt. Dưới đây là một so sánh:

Tính năng Lồng ghép CSS Gốc Bộ tiền xử lý CSS (ví dụ: Sass)
Lồng ghép Có Có
Biến Thuộc tính tùy chỉnh (Biến CSS) Có
Mixins Không (Chức năng hạn chế với @property và Houdini APIs) Có
Hàm Không (Chức năng hạn chế với Houdini APIs) Có
Toán tử Không Có
Hỗ trợ trình duyệt Các trình duyệt hiện đại Yêu cầu biên dịch
Phụ thuộc Không có Yêu cầu công cụ bên ngoài

Như bạn có thể thấy, lồng ghép CSS gốc cung cấp một giải pháp thay thế mạnh mẽ cho các bộ tiền xử lý cho các nhu cầu lồng ghép cơ bản. Mặc dù các bộ tiền xử lý vẫn cung cấp các tính năng nâng cao như mixin và hàm, khoảng cách đang được thu hẹp. Các thuộc tính tùy chỉnh CSS (biến) cũng cung cấp một cách để tái sử dụng các giá trị trên các biểu định kiểu của bạn.

Tương lai của Lồng ghép CSS và hơn thế nữa

Lồng ghép CSS chỉ là một trong nhiều phát triển thú vị trong thế giới CSS. Khi CSS tiếp tục phát triển, chúng ta có thể mong đợi sẽ thấy nhiều tính năng mạnh mẽ hơn nữa giúp đơn giản hóa việc phát triển web và cải thiện chất lượng mã. Các công nghệ như Houdini APIs đang mở đường cho các khả năng tạo kiểu nâng cao hơn, bao gồm các thuộc tính tùy chỉnh với hệ thống kiểu phong phú hơn, hoạt ảnh tùy chỉnh và các thuật toán bố cục tùy chỉnh. Việc nắm bắt các công nghệ mới này sẽ cho phép các nhà phát triển tạo ra các trải nghiệm web hấp dẫn và tương tác hơn cho người dùng trên toàn thế giới. Nhóm làm việc CSS (CSS Working Group) không ngừng khám phá những cách mới để cải thiện ngôn ngữ và giải quyết nhu cầu của các nhà phát triển web.

Kết luận

Lồng ghép CSS là một bước tiến đáng kể cho CSS gốc, mang lại lợi ích của cú pháp giống Sass đến với đông đảo người dùng hơn. Bằng cách cải thiện khả năng đọc mã, tăng cường khả năng bảo trì và giảm sự trùng lặp mã, lồng ghép CSS trao quyền cho các nhà phát triển viết CSS sạch hơn, hiệu quả hơn và có khả năng mở rộng cao hơn. Khi hỗ trợ trình duyệt tiếp tục phát triển, lồng ghép CSS được dự báo sẽ trở thành một công cụ thiết yếu trong kho vũ khí của mọi nhà phát triển web. Vì vậy, hãy nắm bắt sức mạnh của lồng ghép CSS và mở khóa một cấp độ sáng tạo và năng suất mới trong các dự án phát triển web của bạn! Tính năng mới này sẽ cho phép các nhà phát triển từ các nền tảng và trình độ kỹ năng khác nhau viết CSS dễ bảo trì và dễ hiểu hơn, cải thiện sự hợp tác và giảm thời gian phát triển trên toàn cầu. Tương lai của CSS rất tươi sáng, và lồng ghép CSS là một ví dụ điển hình cho sự tiến bộ đang được thực hiện.