Tích hợp Bootstrap CSS vào dự án thế nào là tốt nhất

Bootstrap css chắc không xa lạ với các web developer, nhưng mình thấy có rất nhiều bạn sử dụng Bootstrap sai cách trong các dự án web. Tại sao mình lại nói vậy, thì các bạn hãy theo dõi bài viết này nhé.

I. Không nên tích hợp bằng cách Download.zip

Trong thực tế khi làm việc với Bootstrap, chúng ta thường hay tùy biến lại những styles mặc định mà Bootstrap cung cấp như màu sắc, box-shadow, border,… Thế nhưng khi tích hợp Bootstrap vào dự án, nhiều bạn lại chọn cách download file .zip chứa các file css, js – là những file đã được compile và không có khả năng tùy biến cao.

Khi tích hợp Bootstrap theo cách này, mà muốn tùy biến lại css thì mình thấy các bạn hay làm là viết các css muốn ghi đè vào một file là custom.css, sau đó cho file này load sau các css của Bootstrap. Nghe thì cũng hợp lý đấy, nhưng cách này có một số nhược điểm như sau:

Khó có thể override được hết các thuộc tính css của Bootstrap: Quả đúng như vậy, mình lấy ví dụ trong trường hợp bạn muốn đổi màu primary của Bootstrap chẳng hạn. Mặc định màu primary của Bootstrap có tông màu xanh da trời, và tông màu này được áp dụng ở rất nhiều chỗ như border, button, text, background… Nếu bạn muốn đổi màu primary này đồng nghĩa bạn phải ghi đè hết styles của các class về border, button, text, background,… Chỉ cần bỏ sót một class thì coi như bạn thất bại.

CSS bị thừa – phí tài nguyên: Khi ghi đè, kết quả bạn sẽ thấy css của mình. Nhưng trước đó trình duyệt vẫn phải load các css của Bootstrap, điều này gây lãng phí tài nguyên máy chủ cho một lý do không đáng có.

Không sử hết các components: Bootstrap dựng sẵn cho mình cả một bầu trời components, thế nhưng chẳng bao giờ mình dùng hết cả. Những component như well, jumbotron rất ít khi dùng, vậy mà vẫn được load trong css của bootstrap – khá thừa thãi.

II. Tích hợp thế nào là tốt nhất

Không biết bạn có để ý không, chứ ngoài việc cung cấp các file css đã được compile, Bootstrap còn cung cấp cả những file scss. Nếu muốn tùy biến styles, chúng ta nên tùy biến trong những file scss này.

Về công cụ compile từ scss ra css, mình sẽ sử dụng Laravel Mix cho gần gũi. Bạn nên đọc 2 bài viết của mình dưới đây nếu chưa hiểu scss là gì cũng như chưa biết cách sử dụng Laravel Mix để compile scss ra css.

Tham khảo Việc làm lập trình CSS hấp dẫn trên TopDev

Bước 1: Tạo một project sử dụng Laravel Mix.

Nếu bạn nào lười thì có thể clone github repo của mình về rồi cài đặt theo các bước sau đây:

git clone https://github.com/phambinh217/laravel-mix-stand-alone.git
cd laravel-mix-stand-alone
npm install
npm install bootstrap --save-dev

Bước 2: Tùy biến theo cách của bạn.

Theo như tài liệu về phần Theming của Bootstrap, có 2 cách để bạn có thể tùy biến lại styles.

Cách 1: Import toàn bộ scss của Bootstrap.

Bạn ở file src/app.scss, xóa hết nội dung và thay thế bằng:

@import “../node_modules/bootstrap/scss/bootstrap”;

Cách 2: Dùng component nào thì thì import component đấy.

Bạn mở file src/app.scss, xóa hết nội dung và thay thế bằng:

// Bắt buộc phải import những file này
@import "../node_modules/bootstrap/scss/functions";
@import "../node_modules/bootstrap/scss/variables";
@import "../node_modules/bootstrap/scss/mixins";

// Những components bạn cần
// Bạn có thể xem danh sách các components
// ở trong file 'node_modules/bootstrap/scss/bootstrap.scss'
@import "../node_modules/bootstrap/scss/reboot";
@import "../node_modules/bootstrap/scss/type";
@import "../node_modules/bootstrap/scss/images";
@import "../node_modules/bootstrap/scss/code";
@import "../node_modules/bootstrap/scss/grid";

Ở đây, mình sẽ chọn Cách 2 để tăng khả năng tùy biến.

Không chỉ cho phép tùy biến các components, Bootstrap còn cho bạn tùy biến các thông số về màu sắc, khoảng cách giữa các col, kích thước xs, sm, md, lg,… thông qua giá trị của các biến.

Để xem chi tiết Bootstrap có những biến nào, mỗi biến mang ý nghĩa là gì bạn có xem trong file node_modules/bootstrap/scss/variables.

Để chỉnh sửa các biến, bạn chỉ cần override chúng trước khi import những file scss của Bootstrap là được. Trong ví dụ sau đây, mình sẽ override lại màu nền, mà màu chữ thông qua 2 biến là $body-bg và $body-color.

// Các biến cần ghi đè
$body-bg: #000;
$body-color: #111;

// Import scss của Bootstrap
@import "../node_modules/bootstrap/scss/bootstrap";

Bước 3: Compile thôi.

Bạn chạy:

npm run watch

Hoặc chạy command sau trong trường hợp command trên không hoạt động với hệ điều hành của bạn:

npm run watch-poll

Toàn bộ scss của Bootstrap sẽ được compile ra dist/app.css – rất cùng gọn gàng và sạch sẽ.

III. Kết luận

Mình làm việc với Bootstrap được một thời gian khá dài rồi mới phát hiện ra cách làm này. Do khi vào trang chủ của Bootstrap, là nó gợi ý ngay một nút Download to tướng, thế là mình chỉ biết đường tải .zip về rồi dùng thôi, mãi về sau tự đặt ra câu hỏi “Làm sao để tùy biến lại css của bootstrap hiệu quả hơn” thì mới chịu tìm tòi thêm.

Bài viết được viết dựa trên kinh nghiệm cá nhân. Rất mong nhận được góp ý từ các bạn.

Chào tạm biệt, hẹn gặp lại trong những bài viết sau.

Bài viết gốc được đăng tải tại phambinh.net

Xem thêm các bài viết hữu ích:

• CSS Preprocessor là gì? Cách sử dụng có khó không?
• Sự khác nhau giữa file application với bootstrap trong Spring
• CSS Framework có thật sự cần thiết như chúng ta nghĩ?