Bootstrap có tốt hơn HTML và CSS không?

** CẬP NHẬT Phần 2 của loạt bài này có tại đây. Trở thành Nhà phát triển web vào năm 2019/20 – Phần 2. Chọn khung CSS phù hợp **

Năm 2019, chúng ta thật may mắn khi có vô số ngôn ngữ lập trình và framework, chẳng hạn như React, Vue, Angular, v.v. Nghe có vẻ kỳ lạ, nhưng chưa bao giờ có thời gian thú vị hơn để trở thành Nhà phát triển web. Tại Wibble, chúng tôi tự hào về sự phát triển WordPress chuyên dụng của mình và với một nhóm tích lũy nhiều năm kinh nghiệm phát triển, tất cả đều có thể truy cập dễ dàng cho khách hàng của chúng tôi. Trong loạt bài gồm 3 phần này, tôi sẽ tìm hiểu về những điều cần làm và trở thành một Nhà phát triển web trong năm 2019/2020

Tôi dở CSS và Bootstrap là gì?

Nếu bạn giống tôi khi bắt đầu hành trình phát triển web của mình, bạn có thể đã nghĩ CSS là cái quái gì và làm cách nào để tôi tìm hiểu mọi tùy chọn có thể có trong thư viện của nó. Tôi đã tìm hiểu các nguyên tắc cơ bản của HTML khá nhanh chóng; . Thành thật mà nói, câu trả lời thường luôn là như vậy, cần có thời gian và thực hành nhiều để học. Tôi vẫn đang học những điều mới cho đến ngày nay với CSS

Từ một cuộc trò chuyện với một người bạn của tôi về phát triển web, từ Bootstrap đã được đưa ra. Bootstrap. Như trong anh chàng trong phim Cướp biển vùng Caribe?

Đây sẽ không phải là một cuộc độc thoại về Bootstrap là gì và các nguyên tắc cơ bản của nó, tôi e rằng mình đã đến bữa tiệc quá muộn một thập kỷ. Thay vào đó, tôi muốn nói về câu hỏi mà nhiều nhà phát triển đặt ra trong năm 2019, Bootstrap có còn phù hợp không? . Hàng trăm chủ đề WordPress sử dụng Bootstrap, tại sao chủ đề của chúng tôi lại khác? . 6% trang web hoạt động ngày nay sử dụng Bootstrap. 19. 6% nghe có vẻ rất ít nhưng theo Mill for Business, có 1.518.207.412 trang web hoạt động tính đến tháng 1 năm nay. Bây giờ là 19. 6% vẫn có vẻ là một số tiền nhỏ?

Tôi đang tập trung nhiều hơn vào tác dụng của Bootstrap với tốc độ trang web. Cách mã hóa Bootstrap có gây ra quá nhiều sự phình to không? . Đối với người dùng truy cập trang web của bạn với độ trễ cao, điều này có thể gây ra tình huống tải trang web mà không có thư viện CSS, tạo ra cơn ác mộng tồi tệ nhất cho mọi nhà phát triển web. Một trang web không có kiểu dáng. Tôi muốn sử dụng thư viện vật lý hơn trong trường hợp đó, nhưng nó thực sự tạo ra bao nhiêu kích thước và độ phình của tệp?

CSS so với Bootstrap. Cuộc thách đấu cuối cùng

Để bắt đầu, tôi đang tìm cách tạo một trang tĩnh đơn giản với tiêu đề và thiết lập thẻ 1 x 3 đáp ứng. Đối với những người khá thành thạo về Bootstrap, bạn sẽ biết họ có một lớp thẻ được tạo kiểu sẵn, vì vậy điều này không thể dễ dàng hơn để thực hiện. Bootstrap sử dụng flex và sử dụng bố cục HTML theo hàng và cột có cấu trúc, bạn có thể đặt mức độ phản hồi của thẻ. Có vẻ siêu dễ dàng phải không?

