Tại sao chúng ta không sử dụng CSS động (phía máy chủ tạo)?

Vì HTML được tạo ở phía máy chủ là không đáng kể (và đó là cách duy nhất để tạo các trang web động trước AJAX), CSS được tạo ở phía máy chủ thì không. Trên thực tế, tôi chưa bao giờ nhìn thấy nó. Có các trình biên dịch CSS, nhưng chúng tạo các tệp CSS có thể được sử dụng dưới dạng tĩnh.

Về mặt kỹ thuật, nó không yêu cầu các thư viện đặc biệt, thẻ kiểu HTML phải tham chiếu đến tập lệnh templater PHP (/ ASP / sao cũng được) thay vì tệp CSS tĩnh và tập lệnh sẽ gửi tiêu đề kiểu nội dung CSS - đó là tất cả.

Nó có vấn đề về bộ nhớ cache? Tôi không nghĩ vậy. Kịch bản sẽ gửi các tiêu đề không có bộ đệm, vv. Có vấn đề cho các nhà thiết kế? Không, họ nên chỉnh sửa mẫu CSS (vì họ chỉnh sửa mẫu HTML).

Tại sao chúng tôi không sử dụng trình tạo CSS động? Hoặc nếu có, xin vui lòng cho tôi biết.

Lý do lớn tại sao css hiếm khi được tạo động (điều này cũng đúng với javascript) là vì chúng là ứng cử viên tốt cho bộ nhớ đệm. CSS là một cách rất linh hoạt để tạo kiểu cho các trang của bạn, với sự kết hợp đúng của các lớp, bạn có thể có được tất cả các phần khác nhau của tất cả các trang khác nhau được tạo kiểu theo tất cả các loại tín hiệu mà không cần phải điều chỉnh bất kỳ phần nào trong CSS chính nó trên những gì thực sự xảy ra để có mặt trên số lần xem trang này.

Đơn giản là vì CSS không cần phải khác nhau trên mỗi trang dẫn đến một thực tiễn rất phổ biến là tối ưu hóa chi phí tải xuống. Hầu hết các trang web nhồi nhét tất cả các css cho toàn bộ trang web của họ vào một lần tải xuống, để các phần áp dụng cho các lượt xem trang khác nhau chỉ xuất hiện trong một tệp được tải xuống. Với bộ nhớ đệm, khách hàng của bạn không phải đợi nó tải xuống lần thứ hai. Có lẽ quan trọng hơn, bạn, với tư cách là nhà cung cấp nội dung, không phải trả chi phí tải lên nội dung nhiều lần; và thậm chí bạn có thể đặt css tĩnh trên một máy chủ phù hợp hơn với việc phục vụ nội dung tĩnh, giúp giải phóng tài nguyên cho nội dung động thực tế trên các máy chủ ứng dụng của bạn.

Cách làm này rất phổ biến, đến mức nhiều trình duyệt chỉ cho rằng css là tĩnh; và rất miễn cưỡng tải xuống CSS mà họ đã có; ngay cả khi người dùng tải lại trang. Điều trị đặc biệt này chỉ áp dụng cho CSS; các loại nội dung khác được tải lại như mong đợi.

Tôi tin rằng giả định của bạn là sai: trong dự án cuối cùng của tôi, ứng dụng đã sử dụng CSS do máy chủ tạo bởi ajax (bởi vì, tùy thuộc vào vị trí của bản đồ bạn đang xem, trang được gắn nhãn với các kiểu hoàn toàn khác nhau).

Tuy nhiên, các trường hợp sử dụng khi lấy thêm CSS bằng ajax sẽ giải quyết vấn đề khá hiếm, đây có thể là lý do bạn không bao giờ gặp phải điều này: thường dễ dàng hơn để duy trì một bộ bảng định kiểu được xử lý trước tại thời điểm triển khai (LESS + minifying) và có thể lưu vào bộ nhớ cache ( ví dụ: trang tiếp theo sẽ có thể sử dụng lại biểu định kiểu mà nó đã lưu trong bộ nhớ cache trước đó, vì vậy thời gian ban đầu ngắn hơn).

Trên thực tế, có những trường hợp sử dụng cho CSS động. Tôi đã làm việc với ba loại khác nhau:

