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
Công thái học là tốt đẹp
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ả
Bật phím 'tab'Trong ví dụ này, chúng tôi đang xác định một biến mới,
css
0, trên bộ chọn đoạn văn. Chúng tôi đang sử dụng màu đó để áp dụng màu nền cho các phần tử con
css
1. Bất cứ khi nào một
css
1 được sử dụng trong một đoạn văn, nó sẽ có nền màu vàng
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
3 hoặc
css
4. Khi chúng tôi xác định một biến trên một phần tử, nó có sẵn cho tất cả các phần tử con của phần tử đó
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ả
Bật phím 'tab'css
5 bên trong tiêu đề này đặt
css
6 thành
css
7, nhưng nó không có hiệu lực, bởi vì
css
0 chưa được xác định cho phần tử này. Nó chỉ được xác định cho các đoạn văn và thẻ
css
1 này không nằm trong một đoạn văn
Đô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
0
css
nguồn gốc?
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
1 bí ẩn
css
css
1 là tham chiếu đến phần tử cấp cao nhất. Nó tương đương với bộ chọn
css
3. Để giữ cho mọi thứ đơn giản, tôi sẽ sử dụng
css
3 trong bài đăng trên blog này
Đ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
5. Đây là những gì cho phép chúng tôi sử dụng các thuộc tính tùy chỉnh CSS làm biến
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
8, nó cho phép chúng tôi viết CSS không giới hạn, như thể chúng tôi đang viết nó trong tệp
css
9. )
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ả
Bật phím 'tab'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
3 của chúng ta. Để giữ cho mọi thứ KHÔ, chúng tôi sẽ lưu trữ kích thước của chúng tôi theo chủ đề của chúng tôi
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
0 luôn trỏ đến cùng một giá trị,
js
5, nhưng giá trị đó là động
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
8
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
9. Chúng sẽ được sử dụng để khởi tạo các biến CSS, nhưng sau đó cũng được nhập vào bất cứ nơi nào bạn cần các giá trị thô trong 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
0, điều này sẽ cho phép điều này… Nhưng nó vẫn chưa thành hiện thực
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