Hello mọi người, lại là mình, Hoàng đây - dù chẳng mấy ai biết mình là ai :)
Hôm nay chúng ta cùng đi tìm hiểu một số vấn đề của css và cách để cải thiện chúng tốt hơn nhé. Như thường lệ, chúng ta có cấu trúc như sau
CSS được thiết kế để trở thành một ngôn ngữ đơn giản và trực quan. Mục đích cơ bản của nó là để xác định selector
để nhắm mực tiêu vào các phần tử HTML và áp dụng các thuộc tính cho nó. Chúng dễ dàng để nắm bắt và áp dụng. Khi làm việc trên những project lớn hoặc phức tạp, thì một số tính năng CSS có thể sẽ phức tạp hơn khi gặp vấn đề.
Những vấn đề với cách viết CSS hiện tại
Sau đó bạn biết thêm về id và class
Và bạn học được cách xử lý các pseudo selector, hoặc khai báo cho các phần tử anh, chị, em, họ hàng, con cháu…
Rồi khi đã quen tay với CSS và bạn bắt tay vào dự án thực tế, bạn bắt đầu nhận ra kẻ thù không ở đâu xa, đang lởn vởn quanh ta ý mà. Bạn bước vào cuộc chiến specificity war, đánh nhau tơi bời khói lửa với các chiến hữu trong team. Một trận đấu kinh hoàng khi ai cũng muốn override code của người đi trước. Người nắm giữ !important
, người lại dùng kế hiểm inline style + !important
. Tình nghĩa anh em có chắc bền lâu, chiến hữu quay đầu không nhìn mặt nhau. Thật ức chế!!!
Specificity là gì?
Specificity là một trọng số được trình duyệt sử dụng để quyết định CSS style nào sẽ được áp dụng cho các element. Specificity được tính toán dựa vào phân loại selector và số lượng selector áp dụng lên một element. Bạn có thể đọc thêm về chủ đề này trên trang MDN minh hoạ khá cụ thể cách tính specificity.
Tính tái sử dụng và kích thước tập tin CSS
Tính chất “cascading” của CSS vốn được sinh ra để hỗ trợ tái sử dụng code lại là một con dao 2 lưỡi. Cascading cùng với specificity làm cho CSS trở nên khó đoán và lời khuyên là hạn chế cascading được bao nhiêu thì hay bấy nhiêu. Điều này dẫn đến tập tin CSS chứa nhiều khai báo bị trùng lặp.
=> Đây là lúc chúng ta cần một kiến trúc.
.block: Thành phần cấp to nhất của abstraction hoặc component.
.block__element: Thành phần con bên trong của block.
.block—modifier: Là 1 phiên bản khác của block. Hay những thay đổi style khác so với style ban đầu (font-size, background, color, padding,…)
<button class=”btn btn--primary btn--large btn--font-20 ….”>Submit</button>
<button class=”btn --primary --large --font-20 ….”>Submit</button>
Hoàn toàn không sai, BEM là một phương pháp hiệu quả để chi nhỏ trang thành từng component và bạn hoàn toàn có thể tránh được những vấn đề xung đột ở phía trên bằng cách chỉ sửu dụng class được đặt tên theo BEM. Ngoài ra, khi một component không còn dùng nữa, bạn có thể xoá đi class mà không lo sợ ảnh hưởng đến các component khác.
Tuy nhiên, BEM cũng mang lại những vấn đề khó chịu mà bạn có thể xem thêm ở bài viết Battling BEM CSS: 10 Common Problems And How To Avoid Them. Có thể kể đến một số vấn đề sau:
Vậy atomic CSS giải quyết được những vấn đề trên à?
Có thể, nhưng trước hết hãy xem atomic CSS là gì đã nhé.
Atomic CSS (thường được gọi là Funtional CSS hay Utility-first CSS) là cách khai báo các class sao cho mỗi class chỉ mô tả một tính năng duy nhất. Để xây dựng compponent lớn hơn, chúng ta sẽ kết hợp các class nguyên tử này lại với nhau. Chẳng hạn như:
Trong ví dụ trên, class .white
chỉ làm duy nhất một việc là thay đổi màu chữ sang màu trắng, .bg-green
sẽ thiết lập màu nền sang màu xanh, trong khi .px-20
điều chỉnh padding trục x thành 20px. Một component được viết theo atomic CSS sẽ giống như thế này:
<button class=" text-white bg-green px-20 ">Submit</button>
Các framework được thiết kế theo hướng atomic không có nhiều component, nhưng bù lại chúng không đặt quá nhiều ý kiến riêng và ép buộc bạn phải làm theo. Hầu hết đều cho phép bạn tuỳ chỉnh màu sắc, kích thước theo ý, từ đó bạn có thể xây dựng lên những component cần thiết.
Bùng nổ class -> chỉ nên xây dựng class khi thực sự cần thiết
Tìm và thay đổi class theo yêu cầu khó khăn.
Ví dụ:
“btn--update"
-> replace tất cả thuộc tính trong đó“bg-green red font-24”
-> tương tự cách trên, nhưng chẳng may nó bị chèn thêm 1 class vào giữa “bg-green red fw-bold font-24”
và thế là….“Nếu viết hàng loạt class trong cùng 1 element vậy thì khác nào viết inline style đâu… tại sao không viết css inline cho nhanh?”
Nhìn sơ qua thì đúng là giống như inline style vậy, và ai cũng biết inline style là bad practice. Nhưng atomic classes khác hoàn toàn và mạnh mẽ hơn inline style nhiều. Atomic classes cho phép bạn viết media queries, @support, pseudo selectors hay sử dụng animation, những điều mà inline style không làm được. Và vì atomic CSS được lưu trong tập tin CSS, trình duyệt có thể lưu vào bộ nhớ đệm, không giống như inline style.
@hoangpn - Better every day!
Quick Links
Social Media