Dùng Bootstrap để thiết kể theme WordPress, nên hay không? 

bootstrap-3-wordpress-theme

Chỉ cần search Google “”WordPress Theme with Bootstrap” là bạn có ngày hàng trăm theme WordPress, cả mất phí và miễn phí, sử dụng Bootstrap để phát triển. Có vẻ như sự tiện dụng mà Bootstrap mang lại đang tạo ra một trào lưu. Tuy nhiên, đây liệu có phải là cách tiếp cận tốt nhất trong quy trình phát triển WordPress hay không? Hãy nhìn vào những ưu nhược điểm dưới đây để có câu trả lời cho riêng bạn:

Boostrap là gì?

Trước hết, từ khái niệm Bootstrap, ta có thể thấy:

  • Bootstrap là một framework với tiêu chí responsive và mobile first.
  • Nó sử dụng HTML, CSS và JavaScript.

Điều này đồng nghĩa với việc Bootstrap không sử dụng PHP. Bootstrap là một framework ứng dụng, không phải là theme framework, nó không cung cấp những template file kiểu như _underscores hay Genesis để bạn phát triển theme. Bootstrap chỉ cung cấp một số CSS và JavaScript script để bạn dễ dàng tạo các trang web responsive và đưa vào các tương tác.

Với mục đích ban đầu chỉ là nhằm đưa ra một framework chung giúp các lập trình viên của Twitter có thể phối hợp hiệu quả hơn, tên gọi ban đầu là Twitter Blueprint đã phần nào thể hiện rõ điều này.

Khi mà dự án này bắt đầu phát triển, nhận được phản hồi tích cực từ phía các lập trình viên. Twitter đã open source Bootstrap vào năm 2011, từ đó framework này được ứng dụng rộng rãi, trong đó có cả việc phát triển WordPress themes.

Khi download Bootstrap về máy, bạn sẽ thấy rằng nó bao gồm nhiều file CSS và JavaScript. Bạn sử dụng Bootstrap bằng cách đưa vào các CSS #id.class đã được định nghĩa sẵn vào trong file HTML của mình.

Những lợi thế của Bootstrap

Responsive và Mobile-First

Với grid layout 12 cột của mình, Bootstrap đưa ra một loạt class để bạn có thể tuỳ biến theo ý nhu cầu:

  • Nếu bạn không rành @media query, bạn sẽ không cần phải lo việc việc lại từng breakpoint cho từng loại device.
  • Hệ thống grid layout của bootstrap được viết dựa trên nguyên tắc CSS-hướng-đối-tượng (OOP CSS), do đó việc bố trí layout sẻ rất linh hoạt và dễ dàng.
  • Các tiếp cận mobile-first đồng nghĩa với việc file CSS cảu bạn sẽ gọn gàng và hiệu quả hơn so với desktop-first.

Boosttrap có thiết kế hiện đại và clean:

Cho dù không thể mang đến những đột phá trong thiết kế web, khó có thể phụ nhận vai trò của Bootstrap trong việc tạo ra những trang web trông rất hiện đại và clean. Việc quen với những layout này cũng góp phần giúp người dùng dễ làm làm quen và tương tác với website hơn.

Boostrap tương thích rất tốt với HTML5

Thay vì phải sử dụng các loại plugin hoặc paste code từ nơi khác, Bootstrap cũng cấp cho bạn hầu hết các tương tác phổ biển trong một website như:

  •  Transition
  •  Modals (Thường sử dụng để đăng ký nhận newsletter)
  •  Dropdowns (sub catergory cho menu items)
  •  Tooltips (Hover chuột để biết thêm chi tiết)
  •  Popover
  •  Buttons

Điểm yếu của Bootstrap

Có quá nhiều thứ cần nhớ

