Một tệp CSS so với nhiều trang khác nhau

Question

Tôi có một trang web nơi tất cả các trang có cùng đầu trang và chân trang, nhưng khác nhau giữa nội dung. Tôi ước tính rằng 30% CSS là phổ biến cho tất cả các trang, với 70% thay đổi.

Lợi thế và bất lợi tương đối của việc sử dụng một tệp CSS so với nhiều tệp cho các trang khác nhau là gì?

Answer 1

Ưu điểm của một file CSS

• Chỉ có một yêu cầu HTTP là cần thiết để lấy nó, giúp cải thiện thời gian tải trang đầu tiên đối với hầu hết người sử dụng và sẽ tăng tốc độ tải trang tiếp theo, đặc biệt là nếu người dùng đang mong đợi để truy cập vào nhiều loại trang khác nhau trong khi truy cập. Điều này cũng có thể làm giảm tải máy chủ.

Ưu điểm của nhiều file CSS

• Giảm băng thông, đặc biệt là nếu bất kỳ người dùng nào đó là không có khả năng để xem nhiều loại trang khác nhau trên trang web của bạn trong chuyến thăm của họ (mà có thể là trường hợp nếu trang web của bạn được chia thành các trang con gần như hoàn toàn không liên quan). Lưu ý rằng nhiều tệp CSS sẽ làm tăng các yêu cầu HTTP, mặc dù tiết kiệm băng thông thực sự có thể làm giảm tốc độ tải trên các kết nối hiện đại.

Tôi thường có lợi cho việc có một tệp CSS duy nhất cho một trang web trong hầu hết các trường hợp.

Answer 2

Nhiều tệp CSS yêu cầu nhiều yêu cầu truy xuất tệp từ máy chủ của bạn - điều này có thể giới thiệu thêm độ trễ trước khi khách hàng có thể hiển thị các trang. Một tệp CSS đơn lẻ sẽ có ít thời gian chờ hơn và có thể cho phép trang web của bạn hiển thị nhanh hơn nhiều.

Lợi ích của một tệp CSS tăng lên khi tốc độ trễ của khách hàng tăng lên - vì vậy các modem có độ trễ cao và điện thoại di động có thể sẽ mang lại nhiều lợi ích hơn các máy tính kết nối băng thông rộng.

Answer 3

Tôi đồng ý với các câu trả lời khác mà một tệp nói chung tốt hơn và tôi sẽ thêm vào đó theo kinh nghiệm của tôi, sau khi rút gọn và gzip (bạn đang thực hiện cả hai, phải không?) hơn một số kilobyte. Các tệp CSS có thể dài về mặt vật lý về số dòng nguồn, nhưng khi bạn bẻ khóa chúng thì chúng khá nhỏ gọn (và không có nhiều văn bản mà bạn có thể nghĩ). Đây là một trong những điều tối ưu hóa CSS bằng cách chia nhỏ ra các trang có thể được thực hiện, nhưng có quá nhiều thứ lớn hơn mà bạn có thể dành thời gian của bạn để tối ưu hóa việc thực hiện nỗ lực ở đó rất khó.

Answer 4

Thêm vào câu trả lời được chấp nhận:

Ưu điểm của nhiều file CSS

Better tổ chức mã - dễ dàng hơn để di chuyển chúng và biết rằng thay đổi này không ảnh hưởng đến các trang khác so với cái bạn đang làm việc trên.