Khi tôi đang xây dựng các trang, tôi có muốn có các bảng định kiểu riêng cho từng trang hoặc một bảng định kiểu lớn cho toàn bộ trang web không? Đối với mục đích tải, bạn sẽ không muốn một bản định kiểu nhỏ hơn, để làm cho các bản định kiểu riêng lẻ là một thực hành tốt hơn?Một tệp CSS hoặc các tệp CSS riêng lẻ cho mỗi trang?
Sử dụng một tệp duy nhất, tệp CSS được lưu vào bộ nhớ cache và do đó giảm nhu cầu tải xuống tệp mới cho mỗi trang mới được truy cập.
Để trợ giúp, tôi thường tát CSS của mình thông qua một CSS cleaner để giảm kích thước tệp của nó, ngoài ra bạn cũng có thể GZip CSS using .htaccess làm cho nó nhỏ hơn một lần nữa.
Cuối cùng đặt tất cả CSS vào một tệp sẽ làm cho việc thay đổi hệ thống thành bản trình bày dễ dàng hơn trong tương lai (toàn bộ lý do chúng tôi sử dụng CSS ngay từ đầu), nó cũng sẽ giúp gỡ lỗi dễ dàng hơn.
Chỉnh sửa, tháng 5 năm 2017
Rất nhiều đã thay đổi trong 7+ năm, và bất cứ ai nhìn vào câu trả lời này nên xem xét nghiên cứu phương pháp phân phối tài sản mới hơn, đặc biệt là hiện nay sử dụng của HTTP2 và preprocessors là phổ biến hơn.
Mục đích chính của biểu định kiểu là cho phép bạn thay đổi thiết kế trên tất cả các trang của mình. Nếu bạn có h1 {color:red;} trên mỗi trang và sau đó muốn thay đổi thành màu xanh, bạn sẽ phải chỉnh sửa trang kiểu của từng trang. Với một bảng định kiểu, bạn có thể thay đổi màu sắc và được phản ánh trên toàn bộ trang web.
Cộng với biểu định kiểu sẽ được lưu vào bộ nhớ cache trên máy tính của người dùng thay vì được tải xuống từ mỗi trang.
Nếu bạn muốn có một kiểu nhất quán trên tất cả các trang trong trang web của mình, hãy sử dụng một biểu định kiểu cho tất cả các kiểu phổ biến. Nếu không, bạn có thể thấy khá khó khăn để duy trì nhiều bảng định kiểu. Các thay đổi sẽ phải được thêm vào mỗi một trong nhiều bảng định kiểu.
Biểu định kiểu chỉ được sử dụng trên một trang có thể đi vào các biểu định kiểu riêng biệt. Điều này có thể hữu ích nhất đối với các bảng định kiểu và/hoặc bảng định kiểu trang đơn lớn cho các trang web không thường xuyên truy cập.
Biểu định kiểu của bạn sẽ không được tải lại trên mỗi lần làm mới trang. Nếu bạn tham khảo biểu định kiểu rộng, mục đích chung trên trang chủ của mình, nó sẽ chỉ được tải xuống một lần và được lưu trong bộ nhớ cache để sử dụng trong tương lai.
Kể từ khi tôi thực sự là một lập trình viên web thực sự (Java thứ lập trình web, không kịch bản như PHP) tôi phải cung cấp cho bạn một ý kiến tôi chưa bao giờ thấy bất kỳ web thực sự thiết kế Hãy cho:
Hãy hãy tiếp tục và chia các tệp CSS của bạn thành nhiều phân vùng hợp lý bất cứ khi nào có thể! Nếu bạn có một bảng cực kỳ được cách điệu, hãy thu thập nội dung CSS của nó vào một tệp, cũng thu thập các kiểu cơ sở của trang thực tế cho một tệp khác, thêm các menu điều hướng CSS: s vào thứ ba và cứ tiếp tục như vậy. Tất nhiên bạn có thể tái sử dụng CSS cá nhân: ở những nơi chúng có liên quan nhưng KHÔNG chỉ nhồi nhét mọi thứ vào một tệp lớn!
Tôi có thể đồng ý với bạn, nhưng việc giảm yêu cầu http là có giá trị, vì vậy bạn vẫn muốn nối tất cả các tệp css đó trước khi bạn gửi chúng cho khách hàng – Jiaaro
Một đề xuất khác, sử dụng nhiều tờ định kiểu trong quá trình phát triển và có cơ chế sẽ hợp nhất tất cả các phiếu định kiểu thành một tệp CSS duy nhất để triển khai sản xuất. Điều này có thể yêu cầu một chút mã hóa thêm và một số tập lệnh bổ sung sẽ được chạy trước khi triển khai sản xuất nhưng sẽ lý tưởng cho cả việc sử dụng phát triển và sử dụng sản xuất. Nếu quá trình này được thực hiện một cách tự động (điều này không khó thực hiện), điều này cũng không gây ra bất kỳ sai sót nào.
"Vì mục đích tải, bạn sẽ không muốn một bản định kiểu nhỏ hơn, để tạo ra các bản định kiểu riêng lẻ là một thực hành tốt hơn?"
Điều này có thể có hiệu ứng ngược, khi sử dụng 1 tờ định kiểu, có thể lưu vào bộ đệm và sau đó tải lại dễ dàng, trong khi nó liên tục tải một tệp CSS mới cho từng trang bằng phương pháp của bạn.
Hầu hết các trang web không cần phải có nhiều biểu định kiểu cho một loại phương tiện. Tuy nhiên, nếu trang web của bạn thay đổi đáng kể trong thiết kế, tôi khuyên bạn nên có một biểu định kiểu cơ sở có tất cả các thuộc tính phổ biến và sau đó là biểu định kiểu phụ cho mỗi trang chứa sự khác biệt.
Điều này chỉ nên được sử dụng nếu các thay đổi CSS có kích thước đủ lớn để đảm bảo việc sử dụng các bảng định kiểu riêng biệt.
Tôi đã xem qua chủ đề này tìm kiếm cùng một câu hỏi .. Suy nghĩ của tôi là để cấu trúc như thế này ..
Layout.css < --- cho cấu trúc của trang web, liên kết, tiêu đề vv được phổ biến trên các trang web. form.css < - hình thức phong cách chung chung reset.css < - tất cả các tài liệu reset nếu bạn sử dụng chúng
và hiện nay tôi sử dụng pages.css cho tất cả các phong cách trang ..
hoặc
homepage.css about.css gallery.css
Để tránh phải sử dụng quá nhiều id và lớp duy nhất để đạt được biểu định kiểu chứa tất cả các kiểu cho trang web của bạn, bạn cũng nên thêm lớp vào phần thân của mỗi trang tôi ndicating trang nào đó là
sẽ cho phép bạn sử dụng cùng các lớp và id trên mỗi trang. ví dụ: sử dụng kỹ thuật trên, bạn có thể cung cấp cho khu vực nội dung trên trang một kiểu khác bằng cách sử dụng .productPage #contentArea, vì vậy bạn sẽ không phải đặt id mới #productPage_contentArea trong html của trang. – wheresrhysLàm thế nào về các tệp CSS lớn và sử dụng bộ nhớ trên thiết bị di động? Điểm của bạn vẫn đứng trong trường hợp thiết bị di động, bạn nghĩ sao? Liệu CSS lớn có làm chậm trải nghiệm người dùng trên thiết bị di động không? Bạn nghĩ gì về các tệp JavaScript, tốt hơn bạn nên có một tệp? –
Giảm yêu cầu HTTP là số một việc cần làm khi tìm cách cải thiện hiệu suất trên trang web. Một tệp CSS lớn sẽ không mất quá nhiều thời gian để trình duyệt di động phân tích cú pháp/hiển thị, phải tải xuống tệp lớn hơn, dĩ nhiên sẽ mất nhiều thời gian hơn, tuy nhiên, nói chung là quan trọng hơn để có một tệp lớn, nhiều tệp nhỏ hơn. Bởi vì các yêu cầu HTTP chậm đi. Tra cứu giải phẫu của yêu cầu HTTP, cộng với phân đoạn TCP. –