CSS (Cascading Style Sheets) là một thành phần cơ bản của web. Nó có trách nhiệm tạo style cho trang web, giúp trang web trông hấp dẫn và chuyên nghiệp hơn. Vào tháng 9 năm 2019, W3C (World Wide Web Consortium) giới thiệu tính năng CSS Nesting giúp đơn giản hóa cách chúng ta viết css. Trong bài viết này, chúng ta sẽ khám phá tính năng mới này và cách nó có thể tăng cường trải nghiệm CSS Vanilla.
Simplified CSS Structure
Một trong những lợi ích chính của tính năng CSS Nesting là nó giúp đơn giản hóa cấu trúc CSS. Với tính năng này, bây giờ chúng ta có thể lồng các css vào trong nhau, giảm độ rối loạn có thể xảy ra khi sử dụng phương pháp CSS truyền thống. Ví dụ, thay vì viết:
.navbar { background-color: #333; }
.navbar ul { list-style: none; }
.navbar ul li { display: inline-block; }
.navbar ul li a { color: #fff; text-decoration: none; padding: 10px; }
Bây giờ chúng ta có thể viết thành:
.navbar { background-color: #333; ul { list-style: none; li { display: inline-block; a { color: #fff; text-decoration: none; padding: 10px; } } }
}
Như bạn thấy đấy, tính năng nesting cho phép chúng ta gom nhóm các css liên quan lại với nhau khiến cho code trở nên rõ ràng và có tổ chức hơn.
Improved Readability
The new CSS nesting feature also improves code readability. Nesting allows developers to easily understand the relationship between different styles. It is easier to see which styles apply to which element, making it easier to maintain and update the code. It also reduces the likelihood of errors in the code because styles are grouped together in a logical manner.
Tính năng CSS Nesting mới cũng cải thiện khả năng dễ đọc code. Việc lồng vào cho phép coder dễ dàng hiểu quan hệ giữa các css, dễ dàng nhận thấy css nào áp dụng cho phần tử nào, làm cho việc bảo trì và cập nhật code dễ hơn. Nó cũng giảm khả năng có lỗi trong code vì các css được nhóm lại theo một cách hợp lý.
Compatibility with Vanilla CSS
The new CSS nesting feature is compatible with Vanilla CSS, which means that we don’t need to use preprocessors such as Sass or Less to take advantage of this feature. We can now write nested CSS in Vanilla CSS, making it easier and more accessible for developers who are just starting with web development.
Is CSS Nesting Ready to Use?
Mặc dù CSS Nesting là một cải tiến tuyệt vời cho Vanilla CSS, nó chưa tương thích với tất cả các trình duyệt. Vì vậy, đừng quên kiểm tra trên trang Can I Use trước khi sử dụng nó cho dự án tiếp theo của bạn!
Conclusion
Tính năng mới CSS Nesting giúp đơn giản hóa cấu trúc CSS, cải thiện khả năng đọc mã và tương thích với Vanilla CSS. Nó là một bổ sung đáng hoan nghênh cho cộng đồng phát triển web và chúng ta có thể thấy nó sẽ được sử dụng thường xuyên hơn trong tương lai. Là nhà phát triển, điều quan trọng là luôn cập nhật các tính năng và công nghệ mới và tính năng CSS Nesting mới là một ví dụ tuyệt vời về cách chúng ta có thể cải thiện kĩ năng code của mình.
Bài viết gốc: https://medium.com/codex/css-nesting-is-now-available-with-vanilla-css-e12f29fe16e7