Khai báo CSS trong JavaScript

Tự hỏi điều gì thậm chí còn khó khăn hơn việc chọn một khung JavaScript? . chọn giải pháp CSS-in-JS. Tại sao?

Chúng tôi đã thử nghiệm 10 thư viện khác nhau, được liệt kê ở đây không theo thứ tự cụ thể. JSX được tạo kiểu, các thành phần được tạo kiểu, Cảm xúc, Điều trị, TypeStyle, Fela, Stitches, JSS, Goober và Biên dịch. Chúng tôi nhận thấy rằng, mặc dù mỗi thư viện cung cấp một bộ tính năng đa dạng, nhiều tính năng trong số đó thực sự được chia sẻ phổ biến giữa hầu hết các thư viện khác

Vì vậy, thay vì xem xét từng thư viện riêng lẻ, chúng tôi sẽ phân tích các tính năng nổi bật nhất. Điều này sẽ giúp chúng tôi hiểu rõ hơn cái nào phù hợp nhất cho một trường hợp sử dụng cụ thể

Ghi chú. Chúng tôi cho rằng nếu bạn ở đây, bạn đã quen thuộc với CSS-in-JS. Nếu bạn đang tìm kiếm một bài đăng cơ bản hơn, bạn có thể xem “Giới thiệu về CSS-in-JS. ”

Các tính năng CSS-in-JS phổ biến

Hầu hết các thư viện được duy trì tích cực giải quyết CSS-in-JS đều hỗ trợ tất cả các tính năng sau, vì vậy chúng tôi có thể coi chúng là thực tế

CSS có phạm vi

Tất cả các thư viện CSS-in-JS đều tạo ra các tên lớp CSS duy nhất, một kỹ thuật được tiên phong bởi các mô-đun CSS. Tất cả các kiểu được đặt trong phạm vi thành phần tương ứng của chúng, cung cấp khả năng đóng gói mà không ảnh hưởng đến bất kỳ kiểu nào được xác định bên ngoài thành phần

Với tính năng này được tích hợp sẵn, chúng tôi không bao giờ phải lo lắng về xung đột tên lớp CSS, xung đột về tính đặc hiệu hoặc lãng phí thời gian dành cho việc đặt tên lớp duy nhất trên toàn bộ cơ sở mã

Tính năng này là vô giá đối với sự phát triển dựa trên thành phần

SSR (Kết xuất phía máy chủ)

Khi xem xét Ứng dụng một trang (SPA) — nơi máy chủ HTTP chỉ cung cấp một trang HTML trống ban đầu và tất cả kết xuất được thực hiện trong trình duyệt — Kết xuất phía máy chủ (SSR) có thể không hữu ích lắm. Tuy nhiên, bất kỳ trang web hoặc ứng dụng nào cần được phân tích cú pháp và lập chỉ mục bởi các công cụ tìm kiếm đều phải có các trang SSR và các kiểu cũng cần được tạo trên máy chủ

Nguyên tắc tương tự cũng áp dụng cho Trình tạo trang web tĩnh (SSG), trong đó các trang cùng với bất kỳ mã CSS nào được tạo trước dưới dạng tệp HTML tĩnh tại thời điểm xây dựng

Tin vui là tất cả các thư viện mà chúng tôi đã thử nghiệm đều hỗ trợ SSR, về cơ bản chúng đủ điều kiện cho bất kỳ loại dự án nào

Tiền tố nhà cung cấp tự động

Do quá trình tiêu chuẩn hóa CSS phức tạp, có thể mất nhiều năm để bất kỳ tính năng CSS mới nào có sẵn trong tất cả các trình duyệt phổ biến. Một cách tiếp cận nhằm cung cấp quyền truy cập sớm vào các tính năng thử nghiệm là gửi cú pháp CSS không chuẩn theo tiền tố nhà cung cấp

/* WebKit browsers: Chrome, Safari, most iOS browsers, etc */
-webkit-transition: all 1s ease;

/* Firefox */
-moz-transition: all 1s ease;

/* Internet Explorer and Microsoft Edge */
-ms-transition: all 1s ease;

/* old pre-WebKit versions of Opera */
-o-transition: all 1s ease;

/* standard */
transition: all 1s ease; 

