Hai kiểu lập trình viên

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.

  10 câu nói cực hay về lập trình
  10 Kỹ năng quan trọng cần có của Front-end để tìm công việc dễ dàng hơn

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:

  1. Calculating a selector’s specificity, https://www.w3.org/TR/selectors-3/#specificity 
  2. 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:

Truy cập ngay việc làm IT đãi ngộ tốt trên TopDev