Tệp .css lớn so với nhiều tệp .css cụ thể nhỏ hơn? [đóng cửa]

Có bất kỳ lợi thế nào khi có một tệp .css quái vật chứa các thành phần kiểu sẽ được sử dụng trên hầu hết các trang không?

Tôi nghĩ rằng để dễ quản lý, tôi muốn rút các loại CSS khác nhau vào một vài tệp và bao gồm mọi tệp trong chính của tôi <link />có tệ không?

Tôi nghĩ rằng điều này là tốt hơn

1. vị trí.css
2. nút.css
3. bảng.css
4. copy.css

so với

1. trang web.css

Bạn đã thấy bất kỳ vấn đề nào khi thực hiện theo cách này so với cách khác chưa?

Một trình biên dịch CSS như Sass hoặc LESS là một cách tuyệt vời để đi. Bằng cách đó, bạn sẽ có thể phân phối một tệp CSS được thu nhỏ, duy nhất cho trang web (sẽ nhỏ hơn và nhanh hơn một tệp nguồn CSS đơn thông thường), trong khi vẫn duy trì môi trường phát triển đẹp nhất, với mọi thứ được phân chia gọn gàng thành các thành phần.

Sass và LESS có thêm lợi thế của các biến, lồng nhau và các cách khác để làm cho CSS dễ viết và duy trì hơn. Rất cao, rất khuyến khích. Cá nhân tôi hiện đang sử dụng Sass (cú pháp SCSS), nhưng đã sử dụng LESS trước đó. Cả hai đều tuyệt vời, với những lợi ích tương tự. Khi bạn đã viết CSS bằng trình biên dịch, không chắc bạn muốn làm gì nếu không có.

http://lesscss.org

http://sass-lang.com

Nếu bạn không muốn làm phiền với Ruby, trình biên dịch LESS cho Mac này thật tuyệt:

http://incident57.com/less/

Hoặc bạn có thể sử dụng CodeKit (bởi cùng một người):

http://incident57.com/codekit/

WinLess là một GUI Windows để kết nối LESS

http://winless.org/

Đây là một câu hỏi khó trả lời. Cả hai lựa chọn đều có ưu và nhược điểm theo ý kiến ​​của tôi.

Cá nhân tôi không thích đọc qua một tệp CSS HUGE và việc duy trì nó là rất khó. Mặt khác, việc tách nó ra gây ra các yêu cầu http bổ sung có khả năng làm mọi thứ chậm lại.

Ý kiến ​​của tôi sẽ là một trong hai điều.

1) Nếu bạn biết rằng CSS của bạn sẽ KHÔNG BAO GIỜ thay đổi khi bạn đã xây dựng nó, tôi sẽ xây dựng nhiều tệp CSS trong giai đoạn phát triển (để dễ đọc), sau đó kết hợp chúng theo cách thủ công trước khi đi vào hoạt động (để giảm yêu cầu http)

2) Nếu bạn biết rằng thỉnh thoảng bạn sẽ thay đổi CSS của mình và cần phải đọc nó, tôi sẽ xây dựng các tệp riêng biệt và sử dụng mã (cung cấp cho bạn sử dụng một số loại ngôn ngữ lập trình) để kết hợp chúng tại thời gian xây dựng thời gian chạy (thu nhỏ / kết hợp thời gian chạy là một con lợn tài nguyên).

Với một trong hai tùy chọn, tôi rất muốn giới thiệu bộ nhớ đệm ở phía máy khách để giảm thêm các yêu cầu http.

EDIT:
Tôi tìm thấy blog này cho thấy cách kết hợp CSS trong thời gian chạy bằng cách sử dụng không có gì ngoài mã. Đáng xem (mặc dù tôi chưa tự mình kiểm tra).