Nhưng nếu có một cách để giảm thêm lượng mã HTML cần thiết để thiết lập bố cục flex thì sao?. Khi phát triển các dự án lớn, việc giảm số lượng mã cần thiết không chỉ tiết kiệm kích thước tệp mà còn tiết kiệm cho nhà phát triển một lượng thời gian đáng kể khi viết mã. May mắn là trong CSS có câu trả lời cho điều này, Grid. Tại sao phải sử dụng cấu trúc HTML hàng và cột mà Bootstrap yêu cầu khi bạn có thể tự làm tất cả với một dòng mã. Với lưới, bạn có thể chỉ cần xác định rằng các cột của mình đáp ứng tất cả trong một dòng thay vì gây rối với các truy vấn phương tiện

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

Đoạn mã trên hoạt động giống như cấu trúc Bootstrap col mà không cần phải chỉ định các điểm ngắt. Nó chỉ đơn giản là điền càng nhiều nội dung có thể vào độ dài hàng của nó, trước khi nó bắt đầu một dòng mới

Sử dụng lưới, tôi đã sao chép cùng một bố cục trang mà tôi đã tạo bằng Bootstrap với một nửa mã. Điều này lần lượt làm giảm đáng kể kích thước tệp và kích thước dự án tổng thể

• 
  Kích thước dự án Bootstrap
• 
  Kích thước dự án CSS

Từ những hình ảnh trên, bạn có thể thấy rằng kích thước tệp nhỏ hơn khoảng 23 lần khi không sử dụng Bootstrap. Đây chỉ là ví dụ tạo một trang đơn giản, bây giờ hãy tưởng tượng sự khác biệt về quy mô dự án với một trang web nhiều trang

Phần kết luận

Như thể hiện trong các thử nghiệm của tôi, cấu trúc mã hóa Bootstrap cùng với các tệp cốt lõi có thể gây ra trong một số trường hợp kích thước tệp lớn gấp 23 lần. Từ quan điểm của nhà phát triển web, điều này có thể gây ra thời gian tải trang lâu. Trong ví dụ này, tôi đã sử dụng lưới CSS làm giải pháp thay thế nhưng các phím tắt hiếm khi xảy ra mà không có hậu quả của chúng và trong trường hợp này, đó là sự hỗ trợ của trình duyệt. Bản thân bạn và nhiều người khác có thể sử dụng các trình duyệt như Chrome, Firefox, v.v. nhưng vẫn có một lượng lớn người dùng vẫn duyệt web bằng IE (Internet Explorer). Thật không may, hậu quả của phím tắt này là thiếu hỗ trợ cho IE và với việc microsoft rời bỏ IE, có thể sẽ không có hỗ trợ sớm

Vậy bạn làm gì? . Thật tuyệt khi giúp bạn tạo các trang web có giao diện chuyên nghiệp một cách nhanh chóng và chỉ cần kiến ​​thức CSS tối thiểu, nhưng đừng đặt Bootstrap lên hàng đầu như tất cả và cuối cùng. Tôi đã chỉ ra 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 thì bạn chỉ là một nhà phát triển web nửa vời không có kiến ​​thức cốt lõi về CSS. Sử dụng Bootstrap để giúp nâng cao kiến ​​thức của bạn về các thuộc tính CSS

<div class="container">
  <div class="row">
    <div class="col-sm">
      One column
    </div>
  </div>
</div>

thay thế của chúng tôi; . Chúng tôi sử dụng Bootstrap Grid trên tất cả các trang web của mình. Nó sử dụng vùng chứa Bootstraps, kiểu dáng hàng và cột 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 làm tăng kích thước tệp. Bạn có thể có cách nhìn hoàn toàn khác về chủ đề này và tôi biết rất rõ về các khung CSS hiện đại hơn như Materialize, nhưng theo ý kiến ​​của tôi là CÓ. Bootstrap vẫn có liên quan

HTML CSS hay Bootstrap nào tốt hơn?

Tôi có nên học Bootstrap trước HTML và CSS không?

Tại sao Bootstrap không được khuyến nghị?