Bài viết được sự cho phép của tác giả Huy Trần
Luôn có hai dạng lập trình viên, một dạng luôn nắm vững lý thuyết, dạng còn lại thì không.
Những người nắm vững lý thuyết thì luôn có năng suất làm việc cao hơn hẳn những người không học lý thuyết, vì không phải tốn thời gian để thử sai (trial and error), cũng không cần tốn thời gian tra cứu lại kiến thức.
Một ví dụ đơn giản về CSS, chúng ta có class .gift-image
có thuộc tính top = 10px
, và chúng ta muốn class này có thuộc tính top = 0
trên các thiết bị có màn hình nhỏ hơn 600px
:
.gift-box {
.gift-image {
&.openned {
position: absolute;
top: 10px;
...
}
}
@media (max-width: 600px) {
.gift-image {
top: 0;
}
}
}
Nhưng đoạn code trên sẽ không chạy, và trên mobile, class .gift-image
vẫn có thuộc tính top = 10px
.
Một frontend developer không nắm vững kiến thức sẽ fix vấn đề trên như sau:
@media (max-width: 600px) {
.gift-image {
top: 0 !important;
}
}
Hoặc tốn 10 phút để search Google với một vấn đề không liên quan: position absolute top not change in media query
.
Ngược lại, một frontend developer nắm vững kiến thức về CSS specificity [1] [2] sẽ fix vấn đề trên một cách dễ dàng mà không cần dùng tới !important
:
@media (max-width: 600px) {
.gift-image.openned {
top: 0;
}
}
Và thậm chí còn đạt tới cảnh giới code xong không cần test, sure đúng 100%, push lên thẳng master luôn, rồi để cho junior nó fix =)))
Ví dụ trên chưa có phần giải thích, để dành cho anh em đọc xong tự giải thích
Đọc thêm:
- Calculating a selector’s specificity, https://www.w3.org/TR/selectors-3/#specificity ↩
-
MDN CSS, Specificity, https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity ↩
Bài viết gốc được đăng tải tại thefullsnack.com
Có thể bạn quan tâm:
- Lập trình viên và hội chứng Tự kỷ
- 9 lỗi JavaScript các lập trình viên hay gặp
- Từ lập trình viên Junior, cùng mình trở thành 1 lập trình viên mid-level nhé
Truy cập ngay việc làm IT đãi ngộ tốt trên TopDev