Tuy nhiên, hóa ra tiền tố của nhà cung cấp có vấn đề và Nhóm làm việc CSS dự định sẽ ngừng sử dụng chúng trong tương lai. Nếu chúng tôi muốn hỗ trợ đầy đủ các trình duyệt cũ hơn không triển khai thông số kỹ thuật tiêu chuẩn, chúng tôi sẽ cần biết những tính năng nào yêu cầu tiền tố nhà cung cấp

May mắn thay, có những công cụ cho phép chúng tôi sử dụng cú pháp chuẩn trong mã nguồn của mình, tự động tạo các thuộc tính CSS có tiền tố của nhà cung cấp bắt buộc. Tất cả các thư viện CSS-in-JS cũng cung cấp sẵn tính năng này

Không có kiểu nội tuyến

Có một số thư viện CSS-in-JS, như Radium hoặc Glamour, xuất ra tất cả các định nghĩa kiểu dưới dạng kiểu nội tuyến. Kỹ thuật này có một hạn chế rất lớn, vì không thể xác định các lớp giả, phần tử giả hoặc truy vấn phương tiện bằng cách sử dụng các kiểu nội tuyến. Vì vậy, các thư viện này đã phải cải tiến các tính năng này bằng cách thêm trình xử lý sự kiện DOM và kích hoạt cập nhật kiểu từ JavaScript, về cơ bản là phát minh lại các tính năng CSS gốc như

// consider "css" being the API of a generic CSS-in-JS library
const heading = css`
  font-size: 2em;
  color: ${myTheme.color};
`;

// consider "css" being the API of a generic CSS-in-JS library
const heading = css`
  font-size: 2em;
  color: ${myTheme.color};
`;

Người ta cũng thường chấp nhận rằng các kiểu nội tuyến kém hiệu quả hơn tên lớp. Việc sử dụng chúng như một cách tiếp cận chính để tạo kiểu dáng cho các thành phần thường là một phương pháp không được khuyến khích.

Tất cả các thư viện CSS-in-JS hiện tại đã ngừng sử dụng các kiểu nội tuyến, sử dụng tên lớp CSS để áp dụng các định nghĩa kiểu

Hỗ trợ CSS đầy đủ

Hệ quả của việc sử dụng các lớp CSS thay vì các kiểu nội tuyến là không có giới hạn nào về những thuộc tính CSS nào chúng ta có thể và không thể sử dụng. Trong quá trình phân tích, chúng tôi đặc biệt quan tâm đến

• các lớp và phần tử giả;
• truy vấn phương tiện truyền thông;
• hoạt ảnh khung hình chính

Tất cả các thư viện mà chúng tôi đã phân tích đều cung cấp hỗ trợ đầy đủ cho tất cả các thuộc tính CSS

Tính năng khác biệt

Đây là nơi nó thậm chí còn thú vị hơn. Hầu như mọi thư viện đều cung cấp một bộ tính năng duy nhất có thể ảnh hưởng lớn đến quyết định của chúng tôi khi chọn giải pháp phù hợp cho một dự án cụ thể. Một số thư viện đi tiên phong trong một tính năng cụ thể, trong khi những thư viện khác chọn mượn hoặc thậm chí cải thiện một số tính năng nhất định

Phản ứng cụ thể hoặc khuôn khổ bất khả tri?

Không có gì bí mật khi CSS-in-JS phổ biến hơn trong hệ sinh thái React. Đó là lý do tại sao một số thư viện được xây dựng riêng cho React. Styled JSX, styled-components và Stitches

Tuy nhiên, có rất nhiều thư viện không liên quan đến khung, khiến chúng có thể áp dụng cho bất kỳ dự án nào. Cảm xúc, Chiêu đãi, TypeStyle, Fela, JSS hoặc Goober

Nếu chúng ta cần hỗ trợ mã JavaScript cố định hoặc các khung khác ngoài React, thì quyết định rất đơn giản. chúng ta nên chọn một thư viện bất khả tri về khung. Nhưng khi xử lý một ứng dụng React, chúng tôi có nhiều tùy chọn hơn, điều này cuối cùng khiến cho việc đưa ra quyết định trở nên khó khăn hơn. Vì vậy, hãy khám phá các tiêu chí khác

Phong cách/Thành phần đồng vị trí

Khả năng xác định kiểu cùng với các thành phần của chúng là một tính năng rất tiện lợi, loại bỏ nhu cầu chuyển đổi qua lại giữa hai tệp khác nhau. tệp

// consider "css" being the API of a generic CSS-in-JS library
const heading = css`
  font-size: 2em;
  color: ${myTheme.color};
`;