1. Ít hơn - Ít CSS hơn về cơ bản là một phần mở rộng ngôn ngữ CSS có thêm "hành vi động như biến, mixin, hoạt động và chức năng". Nó cũng cho phép "quy tắc lồng nhau", rất thuận tiện. Tôi đã sử dụng Ít chủ yếu để làm cho CSS viết ít dài dòng hơn bằng cách loại bỏ một số sự lặp lại.

2. Viết lại URL - Giống như một bằng chứng cho tuyên bố của bạn rằng không có vấn đề về bộ đệm, tôi đã sử dụng PHP để phục vụ các tập lệnh dưới dạng tệp CSS với các tiêu đề bộ đệm chính xác trong một thời gian dài. Tôi chủ yếu làm điều đó để phục vụ các tệp CSS từ các thư viện không nằm trong web root.

3. Báo cáo động - Trên một dự án tôi đã làm việc, chúng tôi đã có một người xây dựng báo cáo cho tất cả các loại dữ liệu trong hệ thống. Chúng tôi xuất ra ( stylecác thẻ bên trong , như bạn đề cập) quy tắc kiểu động chủ yếu cho các màu đã được người dùng chọn trong trình tạo báo cáo.

^{Lưu ý: Khi xuất CSS trực tiếp tới một URL (như trong 1 hoặc 2 ) và không nhúng nó vào một trang đã được tạo bởi một tập lệnh, bạn sẽ thêm một tải trọng đáng kể cho máy chủ qua việc cung cấp nội dung tĩnh. Vì vậy, nếu bạn có lưu lượng truy cập khá lớn, mặc dù bạn có thể làm điều đó một cách linh hoạt mọi lúc, bạn sẽ muốn lưu trữ nó dưới dạng tệp tĩnh nếu trường hợp sử dụng của bạn cho phép.}

Nhưng tại sao nó không phổ biến hơn? Tôi nghĩ có một lý do chính - CSS không thực sự được xây dựng để xuất nội dung. Vì vậy, đơn giản là không có nhu cầu lớn. Ngoài việc xuất ra các màu động do người dùng chọn, như chúng tôi đã làm, hoặc có thể là hình nền (mặc dù nếu hình ảnh là nội dung , thì có lẽ đó là một đối số tốt để sử dụng imgthẻ), bạn còn cần phải làm gì nữa?

Hầu hết các thay đổi kiểu động có thể được tạo bằng cách tham khảo các tài liệu CSS tĩnh khác nhau .

Vì vậy, chắc chắn là có thể, như bạn nghĩ, nhưng không có quá nhiều lý do để làm điều đó.

Có HAI khía cạnh riêng biệt để tải CSS động ...

1. Tạo tệp CSS động trên máy chủ

   Điều này khá đơn giản và rất nhiều trang web làm điều đó. Điều này rất hữu ích nếu bạn thay đổi CSS dựa trên một số điều kiện. Ví dụ: nếu bạn chọn chủ đề trang web của mình dựa trên vị trí Geo của người dùng.

2. Tải tệp CSS theo yêu cầu thông qua trình tải tập lệnh JS

   Điều này có thể có ích nếu bạn tạo một phần lớn DOM một cách linh hoạt và sau đó tải các kiểu được yêu cầu. NHƯNG Như tác giả của LABjs nói ...

   thực sự xác định xem một tệp CSS được tải động đã tải xong hay chưa thực sự khá phức tạp và khó thực hiện trình duyệt chéo. Các sự kiện "tải" không kích hoạt như người ta hy vọng / mong đợi. vì vậy, việc thêm hỗ trợ như vậy sẽ thêm kích thước không tầm thường vào LABjs

1. Chúng tôi làm điều này. Tất cả thời gian. Đặc biệt là đối với những thứ như thương hiệu dành riêng cho khách hàng trong ứng dụng SaaS, nơi màu sắc v.v ... đến từ cơ sở dữ liệu.
2. Nó nhanh hơn rất nhiều (từ quan điểm của người dùng) để tạo trước CSS trước hoặc trong khi triển khai hoặc trong khi khởi động ứng dụng nếu ứng dụng có giai đoạn khởi động. Chúng tôi thường thích tạo trước các tệp CSS tĩnh bất cứ khi nào có thể.
3. Để có tốc độ tối đa (theo quan điểm của người dùng), tốt nhất là cung cấp các tệp CSS tĩnh cho CDN và để trình duyệt lấy chúng từ CDN, thay vì từ các máy chủ ứng dụng của bạn. Điều này thường chỉ có thể khi các tệp CSS có thể được tạo trước trước hoặc trong khi triển khai và khi một phần của việc triển khai đang phân phối các tệp CSS tĩnh được tạo trước cho CDN. CDN hiện rất rẻ và dễ sử dụng - hãy xem CloudFront và Cloudspace của Amazon.