EDIT 2:
Tôi đã quyết định sử dụng các tệp riêng biệt trong thời gian thiết kế của mình và quá trình xây dựng để thu nhỏ và kết hợp. Bằng cách này, tôi có thể có css riêng (có thể quản lý) trong khi tôi phát triển và một tệp rút gọn nguyên khối thích hợp khi chạy. Và tôi vẫn có các tệp tĩnh và ít chi phí hệ thống hơn vì tôi không thực hiện nén / thu nhỏ khi chạy.

lưu ý: đối với những người mua hàng ngoài đó, tôi khuyên bạn nên sử dụng gói như một phần của quy trình xây dựng của bạn. Cho dù bạn đang xây dựng từ bên trong IDE của mình hoặc từ tập lệnh xây dựng, trình đóng gói có thể được thực thi trên Windows thông qua bao gồm exehoặc có thể chạy trên bất kỳ máy nào đang chạy node.js.

Tôi thích nhiều tệp CSS trong quá trình phát triển. Quản lý và gỡ lỗi dễ dàng hơn nhiều theo cách đó. Tuy nhiên, tôi khuyên bạn nên triển khai thời gian triển khai thay vì sử dụng công cụ rút gọn CSS như YUI Compressor , nó sẽ hợp nhất các tệp CSS của bạn thành một tệp nguyên khối.

Bạn muốn cả hai thế giới.

Bạn muốn nhiều tệp CSS vì sự tỉnh táo của bạn là một điều khủng khiếp để lãng phí.

Đồng thời, tốt hơn là có một tệp lớn, duy nhất.

Giải pháp là có một số cơ chế kết hợp nhiều tệp vào một tệp.

Một ví dụ là một cái gì đó như

<link rel="stylesheet" type="text/css" href="allcss.php?files=positions.css,buttons.css,copy.css" />

Sau đó, tập lệnh allcss.php xử lý nối các tệp và phân phối chúng.

Lý tưởng nhất là tập lệnh sẽ kiểm tra ngày mod trên tất cả các tệp, tạo ra một hỗn hợp mới nếu bất kỳ trong số chúng thay đổi, sau đó trả về hỗn hợp đó và sau đó kiểm tra các tiêu đề HTTP If-Modified để không gửi CSS dự phòng.

Điều này cung cấp cho bạn tốt nhất của cả hai thế giới. Hoạt động tuyệt vời cho JS là tốt.

Chỉ có một tệp CSS sẽ tốt hơn cho thời gian tải trang của bạn, vì điều đó có nghĩa là ít yêu cầu HTTP hơn.

Có một vài tệp CSS nhỏ có nghĩa là phát triển dễ dàng hơn (ít nhất, tôi nghĩ vậy: có một tệp CSS cho mỗi mô-đun ứng dụng của bạn giúp mọi việc dễ dàng hơn) .

Vì vậy, có những lý do chính đáng trong cả hai trường hợp ...

Một giải pháp cho phép bạn đạt được kết quả tốt nhất của cả hai ý tưởng là:

• Để phát triển bằng nhiều tệp CSS nhỏ
  • tức là dễ phát triển hơn
• Để có quy trình xây dựng cho ứng dụng của bạn, hãy "kết hợp" các tệp đó thành một
  • Quá trình xây dựng đó cũng có thể thu nhỏ tệp lớn đó, btw
  • Điều đó rõ ràng có nghĩa là ứng dụng của bạn phải có một số nội dung cấu hình cho phép ứng dụng chuyển từ "chế độ nhiều tệp" sang "chế độ đơn tệp".
• Và để sử dụng, trong sản xuất, chỉ có các tập tin lớn
  • tức là tải trang nhanh hơn

Ngoài ra còn có một số phần mềm thực hiện việc kết hợp các tệp CSS vào thời gian chạy chứ không phải lúc xây dựng; nhưng thực hiện nó trong thời gian chạy có nghĩa là ăn nhiều CPU hơn một chút (và obvisouly yêu cầu một số cơ chế lưu trữ bộ đệm, để không tạo lại tệp lớn quá thường xuyên)

Trong lịch sử, một trong những lợi thế chính của x khi có một tệp CSS là lợi ích tốc độ khi sử dụng HTTP1.1.

