Đặt biến css trong bản thảo

Nhưng. Tôi cũng rất thích CSS. Và tôi không tin rằng việc sử dụng CSS-in-JS sẽ giúp bạn không cần phải học nó. Bạn đang viết CSS theo một trong hai cách. Nó chỉ được đóng gói hơi khác một chút

Bất kể bạn đặt CSS của mình ở đâu, điều đó có nghĩa là bạn phải phát triển thành thạo ngôn ngữ. Trở nên giỏi CSS hơn sẽ giúp bạn trở thành nhà phát triển front-end hiệu quả hơn

Trong hướng dẫn này, chúng ta sẽ xem cách tận dụng một trong những phát triển mới hơn thú vị nhất trong CSS. Biến CSS, Thuộc tính tùy chỉnh AKA. Chúng ta sẽ xem cách chúng ta có thể sử dụng chúng trong các ứng dụng React của mình để cải thiện quy trình công việc và thực hiện một số nội dung thú vị

Tại sao mặc dù?

Là một nhà phát triển React, bạn có thể nghĩ rằng bạn không cần các biến trong CSS. Bạn có toàn bộ công cụ JavaScript theo ý của bạn

Có hai lý do để chuyển sang các biến CSS trong ứng dụng React của bạn

1. Công thái học là tốt đẹp

2. Nó mở ra những khả năng mới. Bạn có thể làm mọi thứ với các biến CSS không thể thực hiện được với JS

Hãy xem cách sử dụng chúng, sau đó chúng ta sẽ xem những cánh cửa nào được mở khóa

giới thiệu nhanh

Hãy xem các biến CSS đang hoạt động

sân chơi mật mã

Định dạng mã bằng cách sử dụng Prettier

đặt lại mã

HTML

<style>
  p {
    --highlight-color: yellow;
  }
  em {
    background: var(--highlight-color);
  }
</style>
<p>
  This paragraph has some <em>emphasized text</em>!
</p>

Kết quả

Làm mới khung kết quả

Trong ví dụ này, chúng tôi đang xác định một biến mới,

css

css

css

Lưu ý cách chúng tôi xác định các biến CSS giống như cách chúng tôi xác định các thuộc tính CSS điển hình. Điều này là do các biến CSS là thuộc tính. Chúng được gọi chính thức là "Thuộc tính tùy chỉnh CSS" và vì lý do chính đáng

Các biến CSS có thể kế thừa theo mặc định, giống như

css

css

Nhiều nhà phát triển tin rằng các biến CSS là toàn cầu, nhưng điều này không hoàn toàn đúng. Xem xét điều này

sân chơi mật mã

Định dạng mã bằng cách sử dụng Prettier

đặt lại mã

HTML

<style>
 p {
 --highlight-color: yellow;
 }
 em {
 background: var(--highlight-color);
 }
</style>
<h1>
 This heading has some <em>emphasized text</em>!
</h1>

Kết quả

Làm mới khung kết quả

css

css

css

css

css

Đôi khi, chúng tôi muốn các biến CSS của mình là toàn cầu. Ví dụ: các biến CSS thường được sử dụng cho các chủ đề màu và trong trường hợp này, chúng tôi muốn các màu có sẵn trên ứng dụng

Chúng tôi có thể làm điều này bằng cách treo các biến của chúng tôi trên phần tử cấp cao nhất,

css

css

Các hướng dẫn thường hiển thị các biến CSS được gắn vào một bộ chọn

css

css

css

css

css

Điều làm cho các biến CSS khác với các thuộc tính CSS thông thường là chúng ta có thể truy cập các giá trị của chúng bằng cách sử dụng hàm

css

Một số thông tin nhanh khác về các biến CSS

• Thuộc tính tùy chỉnh cần bắt đầu bằng hai dấu gạch ngang. Đây là điểm khác biệt của chúng với các thuộc tính CSS truyền thống

• Chúng có thể chứa bất kỳ loại giá trị nào, không chỉ màu sắc và pixel

• Bạn có thể chỉ định một giá trị mặc định nếu biến CSS không được xác định.

  css
  

  6 sẽ lùi về

  css
  

  7 nếu cần