// consider "css" being the API of a generic CSS-in-JS library
const heading = css`
  font-size: 2em;
  color: ${myTheme.color};
`;

// consider "css" being the API of a generic CSS-in-JS library
const heading = css`
  font-size: 2em;
  color: ${myTheme.color};
`;

Phản ứng bản định kiểu gốc, Vue. js SFC hoặc Thành phần góc hỗ trợ đồng vị trí của các kiểu theo mặc định, điều này chứng tỏ là một lợi ích thực sự trong cả giai đoạn phát triển và bảo trì. Chúng tôi luôn có tùy chọn trích xuất các kiểu thành một tệp riêng biệt, trong trường hợp chúng tôi cảm thấy rằng chúng đang che khuất phần còn lại của mã

Hầu như tất cả các thư viện CSS-in-JS đều hỗ trợ đồng vị trí của các kiểu. Ngoại lệ duy nhất mà chúng tôi gặp phải là Treat, yêu cầu chúng tôi xác định các kiểu trong một tệp

// consider "css" being the API of a generic CSS-in-JS library
const heading = css`
  font-size: 2em;
  color: ${myTheme.color};
`;

Cú pháp định nghĩa kiểu

Có hai phương pháp khác nhau mà chúng ta có thể sử dụng để xác định phong cách của mình. Một số thư viện chỉ hỗ trợ một phương thức, trong khi những thư viện khác khá linh hoạt và hỗ trợ cả hai phương pháp

Cú pháp mẫu được gắn thẻ

Cú pháp Mẫu được gắn thẻ cho phép chúng tôi xác định các kiểu dưới dạng một chuỗi mã CSS đơn giản bên trong Mẫu chữ ES tiêu chuẩn

// consider "css" being the API of a generic CSS-in-JS library
const heading = css`
  font-size: 2em;
  color: ${myTheme.color};
`;

Chúng tôi có thể thấy điều đó

• Các thuộc tính CSS được viết bằng chữ kebab giống như CSS thông thường;
• Giá trị JavaScript có thể được nội suy;
• chúng ta có thể dễ dàng di chuyển mã CSS hiện có mà không cần viết lại mã đó

Một số điều cần lưu ý

• Để có được đánh dấu cú pháp và đề xuất mã, cần có một plugin trình chỉnh sửa bổ sung;
• Vì mã cuối cùng cuối cùng phải được thực thi bằng JavaScript, nên các định nghĩa kiểu cần được phân tích cú pháp và chuyển đổi thành mã JavaScript. Điều này có thể được thực hiện trong thời gian chạy hoặc khi xây dựng, phát sinh một chi phí nhỏ về kích thước gói hoặc tính toán

Cú pháp kiểu đối tượng

Cú pháp Kiểu đối tượng cho phép chúng tôi xác định kiểu như các Đối tượng JavaScript thông thường

// consider "css" being the API of a generic CSS-in-JS library
const heading = css({
  fontSize: "2em",
  color: myTheme.color,
});

Chúng tôi có thể thấy điều đó

• Các thuộc tính CSS được viết bằng camelCase và các giá trị chuỗi phải được đặt trong dấu ngoặc kép;
• Các giá trị JavaScript có thể được tham chiếu như mong đợi;
• cảm giác không giống như viết CSS, vì thay vào đó, chúng tôi xác định kiểu bằng cách sử dụng cú pháp hơi khác nhưng có cùng tên thuộc tính và giá trị có sẵn trong CSS (đừng cảm thấy sợ hãi vì điều này, bạn sẽ quen với nó ngay thôi)
• di chuyển CSS hiện có sẽ yêu cầu viết lại theo cú pháp mới này

Một số điều cần lưu ý

• Đánh dấu cú pháp vượt trội, bởi vì chúng tôi thực sự đang viết mã JavaScript
• Để hoàn thành mã, thư viện phải gửi các định nghĩa kiểu CSS, hầu hết chúng mở rộng gói CSSType phổ biến
• Vì các kiểu đã được viết bằng JavaScript nên không cần phân tích cú pháp hoặc chuyển đổi bổ sung

Phương pháp áp dụng kiểu

Bây giờ chúng ta đã biết những tùy chọn nào có sẵn cho định nghĩa kiểu, hãy xem cách áp dụng chúng cho các thành phần và thành phần của chúng ta

Sử dụng một thuộc tính lớp / className prop