Tuy nhiên, kể từ tháng 3 năm 2018, hơn 80% trình duyệt hiện hỗ trợ HTTP2 , cho phép trình duyệt tải xuống nhiều tài nguyên cùng lúc cũng như có thể đẩy tài nguyên trước. Có một tệp CSS cho tất cả các trang có nghĩa là kích thước tệp lớn hơn cần thiết. Với thiết kế phù hợp, tôi không thấy bất kỳ lợi thế nào khi làm điều này ngoài việc dễ viết mã hơn.

Thiết kế lý tưởng cho HTTP2 cho hiệu năng tốt nhất sẽ là:

• Có một tệp CSS lõi chứa các kiểu phổ biến được sử dụng trên tất cả các trang.
• Có CSS ​​cụ thể của trang trong một tệp riêng
• Sử dụng CSS2 đẩy CSS để giảm thiểu thời gian chờ đợi (có thể sử dụng cookie để ngăn các lần đẩy lặp lại)
• Tùy ý tách phía trên CSS gấp và đẩy nó trước và tải CSS còn lại sau (hữu ích cho các thiết bị di động băng thông thấp)
• Bạn cũng có thể tải CSS còn lại cho trang web hoặc các trang cụ thể sau khi trang được tải nếu bạn muốn tăng tốc độ tải trang trong tương lai.

Biểu định kiểu nguyên khối cung cấp rất nhiều lợi ích (được mô tả trong các câu trả lời khác), tuy nhiên tùy thuộc vào kích thước tổng thể của tài liệu biểu định kiểu mà bạn có thể gặp phải sự cố trong IE. IE có một giới hạn với số lượng bộ chọn sẽ đọc từ một tệp . Giới hạn là 4096 bộ chọn. Nếu biểu định kiểu nguyên khối của bạn sẽ có nhiều hơn biểu định kiểu này, bạn sẽ muốn tách nó. Giới hạn này chỉ cho thấy cái đầu xấu xí trong IE.

Điều này là dành cho tất cả các phiên bản IE.

Xem trang Ross Rossiges Blog và MSDN AddRule .

Có một điểm bùng phát mà tại đó có nhiều hơn một tệp css.

Một trang web có 1M + trang, mà người dùng trung bình dường như chỉ thấy 5 trang, có thể có một bản định kiểu có tỷ lệ lớn, do đó, cố gắng tiết kiệm chi phí cho một yêu cầu bổ sung cho mỗi lần tải trang bằng cách tải xuống ban đầu là sai nên kinh tê.

Kéo dài đối số đến giới hạn cực hạn - nó giống như gợi ý rằng nên có một biểu định kiểu lớn được duy trì cho toàn bộ web. Rõ ràng vô nghĩa.

Điểm bùng phát sẽ khác nhau đối với từng trang mặc dù vậy không có quy tắc cứng và nhanh. Nó sẽ phụ thuộc vào số lượng css duy nhất trên mỗi trang, số lượng trang và số lượng trang mà người dùng trung bình có thể thường xuyên gặp phải khi sử dụng trang web.

Tôi thường có một số tệp CSS:

• một tệp css "toàn cầu" để đặt lại và các kiểu toàn cục
• Các tệp css cụ thể "mô-đun" cho các trang được nhóm hợp lý (có thể mỗi trang trong trình hướng dẫn thanh toán hoặc một cái gì đó)
• "trang" tệp css cụ thể để ghi đè trên trang (hoặc, đặt tệp này trong một khối trên trang riêng lẻ)

Tôi không thực sự quá quan tâm đến nhiều yêu cầu trang cho các tệp CSS. Hầu hết mọi người đều có băng thông tốt và tôi chắc chắn rằng có những tối ưu hóa khác sẽ có tác động lớn hơn nhiều so với việc kết hợp tất cả các kiểu vào một tệp CSS đơn sắc. Sự đánh đổi là giữa tốc độ và khả năng bảo trì, và tôi luôn nghiêng về khả năng bảo trì. Mặc dù vậy, trình biên dịch YUI nghe khá hay, tôi có thể phải kiểm tra xem.

