Phản ứng CSS biến

Ngoài ra, chúng tôi có thể viết CSS nội tuyến trong thành phần, nhưng tôi không thích làm điều đó vì tôi giữ các quy tắc CSS không chỉ trong. css nơi tôi mong đợi, mà còn ở những vị trí ngẫu nhiên trong. jsx và kiểu nội tuyến khó ghi đè từ những nơi khác

Trong bài viết này, tôi muốn cho bạn thấy những gì tôi thấy thú vị gần đây khi tôi đọc về Biến CSS.
Tôi không muốn giải thích chi tiết về chủ đề này vì có nhiều nơi tốt hơn để tìm hiểu.
- “Sự khác biệt giữa biến CSS và biến tiền xử lý là gì? .
- Almost one hour speech by Lea Verou:

Một điều tôi muốn nhấn mạnh ở đây là, không giống như các biến mà chúng ta thường sử dụng trong SASS, chúng ta có thể sửa đổi các thuộc tính tùy chỉnh trong JS, bởi vì chúng được giải thích trong trình duyệt khi chạy.
Vì vậy, chúng ta có thể tạo một biến CSS. bộ chọn giả gốc có chứa, ví dụ, màu nền của thành phần.

:root {
  — mycomponent-bg-color: orange;
}

Sau đó, chúng ta có thể thay đổi giá trị của biến trong thành phần khi trạng thái sẽ thay đổi

componentDidUpdate() {
  document.documentElement.style.setProperty(
     ‘ — mycomponent-bg-color’, 
     this.state.backgroundColor
  )
}

Tôi đã tạo một bản demo đơn giản nơi chúng ta có thể điều khiển xoay hình ảnh

Vì vậy, các thuộc tính tùy chỉnh hoạt động giống như một API mà CSS hiển thị với JS

Ok, tuy nhiên, tại sao không chỉ sử dụng một kiểu nội tuyến?

Điều tôi thích trong ví dụ trên là.
1. Xóa sự tách biệt giữa CSS và JS;
2. Chúng ta có thể sử dụng trạng thái thành phần được đại diện bởi biến ở nhiều nơi trong CSS;
3. Mã của thành phần sạch hơn nhiều khi không có các dòng CSS nội tuyến đó

Đây chỉ là một thử nghiệm tôi tạo ra trong quá trình học tập, vì vậy tôi tò mò muốn biết bạn nghĩ gì về ý tưởng này và tại sao nó có thể tệ ;)

Gần đây, chúng tôi đã quyết định thiết kế lại trang đích của mình để làm cho nó trông bắt mắt hơn. Để làm được điều này, tôi nhận thấy rằng tôi đã sử dụng đi sử dụng lại cùng một thuộc tính CSS. Muốn viết DRY CSS, tôi quyết định rằng mình nên tạo một số biến CSS toàn cục và sử dụng chúng trong ứng dụng thay vì sao chép và dán ở mọi nơi. Điều này mang lại cho chúng tôi lợi thế là nếu chúng tôi cần điều chỉnh một trong các màu, tất cả những gì chúng tôi phải làm là thay đổi giá trị trong một tệp

Trước tiên hãy để tôi cung cấp một số thông tin cơ bản. Có rất nhiều cách khác nhau để áp dụng kiểu dáng trong ứng dụng React. Bạn có thể sử dụng các thành phần/cảm xúc được tạo kiểu, SASS, SCSS, LESS, kiểu dáng nội tuyến hoặc CSS thời trang tốt yêu thích của cá nhân tôi. Mỗi thứ trong số này đều có những lợi thế và sự đánh đổi riêng, nhưng thành thật mà nói, đôi khi tốt nhất là HÔN (hãy giữ cho nó đơn giản, ngu ngốc)

Đây là cách chúng tôi làm điều đó. Trong thư mục src của chúng tôi, chúng tôi tạo một tệp có tên biến. css. Nhìn vào ảnh chụp màn hình bên dưới để xem cấu trúc thư mục của chúng tôi và những gì chúng tôi giữ trong các biến. tập tin css

Biến CSS

Tôi không muốn bạn bị treo với số mili giây để kết xuất lại. Đây không phải là điểm chuẩn được kiểm soát (chúng tôi đang ở chế độ nhà phát triển của React vì một điều). Điều tôi muốn bạn xem xét là có bao nhiêu thành phần cần thiết để kết xuất lại cho thay đổi này. Trước tiên hãy xem xét cách tiếp cận