Nó có vấn đề về bộ nhớ cache? Tôi không nghĩ vậy. Các tập lệnh sẽ gửi không có bộ nhớ cache vv

Tất cả đều rất tốt, nhưng đó là một phần đáng kể của thông tin tĩnh nói chung mà bạn đang yêu cầu người dùng tải xuống mỗi khi họ tải trang. Vì vậy, tốt hơn bạn nên có một lý do tốt cho nó.

Bây giờ lý do đó có thể là gì?

Nếu bạn muốn thay đổi một kiểu dựa trên các tham số khác nhau thì bạn thực hiện điều đó bằng cách có nhiều biểu định kiểu và tạo HTML để tải xuống đúng kiểu.

CSS động khá đơn giản và mặc dù các ứng dụng của nó bị hạn chế hơn (xem cách HTML được tạo động với biểu định kiểu tĩnh giải quyết hầu hết các nhu cầu hàng ngày và CSS tự kết hợp một vài cơ chế để đạt được bán động), tôi ' Tôi đã thấy nó được sử dụng nhiều lần và tôi sử dụng chúng bất cứ khi nào tôi cần.

Thông thường, phần 'động' thực hiện ít hơn là kết hợp nhiều biểu định kiểu thành một (để giảm số lượng yêu cầu HTTP) và giảm thiểu chúng (để giảm mức sử dụng băng thông), nhưng những việc đơn giản như thay thế biến (ví dụ: sử dụng biến cho màu được sử dụng trong suốt bảng phong cách) có thể làm cho cuộc sống của bạn dễ dàng hơn nhiều. Tuy nhiên, do CSS có một cú pháp khá đơn giản với một vài cảnh báo, nên một hệ thống xử lý văn bản có mục đích chung hoặc ngôn ngữ kịch bản như PHP thường là đủ cho điều này, đó là lý do tại sao bạn không thấy nhiều hệ thống xử lý CSS ngoài lề.

Có thể bạn đã nhìn thấy chúng trong tự nhiên, mà không nhận ra chúng. Các máy chủ gửi tập lệnh động thường sử dụng viết lại URL để URL không thể phân biệt được với nội dung được cung cấp tĩnh. Điều này là cần thiết bởi vì một số trình duyệt (đáng chú ý nhất là IE) dựa vào các tiện ích mở rộng để phát hiện loại MIME chính xác trong các trường hợp nhất định, bỏ qua (hoặc loại bỏ) bất kỳ tiêu đề Loại nội dung nào bạn có thể đã gửi.

Về bộ nhớ đệm: Các bảng định kiểu được kéo vào với các yêu cầu GET và làm cho chúng được lưu trong bộ nhớ cache là cực kỳ quan trọng đối với trải nghiệm người dùng tốt. Bạn không muốn xem phần chỉnh lại trang khi nó tải lại biểu định kiểu trên mỗi yêu cầu. Thay vào đó, bạn nên đặt tất cả các tham số thay đổi đầu ra của xử lý biểu định kiểu của bạn vào chuỗi truy vấn; một chuỗi truy vấn khác nhau mang lại một URL khác, từ đó gây ra lỗi bộ nhớ cache, do đó, bất cứ khi nào các tham số bị thay đổi, biểu định kiểu sẽ được tải xuống lại, ngay cả khi máy khách lưu trữ mọi thứ. Nếu bạn thực sự cần CSS có khả năng khác nhau cho từng yêu cầu và phụ thuộc vào tác dụng phụ, hãy xem xét đưa phần không động vào biểu định kiểu được phục vụ tĩnh và chỉ phục vụ những thứ đó hoàn toàn bắt buộc phải động.

Có một số tình huống tôi muốn sử dụng CSS động, nhưng thường xuyên hơn là tôi không bị mắc kẹt với việc sử dụng các nhà thiết kế, những người cần một chút trợ giúp để hiểu những điều cơ bản về CSS. Ném một ngôn ngữ động trong hỗn hợp thực sự có thể làm cho đầu nổ tung.

Một cách khác để xem xét điều này sẽ là "một số người khác đang làm tất cả các công việc thủ công đau đớn, không thực sự là vấn đề của tôi, tiếp tục."