Tôi thích nhiều tệp CSS. Bằng cách đó, việc trao đổi "giao diện" trong và ngoài sẽ dễ dàng hơn như bạn mong muốn. Vấn đề với một tập tin nguyên khối là nó có thể vượt khỏi tầm kiểm soát và khó quản lý. Điều gì nếu bạn muốn nền màu xanh nhưng không muốn các nút thay đổi? Chỉ cần thay đổi tập tin nền của bạn. Vân vân.

Có thể xem qua la bàn , đó là một khung tác giả CSS mã nguồn mở. Nó dựa trên Sass để nó hỗ trợ những thứ hay ho như biến, lồng, mixin và nhập khẩu. Đặc biệt nhập là hữu ích nếu bạn muốn giữ riêng các tệp CSS nhỏ hơn nhưng tự động kết hợp chúng thành 1 (tránh nhiều cuộc gọi HTTP chậm). La bàn thêm vào đây một tập hợp lớn các mixin được xác định trước, dễ dàng xử lý các công cụ trên trình duyệt chéo. Nó được viết bằng Ruby nhưng nó có thể dễ dàng được sử dụng với bất kỳ hệ thống nào ....

đây là cách tốt nhất

1. tạo một tệp css chung với tất cả các mã được chia sẻ
2. chèn tất cả mã css trang cụ thể vào cùng một trang, trên thẻ hoặc sử dụng thuộc tính style = "" cho mỗi trang

theo cách này, bạn chỉ có một css với tất cả mã được chia sẻ và trang html. bằng cách này (và tôi biết rằng đây không phải là chủ đề phù hợp) bạn cũng có thể mã hóa hình ảnh của mình trong base64 (nhưng bạn cũng có thể làm điều đó với các tệp js và css của mình). bằng cách này, bạn giảm được nhiều yêu cầu http hơn xuống còn 1.

SASS và LESS làm cho tất cả điều này thực sự là một điểm moot. Nhà phát triển có thể thiết lập các tệp thành phần hiệu quả và biên dịch kết hợp tất cả chúng. Trong SASS, bạn có thể tắt Chế độ nén trong khi đang phát triển để dễ đọc hơn và bật lại để sản xuất.

http://sass-lang.com http://lesscss.org

Cuối cùng, một tệp CSS được rút gọn là những gì bạn muốn bất kể kỹ thuật bạn sử dụng. Ít CSS hơn, ít yêu cầu HTTP hơn, ít nhu cầu hơn trên máy chủ.

Ưu điểm của một tệp CSS là hiệu quả truyền tải. Mỗi yêu cầu HTTP có nghĩa là phản hồi tiêu đề HTTP cho mỗi tệp được yêu cầu và cần băng thông.

Tôi phục vụ CSS của mình dưới dạng tệp PHP với loại mime "text / css" trong tiêu đề HTTP. Bằng cách này, tôi có thể có nhiều tệp CSS ở phía máy chủ và sử dụng PHP bao gồm để đẩy chúng vào một tệp khi người dùng yêu cầu. Mọi trình duyệt hiện đại đều nhận được tệp .php bằng mã CSS và xử lý tệp đó dưới dạng tệp .css.

Bạn chỉ có thể sử dụng một tệp css để thực hiện và sau đó nhận xét các phần như thế này:

/******** Header ************/
//some css here

/******* End Header *********/


/******** Footer ************/
//some css here

/******* End Footer *********/

Vân vân

Tôi đang sử dụng Jammit để xử lý các tệp css của mình và sử dụng nhiều tệp khác nhau để dễ đọc. Jammit làm tất cả công việc bẩn thỉu của việc kết hợp và nén các tệp trước khi triển khai trong sản xuất. Bằng cách này, tôi đã có nhiều tệp đang phát triển nhưng chỉ có một tệp trong sản xuất.