componentDidUpdate() {
  document.documentElement.style.setProperty(
     ‘ — mycomponent-bg-color’, 
     this.state.backgroundColor
  )
}

5. Lý do chính cho điều này là cách chúng tôi cấu trúc trạng thái của mình (chúng tôi có thể cấu trúc lại mọi thứ và cải thiện nó một chút). Nhưng ngay cả khi chúng tôi tái cấu trúc mọi thứ, khi chủ đề thay đổi, mọi thành phần cảm xúc cần được kết xuất lại để giải thích cho sự thay đổi chủ đề

Chuyển sang phương pháp Biến CSS, bạn sẽ nhận thấy thành phần duy nhất được kết xuất lại là thành phần

body[data-theme='light'] {
  --colors-primary: deeppink;
  --colors-background: white;



}
body[data-theme='dark'] {
 --colors-primary: lightpink;
 --colors-background: black;
}

7 của chúng tôi chịu trách nhiệm cập nhật

body[data-theme='light'] {
  --colors-primary: deeppink;
  --colors-background: white;
}



body[data-theme='dark'] {
 --colors-primary: lightpink;
 --colors-background: black;
}

4. Tuy nhiên, trải nghiệm người dùng hoạt động hoàn hảo. Đây là điều kỳ diệu đằng sau các biến CSS. Với cách tiếp cận

componentDidUpdate() {
  document.documentElement.style.setProperty(
     ‘ — mycomponent-bg-color’, 
     this.state.backgroundColor
  )
}

5, chúng tôi phải cập nhật kiểu của mọi thành phần và sau đó trình duyệt sẽ vẽ các bản cập nhật đó. Nhưng với cách tiếp cận Biến CSS, chúng tôi cập nhật các kiểu thành một thành phần duy nhất (_______34) và sau đó trình duyệt vẽ các bản cập nhật đó. Về mặt lý thuyết, phần vẽ của trình duyệt sẽ đảm nhận cùng một lượng công việc trên một phần của trình duyệt, do đó, điểm khác biệt duy nhất là chúng tôi đang thực hiện bao nhiêu công việc cho trình duyệt để React kết xuất lại tất cả các thành phần của chúng tôi và có cảm xúc để cập nhật các kiểu của

Điều này có thể có tác động tiêu cực đến hiệu suất khi ứng dụng của bạn phát triển. Xét về mặt khách quan, DX không phải là tốt hơn hay tệ hơn một cách khách quan, nhưng UX hoàn toàn có thể tốt hơn với các Biến CSS, tôi cảm thấy thoải mái khi đề xuất các Biến CSS thay vì sử dụng Ngữ cảnh để chia sẻ một chủ đề như thế này

Ồ, và cũng xem xét rằng Biến CSS là một phần của thông số kỹ thuật của trình duyệt và Trình cung cấp chủ đề thì không. Đó là một điểm vững chắc khác cho Biến CSS 😉

Đây là một tiêu chuẩn tôi khuyên bạn nên nắm lấy

Một sắc thái cuối cùng ở đây. Điều gì sẽ xảy ra nếu bạn không chỉ muốn thay đổi kiểu mà còn muốn thay đổi cách triển khai thành phần dựa trên chủ đề? . BẠN CÓ THỂ LÀM CẢ HAI. Lợi ích của việc này là các thành phần duy nhất cần sử dụng giá trị ngữ cảnh là những thành phần cần hiển thị khác nhau dựa trên chủ đề (có thể là một tập hợp con nhỏ). Hầu hết các thành phần chỉ có thể sử dụng các biến css cho mục đích tạo kiểu, vì vậy bạn vẫn sẽ nhận được những lợi ích đã nói ở trên. Nếu bạn không cần các thành phần để hiển thị khác nhau dựa trên chủ đề thì tôi sẽ không bận tâm đến điều này, nhưng nếu bạn cần, thì việc thực hiện khá đơn giản. Có một số cách để thực hiện điều này, tôi đã thực hiện một cách trong hộp mã hóa. thích khám phá đó

Tôi có thể sử dụng các biến CSS trong React không?

Làm cách nào để đặt CSS động trong React js?

Bạn có thể gán biến trong CSS không?

Tôi có thể sử dụng các biến CSS trong phản ứng gốc không?