Cách dễ nhất và trực quan nhất để áp dụng các kiểu là chỉ cần đính kèm chúng dưới dạng tên lớp. Các thư viện hỗ trợ phương pháp này cung cấp một API trả về một chuỗi sẽ xuất ra các tên lớp duy nhất được tạo

Tiếp theo, chúng ta có thể lấy

// consider "css" being the API of a generic CSS-in-JS library
const heading = css`
  font-size: 2em;
  color: ${myTheme.color};
`;

// consider "css" being the API of a generic CSS-in-JS library
const heading = css`
  font-size: 2em;
  color: ${myTheme.color};
`;

Như chúng ta có thể thấy, phương pháp này khá giống với kiểu dáng truyền thống. đầu tiên chúng tôi xác định các kiểu, sau đó chúng tôi đính kèm các kiểu mà chúng tôi cần. Đường cong học tập thấp đối với bất kỳ ai đã từng viết CSS trước đây

Sử dụng thành phần

// consider "css" being the API of a generic CSS-in-JS library
const heading = css`
  font-size: 2em;
  color: ${myTheme.color};
`;

6

Một phương pháp phổ biến khác, lần đầu tiên được giới thiệu bởi thư viện styled-components (và được đặt tên theo nó), có một cách tiếp cận khác

// consider "css" being the API of a generic CSS-in-JS library
const heading = css`
  font-size: 2em;
  color: ${myTheme.color};
`;

Thay vì xác định các kiểu riêng biệt và gắn chúng vào các thành phần hoặc phần tử HTML hiện có, chúng tôi sử dụng API đặc biệt bằng cách chỉ định loại phần tử chúng tôi muốn tạo và các kiểu chúng tôi muốn đính kèm với nó

API sẽ trả về một thành phần mới, đã áp dụng (các) tên lớp, mà chúng ta có thể hiển thị giống như bất kỳ thành phần nào khác trong ứng dụng của mình. Điều này về cơ bản loại bỏ ánh xạ giữa thành phần và kiểu của nó

Sử dụng giá đỡ

// consider "css" being the API of a generic CSS-in-JS library
const heading = css`
  font-size: 2em;
  color: ${myTheme.color};
`;

7

Một phương pháp mới hơn, được phổ biến bởi Emotion, cho phép chúng tôi chuyển các kiểu sang một chỗ dựa đặc biệt, thường được đặt tên là

// consider "css" being the API of a generic CSS-in-JS library
const heading = css`
  font-size: 2em;
  color: ${myTheme.color};
`;

// consider "css" being the API of a generic CSS-in-JS library
const heading = css`
  font-size: 2em;
  color: ${myTheme.color};
`;

Cách tiếp cận này có một lợi ích công thái học nhất định, bởi vì chúng tôi không phải nhập và sử dụng bất kỳ API đặc biệt nào từ chính thư viện. Chúng ta có thể chỉ cần chuyển các kiểu cho chỗ dựa

// consider "css" being the API of a generic CSS-in-JS library
const heading = css`
  font-size: 2em;
  color: ${myTheme.color};
`;

Lưu ý rằng prop

// consider "css" being the API of a generic CSS-in-JS library
const heading = css`
  font-size: 2em;
  color: ${myTheme.color};
`;

Library

// consider "css" being the API of a generic CSS-in-JS library
const heading = css({
  fontSize: "2em",
  color: myTheme.color,
});

1

// consider "css" being the API of a generic CSS-in-JS library
const heading = css`
  font-size: 2em;
  color: ${myTheme.color};
`;

6

// consider "css" being the API of a generic CSS-in-JS library
const heading = css`
  font-size: 2em;
  color: ${myTheme.color};
`;

7 propstyled-components❌✅✅Emotion✅✅✅Goober✅✅🟠 2Compiled🟠 1✅✅Fela✅❌❌JSS✅🟠 2❌Treat✅❌❌TypeStyle✅❌❌Stitches✅✅🟠 1Styled JSX✅❌
✅  Full support          🟠 1  Limited support          🟠 2  Requires plugin          ❌  Unsupported

Kiểu đầu ra

Có hai phương pháp loại trừ lẫn nhau để tạo và gửi các kiểu tới trình duyệt. Cả hai phương pháp đều có những ưu điểm và nhược điểm, vì vậy hãy phân tích chi tiết về chúng

Kiểu DOM được thêm vào

// consider "css" being the API of a generic CSS-in-JS library
const heading = css({
  fontSize: "2em",
  color: myTheme.color,
});

