Specificity và cascade trong CSS hoạt động thế nào? `!important` có nên dùng?

⚡ Trả lời nhanh

Cascade quyết định theo thứ tự: origin và !important, rồi specificity (inline > id > class/attribute/pseudo-class > element), cuối cùng là thứ tự xuất hiện. !important nên hạn chế vì phá cascade, chỉ dùng cho utility hoặc ghi đè style bên thứ ba.

Selector	Specificity (id, class, element)
`p`	0,0,1
`.card p`	0,1,1
`#nav .item`	1,1,0
`:where(.a .b)`	0,0,0
`:is(.a, #b)`	lấy giá trị cao nhất trong danh sách

.btn { color: black; }
.card .btn { color: blue; }  /* thắng vì specificity cao hơn */
.btn { color: red; }         /* cùng specificity thì dòng sau thắng */

Thuộc tính kế thừa (color, font-*) truyền xuống con; không kế thừa: margin, border, background.
Ép kế thừa bằng inherit; reset bằng initial, unset, revert.