Bài 15: Scoped CSS trong VueJS và các kĩ thuật liên quan

Chào mừng tất cả các bạn đã quay trở lại với series học VueJS với Laravel của mình, ở bài trước mình đã hướng dẫn các bạn cách xử lý các sự kiện khi người dùng tương tác bằng chuột hoặc bàn phím với VueJS, các bạn có thể xem lại ở đây. Ở bài này chúng ta sẽ tìm hiểu về một trợ thủ rất đắc lực trong quá trình phát triển các ứng dụng Vue nữa đó là thiết lập phạm vi cho CSS trong Vue.

Trong quá trình phát triển ứng dụng, theo thời gian càng ngày code càng phình to theo thời gian, số lượng component tăng lên vùn vụt, các thiên tài trong group liên tục commit code lên branch, ngày mới đến công ty chào buổi sáng bằng command git pull ... xem lại project thì đã thêm một đống component, code mới. Ngại ngùng không muốn động vào mớ code ấy. Các bạn tiếp tục code phần của mình.

Dẫu vậy đời không như là mơ, đến một ngày các bạn tạo một component Vue mới, viết code ngon lành, dẫu vậy lúc load lại trang chạy thử thì dòng text màu xanh mà liên tục bị chuyển thành màu đỏ. Bực mình sửa mãi không được thế là đánh bài cùi, sửa lại phần css ở component đó cho toàn bộ là !important cho chắc