Trong một ứng dụng React

Hãy xem nó trông như thế nào trong React. Hướng dẫn này sử dụng các thành phần được tạo kiểu, nhưng các hướng dẫn phải tương đối giống nhau bất kể thư viện CSS-in-JS

Đầu tiên, tôi giả định rằng bạn có một tệp chứa tất cả các mã thông báo thiết kế của bạn, đại loại như thế này

js

Trong ứng dụng React, bạn có thể nhập chúng trực tiếp vào các thành phần cần chúng

jsx

Hoặc, bạn có thể sử dụng một chủ đề

jsx

Đây là cùng một mã, nhưng được thiết lập bằng các biến CSS

jsx

(Nếu bạn không quen thuộc với

css

css

Chúng tôi đã tạo một số biến, treo chúng trên nút gốc và bây giờ chúng tôi có thể truy cập chúng trong các thành phần của mình

jsx

Đây là một chiến thắng nhỏ tốt đẹp, theo ý kiến ​​​​của tôi. Có thể truy cập các giá trị chủ đề mà không cần nhập hoặc chức năng nội tuyến là một luồng gió mới. Bạn sẽ mất một số lợi ích khi gõ tĩnh—sẽ nói thêm về điều này sau—nhưng trong mắt tôi, đó là một sự đánh đổi rất hạnh phúc

Đây là một sự khác biệt tương đối nhỏ, mặc dù. Hãy nhìn vào một cái gì đó thú vị hơn ...

Thay đổi giá trị, không phải biến

Vì vậy, giả sử chúng ta có một thành phần Nút

sân chơi mật mã

Định dạng mã bằng cách sử dụng Prettier

đặt lại mã

JSX

const Button = styled.button`
  min-height: 32px;
  padding: 0 32px;
  border-radius: 16px;
  border: none;
  color: white;
  font-size: 1rem;
  font-weight: 600;
  text-shadow: 1px 1px 0px #3a00df;
  background: linear-gradient(170deg, #359eff 5%, #3a00df 95%);
`;
render(
  <Button width={60}>
    Hello World
  </Button>
);

Kết quả

Làm mới khung kết quả

Có vẻ ổn, nhưng chúng tôi nhận được phản hồi rằng mục tiêu nhấp quá nhỏ trên thiết bị di động. nguyên tắc của ngành là các phần tử tương tác phải có chiều cao từ 44px đến 48px. Chúng tôi cần tăng kích thước để chạm vào điện thoại dễ dàng hơn

Hãy xem xét một giải pháp khả thi, không sử dụng các biến CSS

jsx

Hai lưu ý nhanh về mã này

• Tôi đang sử dụng

  js
  

  0 thay vì

  js
  

  1 để các nút có thể phát triển nếu cần. Điều này có thể xảy ra nếu người dùng tăng kích thước phông chữ mặc định của họ hoặc nếu văn bản phải ngắt dòng

• Thay vì sử dụng truy vấn phương tiện dựa trên chiều rộng, tôi đang sử dụng

  js
  

  2. Truy vấn phương tiện này theo dõi xem cơ chế nhập chính của người dùng là tốt hay thô. Chuột hoặc bàn di chuột được coi là "ổn" vì bạn có thể kiểm soát vị trí của nó đến từng pixel. Ngón tay hoặc điều khiển Wii kém chính xác hơn. Chúng tôi thực sự không quan tâm kích thước màn hình là bao nhiêu, chúng tôi quan tâm liệu họ có thể nhấp hoặc chạm chính xác hay không

Chúng tôi gửi thay đổi này và chúng tôi ngủ ngon hơn một chút khi biết rằng chúng tôi đã cải thiện khả năng sử dụng ứng dụng của mình

Tuy nhiên, chúng tôi nhanh chóng biết rằng công việc của chúng tôi vẫn chưa hoàn thành. Các nút không phải là yếu tố duy nhất có thể chạm vào trong ứng dụng của chúng tôi. Ngoài ra còn có các kiểu nhập văn bản, trong số những kiểu khác

Hãy cập nhật cả thành phần

js

jsx

Chúng tôi sử dụng những giá trị đó trong cả hai thành phần của chúng tôi

jsx

Đây là một đoạn CSS đáng kể để đưa vào bất kỳ phần tử có thể khai thác nào

Bây giờ, chúng ta có thể giải quyết vấn đề này theo một số cách, sử dụng mixin thành phần kiểu dáng hoặc lớp CSS. Nhưng tôi nghĩ cách tốt nhất để giải quyết vấn đề này là sử dụng các biến CSS

Thay vì bắt buộc chỉ định cách mỗi thành phần sẽ phản hồi tại các điểm dừng khác nhau, điều gì sẽ xảy ra nếu chúng ta chuyển cho nó một biến phản ứng theo dõi điều đó cho chúng ta?

jsx

Với biến CSS kỳ diệu này, các thành phần đáp ứng của chúng tôi trở nên đơn giản hơn rất nhiều

jsx

Tôi sẽ là người đầu tiên thừa nhận. lần đầu tiên bạn nhìn thấy mô hình này, nó có vẻ hơi thú vị. Nó đòi hỏi một sự thay đổi mô hình tinh thần. Nhưng nó siêu hấp dẫn, theo ý kiến ​​​​của tôi

Tất cả chúng ta đều quen sử dụng các truy vấn phương tiện CSS để áp dụng một đoạn CSS khác trong các tình huống khác nhau. Nhưng nếu chúng ta giữ nguyên các thuộc tính CSS và thay đổi các giá trị thì sao?

Bên trong các thành phần của chúng tôi,

js

js

Hãy xem xét một số lợi ích

• Bằng cách hợp nhất các điểm dừng ở một nơi duy nhất, giờ đây chúng ta có một nguồn sự thật duy nhất. Trước đây, một nhà phát triển bướng bỉnh có thể vô tình xóa một trong các điểm dừng, dẫn đến hành vi không nhất quán. Bây giờ nó được đóng gói thành một biến đàn hồi

• Nó cho phép chúng tôi hiểu rõ hơn về lý do tại sao chúng tôi làm điều này. Chúng tôi đang đặt tên cho nó—

  js
  

  6—để truyền đạt lý do tại sao chúng tôi cần đặt giá trị

  js
  

  0 ngay từ đầu

• Nó mang tính tuyên bố hơn. Thay vì chỉ định cách mỗi thành phần sẽ thay đổi dựa trên loại con trỏ, chúng tôi đang cho nó biết giá trị sẽ là gì

"Nguyên tắc hiểu biết tối thiểu" là ý tưởng rằng mã chỉ nên có quyền truy cập vào nội dung liền kề với nó và không được "tiếp cận" vào một phần hoàn toàn khác của cơ sở mã. Tôi cảm thấy nếu chúng ta nheo mắt một chút, ý tưởng đó cũng sẽ được áp dụng ở đây

Một ví dụ nhanh khác. chúng ta có thể thực hiện thủ thuật tương tự cho các biến chủ đề của mình để mỗi chế độ xem có tỷ lệ riêng

jsx

thay vì có cùng tỷ lệ cho mọi kích thước cửa sổ, chúng ta có thể có tỷ lệ tùy chỉnh cho từng điểm dừng. Điều này dẫn đến giao diện người dùng nhất quán hơn nhiều và ít phiền phức hơn bên trong từng thành phần riêng lẻ

Các khả năng mới khác

Cho đến nay, mọi thứ chúng ta nói đến là về trải nghiệm của nhà phát triển. Chúng tôi đã xem xét các cách thay thế để giải quyết vấn đề

Bây giờ chúng ta hãy xem xét một số vấn đề mà các biến CSS được trang bị riêng để giải quyết, dẫn đến trải nghiệm người dùng được cải thiện

Làm sinh động bất kỳ thuộc tính nào

Có một số thuộc tính CSS đơn giản là không thể hoạt ảnh được. Ví dụ: nếu bạn đã từng cố gắng tạo hiệu ứng chuyển màu tuyến tính hoặc xuyên tâm, thì bạn sẽ nhanh chóng nhận ra rằng nó không hoạt động.

Với các biến CSS, bạn có thể tạo hiệu ứng động cho bất kỳ thuộc tính nào, bởi vì bạn không áp dụng chuyển đổi cho thuộc tính, bạn đang áp dụng chuyển đổi cho giá trị

Ví dụ: đây là một hoạt ảnh chuyển màu thú vị, có thể thực hiện được bằng các biến CSS

Tại thời điểm viết bài, hoạt ảnh này không hoạt động trong Firefox hoặc Safari. Các biến CSS được hỗ trợ rộng rãi, nhưng các trình duyệt vẫn đang triển khai khả năng áp dụng các hiệu ứng chuyển tiếp cho chúng. Đây là một phần của CSS Houdini, một nỗ lực lớn trong nhiều năm để giới thiệu công cụ CSS cho các nhà phát triển

Đọc thêm về nút này trong hướng dẫn của tôi, "Magical Rainbow Gradients"

Sửa lỗi flash "Chế độ tối"

Nếu bạn đã cố gắng triển khai một biến thể "Chế độ tối", thì có lẽ bạn đã bị cắn bởi tình huống khó khăn này. trong một khoảnh khắc ngắn ngủi, màu sắc sai nhấp nháy

'Chế độ nhấp nháy' khi tải trang

"Chế độ tối" phức tạp một cách đáng ngạc nhiên, đặc biệt là trong ngữ cảnh do máy chủ kết xuất (như với Next. js hoặc Gatsby). Vấn đề là HTML được tạo ra rất lâu trước khi đến thiết bị của người dùng, vì vậy không có cách nào để biết người dùng thích chủ đề màu nào

Chúng ta có thể giải quyết vấn đề này bằng các biến CSS và một chút thông minh. Tôi đã viết về cách tiếp cận này trong bài đăng trên blog của mình, Cuộc tìm kiếm Chế độ tối hoàn hảo

Nhận và cài đặt

Trong ví dụ trên, chúng tôi mã hóa cứng các giá trị chủ đề của mình trong thành phần

js

js

Có thể đôi khi bạn cần truy cập các giá trị này trong JavaScript

Nếu muốn, bạn có thể tiếp tục lưu trữ chúng trong tệp

js

js

Tuy nhiên, một ý tưởng khác là sử dụng CSS làm nguồn gốc của sự thật. Bạn có thể truy cập các giá trị bằng một chút JS

js

Bạn cũng có thể đặt các giá trị đó từ bên trong JS

Nhận và thiết lập các biến CSS từ JS là một lối thoát hiểm. Bạn có thể ngạc nhiên về mức độ hiếm khi bạn cần đến nó. Bạn thậm chí có thể sử dụng các biến CSS trong các SVG được nhúng 😮

nhược điểm

không có loại

Có lẽ nhược điểm lớn nhất khi sử dụng các biến CSS cho các chủ đề là không có cách nào để nhập chúng một cách tĩnh (thông qua Bản mô tả hoặc Luồng)

Trong suy nghĩ của tôi, đây không phải là một vấn đề lớn; . Có một đối tượng chủ đề đã nhập là tốt, nhưng tôi không thể nói rằng nó đã giúp tôi tiết kiệm rất nhiều thời gian. Nói chung, điều hiển nhiên là bạn nhập sai tên của một biến CSS và đó là cách khắc phục nhanh

Tôi nghĩ điều quan trọng là chạy kiểm tra thời gian biên dịch trên trang web của bạn, nhưng tôi nghĩ các công cụ như Chromatic là một kiểm tra đáng tin cậy hơn nhiều. Chúng chạy trong CI và nắm bắt bất kỳ sự khác biệt nào trong đầu ra hình ảnh được hiển thị

Điều đó nói rằng, nếu loại an toàn là phải có, bạn không cần phải từ bỏ nó. Bạn chỉ cần giữ các kiểu của mình trong một đối tượng JS và nội suy chúng trong. Tweet này từ Fatih Kalifa cho thấy cách anh ấy thiết lập các loại của mình cho các biến CSS

hỗ trợ trình duyệt

Các biến CSS được hỗ trợ trình duyệt lành mạnh trong số 4 trình duyệt hàng đầu, nhưng nó thiếu hỗ trợ IE

Không lỏng lẻo

Khi sử dụng styled-components, bạn có thể đặt các biến ở bất cứ đâu bạn muốn, kể cả trong các truy vấn phương tiện

jsx

Không thể sử dụng biến CSS ở bất kỳ đâu trong truy vấn phương tiện. Có bàn tán xung quanh việc cho phép người dùng mô tả các biến môi trường của riêng họ bằng

jsx

Tuy nhiên, bất chấp những nhược điểm này, các biến CSS mở ra rất nhiều cánh cửa thực sự thú vị. Tôi đã sử dụng chúng được vài năm rồi (kể cả trên chính blog này. ) và tôi yêu họ. Chúng là cách ưa thích của tôi để quản lý các kiểu động

Bộ ba thần thánh

Là nhà phát triển web, chúng tôi làm việc với 3 công nghệ chính. HTML, CSS và JS. Để làm việc hiệu quả, chúng ta cần thoải mái với cả 3

Tôi biết nhiều nhà phát triển có kiến ​​thức khá vững về HTML và JS, nhưng lại gặp khó khăn với CSS. Bản thân tôi đã ở trong nhóm này trong nhiều năm

CSS là một ngôn ngữ phức tạp. Những điều cơ bản có thể được học một cách nhanh chóng và (tương đối) dễ dàng, nhưng đó là một ngôn ngữ cực kỳ khó để thành thạo

Khi chúng tôi viết CSS, chúng tôi chỉ nhìn thấy phần nổi của tảng băng chìm. Đó là một ngôn ngữ rất tiềm ẩn. Tất cả các loại cơ chế bí mật bắt đầu hoạt động, điều chỉnh hiệu ứng của các thuộc tính CSS của chúng ta theo những cách đáng ngạc nhiên, khó hiểu

CSS không có thông báo lỗi hoặc nhật ký giao diện điều khiển. Chúng tôi viết CSS và kết quả là những gì chúng tôi mong đợi hoặc không. Khi mọi thứ đi sai hướng, nó có thể khiến chúng ta cảm thấy bất lực. Cuối cùng, chúng tôi ném các thuộc tính CSS ngẫu nhiên vào tường, hy vọng một trong số chúng sẽ làm những gì chúng tôi muốn

Tôi muốn giúp đỡ. Gần đây tôi đã phát hành một khóa học CSS, CSS dành cho nhà phát triển JavaScript. Nó được xây dựng dành riêng cho những người sử dụng khung JS như React. Nó dạy bạn cách CSS thực sự hoạt động, để xây dựng mô hình tinh thần của bạn để bạn phát triển trực giác về ngôn ngữ

Nó không giống như các khóa học khác mà bạn đã tham gia. Có hơn 150 video, nhưng đây không phải là một khóa học video. Đó là một cuộc phiêu lưu tương tác, đa phương thức, tự nhịp độ. Có rất nhiều bài tập, dự án lấy cảm hứng từ thế giới thực và thậm chí một số trò chơi nhỏ. Nó sử dụng một nền tảng được xây dựng tùy chỉnh không giống bất kỳ thứ gì bạn đã sử dụng trước đây

Nếu bạn gặp khó khăn với CSS, tôi hy vọng bạn sẽ kiểm tra nó. Có được sự tự tin với CSS đang thay đổi cuộc chơi, đặc biệt nếu bạn đã quen thuộc với HTML và JS. Khi bạn hoàn thành bộ ba thần thánh, việc duy trì dòng chảy trở nên dễ dàng hơn rất nhiều, để thực sự tận hưởng việc phát triển các ứng dụng web

Làm cách nào để sử dụng các biến CSS trong TypeScript Angular?

Làm cách nào để đặt biến CSS trong JS?

Làm cách nào để sử dụng các biến CSS trong SCSS?

Làm cách nào để sử dụng các biến CSS trong các thành phần được tạo kiểu?