Thứ tự ưu tiên trong CSS

Thứ tự ưu tiên trong CSS. Là gì nhỉ? Là cái mà anh em developer chúng ta hay nói là "viết CSS cho cái này đè cái kia". Đè ở đây là dựa vào thứ tự ưu tiên của các selectors, mình code các style CSS sao cho nó effect (ăn) lên UI (HTML) đúng như ý muốn. 

Đầu tiên lướt sơ về các thuật ngữ hay nói chuyện với nhau hay trong các tài liệu.

Lúc làm CSS chúng ta hay nói selector, thuộc tính, giá trị. Có thể hiểu nôm na như cấu trúc bên dưới

selector {thuộc_tính:giá_trị}

Vậy Selector trong CSS là gì? Chả cần nhớ định nghĩa chi tiết đâu các bạn, nó là cái mà trước dấu ngoặc { trong CSS ấy.

Ví dụ trong CSS viết:

 p {color: red;}
.btn-home {border: 1px solid blue;}

Thì p, .btn-home là các selector.

Tương tự, thuộc tính là color, border. Còn giá trị là red và 1px solid blue.

Quá đơn giản đúng không.

Vậy trọng điểm của bài viết này là gì? Vì sao phải xem nó ?

Thực tế khi làm CSS mà bạn không hiểu rõ thứ tự ưu tiên của các selector. Lúc cần viết đè thuộc tính có sẵn rất vất vả.

Ví dụ trường hợp đơn giản, mọi thẻ <h2> trong website của bạn đều màu blue, giờ vào trang contact thì bạn cần style cho thẻ <h2> sẽ là màu cam. Lúc này bạn phải viết CSS mới để đè CSS màu blue có sẵn.

Và tất nhiên, bạn phải hiểu rõ về thứ tự ưu tiên trong CSS mới dễ dàng giải quyết những vấn đề tương tự như trên.

Vì đây là chủ đề quan trọng, bạn sẽ thấy trên google có rất nhiều bài viết về nó. Viết kỹ có, viết sơ sơ cũng có, viết đến mức khó hiểu cũng có. Ở đây là những kiến thức tóm gọn lại từ thực tiễn mình làm việc. Nên thiết nghĩ rất dễ tiếp cận. Chúng ta chỉ cần nhớ list bên dưới.

Thứ tự ưu tiên CSS từ trên xuống:

1. !important

2. inline CSS

3. ID

4. .class (ví dụ .btn-home {border: 1px solid blue;} ở trên)

5. tag name (ví dụ p {color: red;} ở trên)

Hãy cùng xét vài ví dụ để dễ hiểu hơn.

Ví dụ 1:

Chúng ta có một HTML đơn giản là thẻ h2 chứa text BBMCode.com. Và CSS mặc định là nền màu cam, chữ màu trắng như bên dưới.

Giờ giữ nguyên CSS đó, viết thêm sao cho màu của tag h2 là màu vàng.

Xét thứ tự ưu tiên phía trên và áp dụng thử, mình sẽ đặt 1 class vào thẻ h2 và viết CSS như bên dưới

Như vậy đã rõ, CSS với selector là class (text-yellow) sẽ đè được CSS tag name (h2). Cho dù đặt CSS .text-yellow nằm phía trên cũng không thay đổi kết quả.

Tương tự, chúng ta xét tiếp ví dụ số 2

Ví dụ 2:

Trong ví dụ này, mình đã thêm id demo cho thẻ h2, và viết CSS ở dòng số 7, cho text màu là green.

Kết quả sẽ là:

Màu text bây giờ đã đổi sang green. Mặc dù CSS #demo viết trên cùng. Nhưng dựa vào danh sách thứ tự ưu tiên phía trên, chúng ta có thể thấy ID có độ ưu tiên cao. Cho nên h2 đã effect CSS color: green.

Bài toán tiếp theo cần giải quyết là: Chúng ta sẽ thử viết CSS inline cho thẻ h2, cho màu text là red, xem nó có đè được màu green không nha.

Kết quả phản ánh giống như danh sách thứ tự ưu tiên phía trên. CSS inline sẽ có độ ưu tiên cao hơn cả ID. Và text BBMCode.com chúng ta đã thấy hiện màu red.

Sau cùng, đó chính là vũ khí mạnh nhất !important

!important sẽ bất chấp các selector khác, nó luôn mạnh nhất, vượt lên tất cả và bỏ mọi thứ về phía sau ^^

Cùng xem nhé.

Bên CSS, mình đã thêm !important vào dòng số 14. Thì kết quả màu chữ bây giờ là white.

Lưu ý trong thực tế hạn chế dùng !important nha các bạn. Vì làm vậy sẽ khó bảo trì, chỉnh sửa code khi cần thiết và làm khó người code sau đấy.

Như vậy chúng ta đã rõ thứ tự ưu tiên CSS và chỉ cần nhớ thứ tự ưu tiên ở phía trên là giải quyết được rất nhiều trường hợp rồi. 

Dĩ nhiên trong lúc làm với những website phức tạp, chúng ta còn gặp các selector khác như: pseudo-classes, attribute selectors, pseudo-elements. Các bạn cứ nhớ gói gọn cho mình, bản chất như sau:

• pseudo-classes, attribute selectors (Ví dụ như: :hover, [href]): Cùng độ ưu tiên như .class
• pseudo-elements (Ví dụ như ::before): Cùng độ ưu tiên như tag name.

Vì mấy trường hợp này ít gặp, mình không muốn rườm rà nên không bổ sung vào list phía trên.

Vậy nhé, chúc vui!!!