4

Hầu hết các thư viện CSS-in-JS đưa các kiểu vào DOM khi chạy, sử dụng một hoặc nhiều thẻ

// consider "css" being the API of a generic CSS-in-JS library
const heading = css({
  fontSize: "2em",
  color: myTheme.color,
});

4 hoặc sử dụng API

// consider "css" being the API of a generic CSS-in-JS library
const heading = css({
  fontSize: "2em",
  color: myTheme.color,
});

6 để quản lý các kiểu trực tiếp trong CSSOM. Trong quá trình SSR, các kiểu luôn được thêm vào dưới dạng thẻ

// consider "css" being the API of a generic CSS-in-JS library
const heading = css({
  fontSize: "2em",
  color: myTheme.color,
});

4 bên trong

// consider "css" being the API of a generic CSS-in-JS library
const heading = css({
  fontSize: "2em",
  color: myTheme.color,
});

8 của trang HTML được hiển thị

Có một vài ưu điểm chính và các trường hợp sử dụng ưa thích cho phương pháp này

1. Nội tuyến các kiểu trong SSR giúp tăng chỉ số hiệu suất tải trang, chẳng hạn như FCP (Sơn nội dung đầu tiên), bởi vì hiển thị không bị chặn bằng cách tìm nạp một tệp

   // consider "css" being the API of a generic CSS-in-JS library
   const heading = css`
     font-size: 2em;
     color: ${myTheme.color};
   `;

   1 riêng biệt từ máy chủ
2. Nó cung cấp khả năng trích xuất CSS quan trọng vượt trội trong SSR bằng cách chỉ nội tuyến các kiểu cần thiết để hiển thị trang HTML ban đầu. Nó cũng loại bỏ bất kỳ kiểu động nào, do đó cải thiện hơn nữa thời gian tải bằng cách tải xuống ít mã hơn
3. Kiểu dáng động thường dễ triển khai hơn vì cách tiếp cận này có vẻ phù hợp hơn với giao diện người dùng có tính tương tác cao và Ứng dụng một trang (SPA), trong đó hầu hết các thành phần được hiển thị phía máy khách

Những hạn chế thường liên quan đến tổng kích thước gói

• cần có một thư viện thời gian chạy bổ sung để xử lý kiểu dáng động trong trình duyệt;
• các kiểu SSR được nội tuyến sẽ không được lưu trong bộ nhớ đệm sẵn có và chúng sẽ cần được chuyển đến trình duyệt theo từng yêu cầu vì chúng là một phần của tệp

  // consider "css" being the API of a generic CSS-in-JS library
  const heading_style = css({
    color: "blue"
  });

  0 do máy chủ hiển thị;
• các kiểu SSR được đặt trong trang

  // consider "css" being the API of a generic CSS-in-JS library
  const heading_style = css({
    color: "blue"
  });

  0 sẽ được gửi lại tới trình duyệt dưới dạng tài nguyên JavaScript trong quá trình bù nước

Trích xuất tệp

// consider "css" being the API of a generic CSS-in-JS library
const heading = css`
  font-size: 2em;
  color: ${myTheme.color};
`;

1 tĩnh

Có rất ít thư viện áp dụng cách tiếp cận hoàn toàn khác. Thay vì đưa các kiểu vào DOM, chúng tạo các tệp

// consider "css" being the API of a generic CSS-in-JS library
const heading = css`
  font-size: 2em;
  color: ${myTheme.color};
`;

1 tĩnh. Từ quan điểm hiệu suất tải, chúng tôi nhận được những ưu điểm và nhược điểm giống nhau khi viết các tệp CSS đơn giản

1. Tổng lượng mã được vận chuyển nhỏ hơn nhiều vì không cần mã thời gian chạy bổ sung hoặc chi phí bù nước
2. Các tệp

   // consider "css" being the API of a generic CSS-in-JS library
   const heading = css`
     font-size: 2em;
     color: ${myTheme.color};
   `;

   1 tĩnh được hưởng lợi từ bộ nhớ đệm sẵn có bên trong trình duyệt, do đó, các yêu cầu tiếp theo đối với cùng một trang sẽ không tìm nạp lại các kiểu
3. Cách tiếp cận này có vẻ hấp dẫn hơn khi xử lý các trang SSR hoặc các trang được tạo tĩnh vì chúng được hưởng lợi từ các cơ chế lưu vào bộ nhớ đệm mặc định