Ưu điểm về grid-layout của Bootstrap là không cần bàn cãi. Tuy nhiên, việc cung cấp quá nhiều .class lựa chọn để layout để lựa chọn nhiều khi cũng khiến bạn phải mò mẫm trong đống document của Bootstrap để tìm ra đúng layout mình cần. Trong khi đó, nếu chỉ cần một vài layout đơn giản như fullwidth, 3-3-3 hoặc 6-6 thì bạn có thể chỉ cần một vài dòng code CSS là ổn.

Bootstrap sử dụng fixed @media query:

Những breakpoint mà Bootstrap sử dụng dựa trên một số viewport cố định, nhưng viewport này đang dần trở nên lỗi thời.

Trong một vài năm quá, responsive design đang chuyển dần từ những breakpoint cố định sang cái gọi là design-based breakpoints. Nhưng breakpoints sẽ không có vấn đề gì nếu như bạn thiết kế theo một số layout cơ bản của Bootstrap, tuy nhiên nếu bạn cần nhiều breakpoints linh hoạt hơn thì việc thêm vào những breakpoints sẵn có của Bootstrap còn mất thời gian hơn là viết lại từ đầu.

Quá nhiều code thừa:

Không thể phủ nhận rằng Bootstrap có rất nhiều ưu điểm khi nó cũng cấp gần như đầy đủ những tính năng cơ bản của một trang web responsive hiện đại. Tuy nhiên, mặt trái của việc này là website của bạn sẽ phải tải thêm rất nhiều dòng code không cần thiết khi mà bạn chỉ cần chưa đến 10% những gì Bootstrap cung caaps.

Bootstrap không khuyến khích sáng tạo

Chỉ cần nhét Bootstrap vào themes sẵn có, gọi ra cái .class từ stylesheet và thế là bạn đã có một trang web responsive trông cũng ổn ổn. Sự tiện dụng và dễ dàng của Bootstrap nhiều khi sẽ khuyễn khích tính lười sáng tạo, vốn luôn thường trực trong mỗi chúng ta. Kết quả là, chúng ta thướng thoả hiệp những gì mình thực sự muốn cho website để đổi lấy sự tiện dụng và tiết kiệm thời gian mà Bootstrap mang lại.

Điều đáng nói của sự làm dụng này là việc chúng ta sẽ có một loạt các website trông na ná nhau. Những WordPress webdesingner đã mất nhiều công sức để đưa theme thoát ra khỏi cái bóng mang tên “giống WordPress” giờ lại đang đi vào lối mòn của “giống Bootstrap”?

Tóm lại

Tất nhiên là Bootstrap có những ưu điểm không thể chối cãi. Nếu bạn cần một trang website mobile-first, clean và không quá cầu kỳ về layout, Bootstrap có thể giúp bạn tiết kiệm được rất nhiều thời gian dev.

Tuy nhiên, để có thể làm chủ được Bootstrap, thời gian bỏ ra để làm chủ được nó cũng không phải là một sớm một chiều. Có quá nhiều thứ phải nhớ, bạn sẽ thường xuyên chuyển qua lại phần document để kiểm tra xem việc mình định làm theo cách của Bootstrap thế nào.

Tóm lại, tôi cho rằng bạn nên dùng Bootstrap trong các trường hợp sau:

  • Bạn sẵn sàng bỏ thời gian và công sức ra để học và làm chủ Bootstrap.
  • Bạn biết những gì mình cần là sử dụng được phần lớn các công của của Bootstrap vào trong trang của mình.
  • Bạn không có designer riêng để thiết kế web và không muốn site của mình quá xấu.

Bạn muốn viết responsive web nhưng không muốn đụng vào @media query.

Những trường hợp sau không nên dùng Bootstrap

  • Nếu bạn muốn một website linh hoạt, với nhiều breakpoints và layout đặc biệt.
  • Nếu bạn chỉ sử dụng 1 script có sẵn của javaScript hoặc không dùng grid layout.
  • Nếu bạn đã có thể sử dụng một WordPress theme framework hoặc một starter theme khác, vốn cũng cấp sãn các functions và hooks của WordPress.

Và trên hết, choose wisely, sự lựa chọn là của bạn!