Đây là thuộc tính mà bây giờ nó như là default được sử dụng trong các framework CSS như Bootstrap, Foundation và nếu bạn build layout từ đầu mà không sử dụng bất kỳ Framework CSS nào hỗ trợ thì chắn chắn bạn có thể đang sử dụng nó như thế này:
*, *:before, *:after{box-sizing:border-box;}
Nhưng với kiểu selector * như trên thì sẽ gây khó cho dev khi muốn override lại value padding-box hoặc content-box ở 1 số elements. Giả sử có 1 component bạn muốn reset về content-box chẳng hạn:
.my-component{box-sizing:content-box;}
Tuy nhiên, nó lại chỉ apply được cho mỗi class my-component, các class children bên trong lại đang bị ảnh hưởng của box-sizing: border-box. Bạn hình dung nó trông như này:
<divclass="my-component"><!-- Đang là "content-box" --><divclass="children"><!-- Vẫn là "border-box" --></div></div>
Vậy để Best Practices chỗ này mình sẽ phải sử dụng nó như sau:
Mình sẽ không giải thích cụ thể thuộc tính này work như thế nào vì đây là bài chia sẻ về các tips nên mặc nhiên là bạn đã sử dụng nó ^^
Kể từ phần này, mình sẽ refer thêm link các articles để mọi người đọc hiểu thêm
Thuộc tính này nó work gần như à 1 CSS Variable vậy, bạn chỉ cần khai báo 1 màu color ở đầu component, có thể là ở body, tức là có cứ lấy color được khai báo ở parent gần nhất và tất cả các thành phần bên trong chỉ cần set currentColor cho các thuộc tính như background-color, border-color, outline-color, box-shadow đều nhận được màu tương tự.