Tuy nhiên, có một số nhược điểm quan trọng chúng ta cần lưu ý

• Lần truy cập đầu tiên vào một trang, với bộ đệm trống, thường sẽ có FCP dài hơn khi sử dụng phương pháp này so với phương pháp được đề cập trước đó;
• Tất cả các kiểu động có thể được sử dụng trên trang sẽ được bao gồm trong gói được tạo trước, có khả năng dẫn đến các tài nguyên

  // consider "css" being the API of a generic CSS-in-JS library
  const heading = css`
    font-size: 2em;
    color: ${myTheme.color};
  `;

  1 lớn hơn cần được tải lên trước

Hầu như tất cả các thư viện mà chúng tôi đã thử nghiệm đều triển khai phương thức đầu tiên, đưa các kiểu vào DOM. Thư viện được thử nghiệm duy nhất hỗ trợ giải nén tệp

// consider "css" being the API of a generic CSS-in-JS library
const heading = css`
  font-size: 2em;
  color: ${myTheme.color};
`;

1 tĩnh là Treat. Có những thư viện khác hỗ trợ tính năng này, như Astroturf, Linaria và style9, không được đưa vào phân tích cuối cùng của chúng tôi

CSS nguyên tử

Một số thư viện đã tối ưu hóa thêm một bước nữa, triển khai kỹ thuật gọi là CSS-in-JS nguyên tử, lấy cảm hứng từ các framework như Tachyons hoặc Tailwind

Thay vì tạo các lớp CSS chứa tất cả các thuộc tính đã được xác định cho một phần tử cụ thể, chúng tạo một lớp CSS duy nhất cho mỗi kết hợp thuộc tính/giá trị CSS duy nhất

// consider "css" being the API of a generic CSS-in-JS library
const heading = css`
  font-size: 2em;
  color: ${myTheme.color};
`;

4

Điều này cho phép mức độ sử dụng lại cao vì mỗi lớp CSS riêng lẻ này có thể được sử dụng lại ở bất kỳ đâu trong cơ sở mã

Về lý thuyết, điều này hoạt động thực sự tuyệt vời trong trường hợp các ứng dụng lớn. Tại sao? . Do đó, hệ số tỷ lệ không phải là tuyến tính mà là logarit, dẫn đến đầu ra CSS ít hơn so với CSS không nguyên tử

Nhưng có một nhược điểm. các tên lớp riêng lẻ phải được áp dụng cho từng thành phần yêu cầu chúng, dẫn đến các tệp HTML lớn hơn một chút

// consider "css" being the API of a generic CSS-in-JS library
const heading = css`
  font-size: 2em;
  color: ${myTheme.color};
`;

5

Về cơ bản, chúng tôi đang chuyển mã từ CSS sang HTML. Sự khác biệt về kích thước dẫn đến phụ thuộc vào quá nhiều khía cạnh để chúng tôi có thể đưa ra kết luận chắc chắn, nhưng nói chung, nó sẽ làm giảm tổng lượng byte được chuyển đến trình duyệt

Sự kết luận

CSS-in-JS sẽ thay đổi đáng kể cách chúng ta viết CSS, mang lại nhiều lợi ích và cải thiện trải nghiệm phát triển tổng thể của chúng ta

Tuy nhiên, việc chọn thư viện nào để áp dụng không đơn giản và tất cả các lựa chọn đều đi kèm với nhiều thỏa hiệp kỹ thuật. Để xác định thư viện phù hợp nhất với nhu cầu của chúng tôi, chúng tôi phải hiểu các yêu cầu của dự án và các trường hợp sử dụng của nó

• Chúng ta có đang sử dụng React hay không?
• Có phải chúng ta đang xử lý một ứng dụng có tính tương tác cao, với kết xuất phía máy khách không?
• Chúng ta có đang xây dựng một trang web động với các trang SSR không?
• Chúng tôi có cần di chuyển mã CSS hiện có không?
• Chúng tôi muốn tối ưu hóa cho người dùng lần đầu hay khách truy cập quay lại?
• Chúng tôi có cập nhật phong cách của mình thường xuyên không?
• Chúng ta có sử dụng lại nhiều phong cách và thành phần không?

Trả lời các câu hỏi trên sẽ giúp chúng tôi quyết định những tính năng cần tìm khi chọn giải pháp CSS-in-JS, cho phép chúng tôi đưa ra quyết định sáng suốt hơn