Biểu định kiểu được đóng gói có thể tiết kiệm hiệu suất tải trang nhưng càng nhiều kiểu thì trình duyệt hiển thị hình động trên trang bạn đang truy cập càng chậm. Điều này được gây ra bởi số lượng lớn các kiểu không sử dụng có thể không có trên trang bạn đang truy cập nhưng trình duyệt vẫn phải tính toán.

Xem: https://benfrain.com/css-performance-revisited-selector-bloat-Exensive-ststyle/

Ưu điểm của bảng định kiểu kèm theo: - hiệu suất tải trang

Nhược điểm của bảng định kiểu kèm theo: - hành vi chậm hơn, có thể gây ra hiện tượng giật cục trong quá trình cuộn, tương tác, hoạt hình,

Kết luận: Để giải quyết cả hai vấn đề, để sản xuất giải pháp lý tưởng là bó tất cả css vào một tệp để lưu các yêu cầu http, nhưng sử dụng javascript để trích xuất từ ​​tệp đó, css cho trang bạn đang truy cập và cập nhật phần đầu với nó .

Để biết các thành phần được chia sẻ nào là cần thiết trên mỗi trang và để giảm độ phức tạp, thật tuyệt khi khai báo tất cả các thành phần mà trang cụ thể này sử dụng - ví dụ:

<style href="global.css" rel="stylesheet"/>
<body data-shared-css-components="x,y,z">

Tôi đã tạo ra một cách tiếp cận có hệ thống để phát triển CSS. Bằng cách này tôi có thể sử dụng một tiêu chuẩn không bao giờ thay đổi. Đầu tiên tôi bắt đầu với hệ thống lưới 960. Sau đó, tôi đã tạo các dòng css duy nhất cho bố cục cơ bản, lề, phần đệm, phông chữ và kích thước. Sau đó tôi xâu chuỗi chúng lại với nhau khi cần thiết. Điều này cho phép tôi giữ một bố cục nhất quán trong tất cả các dự án của mình và sử dụng các tệp css giống nhau nhiều lần. Bởi vì chúng không cụ thể. Dưới đây là một ví dụ: ---- div class = "c12 bg0 m10 p5 trắng fl" / div --- Điều này có nghĩa là thùng chứa có 12 cột, sử dụng bg0 có lề 10px của 5 văn bản có màu trắng và nó nổi trái. Tôi có thể dễ dàng thay đổi điều này bằng cách xóa hoặc thêm một kiểu mới - Cái mà tôi gọi là kiểu "nhẹ" - Thay vì tạo một lớp duy nhất với tất cả các thuộc tính này; Tôi chỉ đơn giản là kết hợp các kiểu đơn khi tôi viết mã trang. Điều này cho phép tôi tạo bất kỳ sự kết hợp nào của các kiểu và không giới hạn khả năng sáng tạo của tôi hoặc khiến tôi tạo ra một số lượng lớn các kiểu tương tự nhau. Biểu định kiểu của bạn trở nên dễ quản lý hơn, được thu nhỏ và cho phép bạn sử dụng lại nhiều lần. Phương pháp này tôi đã tìm thấy là tuyệt vời cho thiết kế nhanh chóng. Tôi cũng không còn thiết kế đầu tiên trong PSD nhưng trong trình duyệt cũng tiết kiệm thời gian. Ngoài ra, vì tôi cũng đã tạo một hệ thống đặt tên cho các thuộc tính thiết kế trang và nền của mình, tôi chỉ cần thay đổi tệp hình ảnh của mình khi tạo dự án mới. (Bg0 = nền cơ thể theo hệ thống đặt tên của tôi) Điều đó có nghĩa là nếu trước đây tôi có màu trắng nền với một dự án chỉ đơn giản là thay đổi nó thành màu đen đơn giản có nghĩa là trên dự án tiếp theo bg0 sẽ là nền đen hoặc hình ảnh khác .....