Hướng dẫn do all sites use bootstrap? - có phải tất cả các trang web đều sử dụng bootstrap?

** UPDATE Part 2 of this series is available here: Being a Web Developer in 2019/20 – Part 2: Choosing the right CSS framework **

In 2019 we are so fortunate to have the vast array of programming languages and frameworks, such as React, Vue, Angular and many many more. As nerdy as it sounds, there has never been a more exciting time to be a Web Developer. At Wibble we pride ourselves on our dedicated WordPress development and with a team that accumulates years of development experience all at easy access for our clients. In this 3-part series, I will be going over the in’s and out’s of being a Web Developer in 2019/20.

 I suck at CSS and what is Bootstrap?

If you were anything like me at the beginning of your web development journey, you may have thought what on earth is CSS and how am I meant to learn every possible option it has in its library. I took to the fundamentals of HTML fairly quickly; I even grew quite proficient in PHP but CSS was always an after thought. Honestly as the answer usually always is, it takes time and lots of practice to learn. I’m still learning new things to this day with CSS.

From a conversation with a friend I had about web development, the word Bootstrap was brought up. Bootstrap! As in the guy from the Pirates of the Caribbean movies? Turns out it’s actual a very popular CSS framework which has helped improve and mould the type of web developer I am today.

This isn’t going to be some monologue about what is Bootstrap and its fundamentals, I’m afraid I’m a decade too late to the party. Instead I’d rather talk about the question many developers ask in 2019, is Bootstrap still relevant? I’d be lying if I told you we are above Bootstrap here at Wibble as every one of our websites. Hundreds of WordPress themes use Bootstrap, why should ours be any different? Research from W3Techs shows that 19.6% of websites live today uses Bootstrap. 19.6% may sound like very few but according to Mill for Business, there are 1,518,207,412 websites live as of January this year. Now does 19.6% still seem like a small amount?

I am focusing more on the effects of Bootstrap with site speed. Does the Bootstrap way of coding cause too much bloat? Now with regards to file size, it’s just as easy, if not easier, to link Bootstrap through a CDN link rather than the physical file in your site’s directory, but with every shortcut there is a subsequent negative and in this case, it’s latency. For a user accessing your site with high latency, it can cause scenarios of loading the site without it’s CSS library, creating every web developer’s worst nightmare. A website without styling! I’d rather use the physical library’s in that case, but how much file size and bloat does it really create? I decided to run this test for myself.

CSS vs Bootstrap: The ultimate showdown.

To get started, I was looking to create a simple static page with a header and a responsive 1 x 3 card set-up. For those quite versed in Bootstrap, you will know they have a pre-styled card class, so this couldn’t be any easier to do. Bootstrap uses flex and using a structured row and column HTML layout, you can set the responsiveness of the cards. Seems super easy right? That’s because it is when you pick it up with practice.

But what if there was a way to further reduce the amount of HTML code needed to set-up the flex layout. When developing massive projects, reducing the amount of code needed not only saves file size but saves the developer a considerable amount of time when coding. Luckily in CSS there’s an answer for this, Grid! Why use the row and column HTML structure that Bootstrap requires when you can do it all yourself with one line of code. With grid you can simply specify that your columns are responsive all in one line rather than messing with media queries.

.card {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
}

The code snippet above acts the same as Bootstrap’s col structure without having to specify breakoff points. It simply fills as much content it can into it’s rows length, before it starts a new line.

Using grid I have replicated the same page layout I created using Boostrap with half the code. This in turn drastically reduces the file size and the overall project size.

• Bootstrap Project Size
• CSS Project Size

From the images above you can see that the file size is roughly 23 times smaller without using Bootstrap. This is only creating a simple single page example, now imagine the project size differnce with a multi-page website!

Conclusion

As shown in my tests, Bootstrap coding structure along with the core files can cause in some cases up to 23 times the file size. From a web developer’s stand point this can cause lengthy site loading times. In this example I used CSS grid as an alternative but shortcuts rarely occur without their consequences and in this case it’s browser support. Yourself and many others probably use browsers such as Chrome, Firefox, etc.. but there is still a large user base that still browse the web with IE (Internet Explorer). Unfortunately this shortcut’s consequence is the lack of support for IE and with microsoft moving away from IE, there may not be support anytime soon.

Vậy bạn làm gì? Nếu bạn đang đọc điều này như một nhà phát triển web đầy tham vọng tìm kiếm chìa khóa để bẻ khóa bí ẩn đó là CSS, Bootstrap là một điểm khởi đầu tuyệt vời. Thật tuyệt khi giúp bạn tạo các trang web trông chuyên nghiệp một cách nhanh chóng và với kiến ​​thức CSS tối thiểu, nhưng don don đặt bootstrap trên bệ như tất cả và cuối cùng. Tôi đã cho thấy sự gia tăng kích thước tệp mà nó có thể gây ra và nếu tôi thành thật mà nói, một nửa nhà phát triển web mà không có kiến ​​thức cốt lõi về CSS. Sử dụng bootstrap để giúp tăng kiến ​​thức của bạn về các thuộc tính CSS.

  

    

      One column
    
  

Sự thay thế của chúng tôi; Chúng tôi cung cấp hỗ trợ cho tất cả các trình duyệt, điều này bao gồm IE11. Chúng tôi sử dụng lưới bootstrap trên tất cả các trang web của chúng tôi. Nó sử dụng hộp đựng bootstraps, kiểu hàng và col mà không cần thêm hành lý. Điều này cho phép chúng tôi tạo các trang web chuyên nghiệp, hỗ trợ tất cả các trình duyệt mà không có kích thước tệp. Bạn có thể có một triển vọng hoàn toàn khác về chủ đề này và tôi rất nhận thức được các khung CSS hiện đại hơn như hiện vật hóa, nhưng theo tôi có! Bootstrap vẫn có liên quan.

Có phải mọi trang web sử dụng bootstrap?

Các trang web chuyên nghiệp có sử dụng bootstrap không?

Bao nhiêu phần trăm của các trang web sử dụng bootstrap?

Bootstrap vẫn được sử dụng rộng rãi?