Luân xa css

Mọi thứ người dùng nhìn thấy trong ứng dụng hoặc trình duyệt của họ trước tiên đều được quản lý bởi các nhà phát triển giao diện người dùng. Những nhà phát triển giao diện người dùng này sẽ quản lý thiết kế, phân tích mã và gỡ lỗi ứng dụng. Vì vậy, các nhà phát triển giao diện người dùng chịu trách nhiệm về giao diện, thiết kế và cảm nhận của trang web

Có nhiều công cụ phát triển giao diện người dùng. Chakra UI và Tailwind CSS là hai công cụ phát triển giao diện người dùng

Luân xa css

Chakra UI là gì?

Giao diện người dùng Chakra đơn giản, theo mô-đun và là một thành phần có thể truy cập để xây dựng các ứng dụng React. Chakra UI được ra mắt vào tháng 9 năm 2019. Tính đơn giản, khả năng truy cập, tính mô đun của nó làm cho nó mạnh mẽ hơn. Nó thuộc danh mục thành phần giao diện người dùng. Chakra UI có 17. 1k sao GitHub hiện tại. (nguồn)

CSS Tailwind là gì?

Tailwind CSS được sử dụng để xây dựng giao diện người dùng của khách hàng. Nó là một khung CSS đầu tiên về tiện ích. Phiên bản đầu tiên của Tailwind CSS i. e, Khung CSS ưu tiên tiện ích được tạo vào năm 2017. Nó có nhiều mẫu được tạo sẵn và người dùng cũng có thể tạo các thiết kế của riêng mình. CSS Tailwind hiện có 40. 4k sao GitHub. (nguồn)

Ưu điểm và nhược điểm của Chakra UI và Tailwind CSS

Ưu điểm của Chakra UI

  1. Dễ dàng tùy chỉnh – Chakra UI có thể dễ dàng tùy chỉnh i. e, chúng tôi có thể điều chỉnh các thiết kế một cách dễ dàng bất cứ khi nào cần thiết. Thay vì kiểu, chúng ta cũng có thể thay đổi hành vi của các thành phần được sử dụng
  1. Khả năng truy cập – Chakra UI có thể dễ dàng truy cập. Mọi người luôn gặp sự cố khi truy cập thứ gì đó, vì vậy rất khó để tạo giao diện người dùng có thể truy cập. Thông thường, chúng tôi phải thực hiện một số hướng dẫn WCAG, nhưng điều hướng bàn phím, đường viền phù hợp đều được bao phủ bởi giao diện người dùng Chakra
  1. Hỗ trợ Chế độ tối – Ngày nay, chế độ tối đã trở thành một phần quan trọng trong cuộc sống công nghệ. Bây giờ mọi người có thể sử dụng nó trong máy tính xách tay, điện thoại thông minh, v.v. Hầu hết các thành phần của Chakra đều tương thích với chế độ tối

Nhược điểm của Chakra UI

  1. Không thể tạo kiểu cho một số thành phần – Các thành phần như công tắc, hộp kiểm và một số thành phần khác không thể được tạo kiểu bằng Chakra UI
  1. Khó áp dụng mặc định – Luân xa đã có sẵn một số thành phần mặc định. Nên nếu muốn thêm 1 thành phần mặc định vào sẽ khó áp dụng

Ưu điểm của Tailwind CSS

  1. Tailwind là một bộ CSS. Bất cứ khi nào cần chúng ta có thể thêm các lớp CSS đó vào các phần tử HTML. Vì vậy, nó sẽ tiết kiệm thời gian phát triển và thiết kế sẽ hấp dẫn hơn
  1. Tailwind CSS rất hữu ích trong việc tạo chủ đề đáp ứng cho ứng dụng web
  1. Chúng ta có thể sử dụng Tailwind CSS một cách dễ dàng và nó có nhiều mẫu tạo sẵn

Nhược điểm của Tailwind CSS

  1. Tailwind CSS không cung cấp bất kỳ thành phần kiểu dáng mặc định nào. Chúng ta phải tạo ra mọi thứ từ đầu
  1. Mất rất nhiều thời gian để thiết kế các thành phần vì nó được thực hiện từ đầu
  1. Mặc dù chúng ta đã quen thuộc với CSS, nhưng chúng ta cần tìm hiểu các lớp được xác định trước do Tailwind cung cấp

Phần kết luận

Chakra UI là một công cụ mới và nó có nhiều thành phần. Nó giúp bạn tạo bố cục một cách nhanh chóng. Nó đơn giản và dễ tiếp cận

Nếu bạn muốn có một thành phần React được chuẩn bị sẵn, bạn có thể sử dụng Chakra UI. (nguồn. Trang web chính thức của Chakra)

Tailwind CSS cho chúng ta thấy cách hoạt động khác của CSS. Sử dụng điều này, chúng tôi có thể tạo nhiều giao diện người dùng linh hoạt hơn. Nếu chúng ta thay đổi một phần tử, nó không ảnh hưởng đến phần tử kia. Chúng tôi cũng có thể tạo các mẫu của riêng mình. Tuy nhiên, việc thiết kế sẽ mất một chút thời gian khi sử dụng Tailwind CSS. (nguồn. Trang web chính thức của Tailwind)

Rất nhiều điều cần được xem xét trong khi thiết kế bất kỳ ứng dụng phần mềm nào nói chung. Để xây dựng một trang web với phương pháp phát triển dựa trên thành phần, chúng ta sẽ có xu hướng tiếp cận một thiết kế dưới dạng các thành phần riêng lẻ.

Ví dụ: hãy xem xét một trang web siêu đơn giản như blog. Nó thường có tiêu đề, bìa bài đăng, nội dung bài đăng, chân trang, liên kết để điều hướng giữa các bài đăng khác nhau, thành phần tìm kiếm để tìm kiếm các bài đăng có sẵn, v.v.

Khi chúng tôi được giới thiệu một thiết kế của một trang web, chúng tôi sẽ bắt đầu xây dựng các phần riêng lẻ nhỏ của nó, mà chúng tôi gọi là các thành phần và sau đó kết hợp các thành phần đó lại với nhau để hoàn thành thiết kế cho một trang.

Giả sử, nếu chúng ta muốn xây dựng một nút thì nó cực kỳ đơn giản như

<button onclick="alert('hello world');">Hellobutton>

Đây là một thẻ HTML đơn giản, một phần tử và cũng là một thành phần. Có thể có rất nhiều thành phần mà chúng tôi sẽ muốn xây dựng cho một ứng dụng khách thực sự. Một số ví dụ là phương thức, ngăn kéo, liên kết, tab, đầu vào, v.v.

Khi xây dựng các thành phần này, chúng ta nên cẩn thận rằng chúng ta đang tuân theo cùng một kiến ​​trúc thiết kế xuyên suốt ứng dụng của mình. Tất cả các nút trong ứng dụng của chúng tôi phải trông giống nhau

Điều tiếp theo cần được xem xét khi phát triển các ứng dụng web là Khả năng truy cập web. Nếu chúng tôi đang xây dựng một thành phần thả xuống/chọn, thành phần đó phải có thể điều hướng được qua bàn phím, phải có độ tương phản màu phù hợp, có thể truy cập được bằng trình đọc màn hình, v.v.

Có thể có nhiều trường hợp khác mà chúng ta thậm chí có thể không biết khi xây dựng một số thành phần phức tạp như tab, lớp phủ, phương thức

Để giúp chúng tôi giải quyết những vấn đề này và để dễ dàng bắt đầu phát triển, có rất nhiều

Thư viện thành phần giao diện người dùng hiện có. Họ có rất nhiều thành phần đã được thử nghiệm trong trận chiến, điều này sẽ giúp các nhà phát triển như chúng tôi xây dựng ứng dụng của mình một cách nhanh chóng mà không phải hy sinh khả năng truy cập, kiến ​​trúc thiết kế, điều hướng có ý nghĩa, v.v.

Một trong những Thư viện thành phần như vậy là

giao diện chakra

Chakra UI là một thư viện thành phần đơn giản, theo mô-đun và có thể truy cập, cung cấp cho bạn các khối xây dựng mà bạn cần để xây dựng các ứng dụng React của mình

Hãy nghĩ về những khối xây dựng này giống như bộ xếp hình lego. Chúng ta có thể bắt đầu chọn đúng thứ chúng ta cần và kết hợp chúng lại với nhau để thực hiện dự án mơ ước của mình

Giới thiệu lại về CSS trong React

Trước khi chúng ta tìm hiểu về Chakra UI, hãy xem lại các cách chúng ta có thể tạo kiểu cho các thành phần React của mình bằng css

phong cách bên ngoài

Theo cách tiếp cận này, chúng tôi sẽ viết mã thành phần của mình trong tệp JSX hoặc TSX và chúng tôi sẽ tạo một tệp khác bằng css và tham chiếu chúng trong tệp thành phần của chúng tôi

components

- mycomponent.jsx

- mycomponent.css

Thách thức với cách tiếp cận này là css chúng tôi đang viết không nằm trong phạm vi thành phần, thay vào đó nó sẽ được áp dụng trên toàn cầu. Khi chúng tôi chọn các thành phần có tên lớp hoặc ID và viết các kiểu cụ thể, chúng tôi nên cẩn thận để không lặp lại các bộ chọn giống nhau. Nếu chúng ta không đủ cẩn thận thì các kiểu sai sẽ được áp dụng cho một phần tử có cùng tên bộ chọn trên một trang khác. Điều này là do toàn bộ tệp css của chúng tôi được nhóm lại với nhau và máy chủ qua dây

Một vấn đề đau đầu khác là khi chúng tôi xóa một số thành phần khỏi ứng dụng của mình, rất dễ quên mất các kiểu mà chúng tôi đã viết cho thành phần đó. Vì các kiểu không nằm trong phạm vi thành phần, chúng tôi không có cách nào để tìm ra css chết trong ứng dụng của mình

CSS trong JS

Như tên gợi ý, theo cách tiếp cận này, chúng tôi sẽ viết mã CSS bằng Javascript

Điều này có rất nhiều lợi ích, như

  1. Bảo trì dễ dàng
  2. Hiệu suất nhanh
  3. Phong cách năng động

Khi chúng tôi phạm vi css cho một thành phần cụ thể, chúng tôi không còn phải lo lắng về việc các kiểu của chúng tôi làm rối tung các thành phần khác. Khi chúng tôi xóa một thành phần khỏi ứng dụng, css sẽ biến mất cùng với thành phần đó. Lợi ích chính của nó là chỉ gửi CSS mà chúng ta cần cho trang qua mạng

Có rất nhiều thư viện để giúp chúng tôi với cách tiếp cận css-in-js. Những cái nổi tiếng là Styled Components và Emotion

Một

Luân xa css

Bạn có thể thấy sự khác biệt trong vỏ của các thuộc tính css,

backgroundColor thay vì background-color và bộ chọn giả cũng vậy. Chúng tôi đang chuyển các kiểu như một đối tượng cho một giá đỡ tùy chỉnh css được suy ra theo cảm xúc và áp dụng các kiểu đó nội tuyến cho div đó

Nếu bạn muốn tìm hiểu sâu về khái niệm này, vui lòng đọc qua tài liệu từ cảm xúc

Chúng ta có thể xây dựng ứng dụng phản ứng của mình với các thành phần cảm xúc hoặc kiểu dáng, nhưng thư viện Chakra UI đưa cách tiếp cận này lên một cấp độ cao hơn và đơn giản hơn

Bắt đầu với Chakra UI

Ví dụ trên với css prop của cảm xúc có thể đạt được trong Chakra UI với đoạn mã bên dưới

1import { Box } from "@chakra-ui/react";

2

3return (

4 <Box

5 backgroundColor="hotpink"

6 _hover={{

7 color: "lightgreen"

8 }}

9 >

10 This has a hotpink background.

11 Box>

12);

Ở đây chúng ta đang chuyển trực tiếp các style tới thành phần dưới dạng props. Thành phần Hộp hiển thị một div theo mặc định

Chakra UI sử dụng cảm xúc bên trong, vì vậy bạn cũng có thể tạo kiểu cho các thành phần của mình theo cách thuần túy cảm xúc, nhưng bạn sẽ không cần điều này trong phần lớn thời gian

Đây là thành phần luân xa được tạo kiểu theo cảm xúc

1return (

2 <Box

3 css={{

4 backgroundColor: "hotpink",

5 "&:hover": {

6 color: "lightgreen"

7 }

8 }}

9 >

10 This has a hotpink background.

11 Box>

12);

Cả hai đều hiển thị cùng một kết quả

Hãy xem một ví dụ khác, nơi chúng tôi muốn lấy tên người dùng và mật khẩu trong một biểu mẫu có nút gửi

Trong React với các phần tử đơn giản,

Luân xa css

Các kiểu phần tử giống nhau trong Chakra sẽ là

Luân xa css

Ghi chú. Vui lòng bỏ qua ngữ nghĩa ở đây, vì đây chỉ là để chứng minh sự so sánh về phong cách

Nếu hình ảnh không rõ ràng, hãy xem Hộp cát cho Phản ứng đơn giản và với các thành phần Giao diện người dùng Chakra được đề cập ở trên

Có rất nhiều thành phần chúng tôi có trong luân xa và thậm chí cả những thành phần cụ thể như

components

- mycomponent.jsx

- mycomponent.css

1 và

components

- mycomponent.jsx

- mycomponent.css

2 để xử lý riêng các bố cục như thế này

Phần tuyệt vời của việc sử dụng các thành phần Chakra là intellisense cho các kiểu luôn có sẵn cho bạn để bạn không cần phải lo lắng về vỏ bọc của các kiểu

Vấn đề ở đây là luân xa được ghi lại đầy đủ và bạn có thể dễ dàng xem qua bất kỳ thành phần nào từ repo luân xa ui để tìm hiểu thêm về chúng và tùy chỉnh theo yêu cầu của bạn

Trong ví dụ biểu mẫu trên với chakra, chúng ta đã thấy một thành phần

components

- mycomponent.jsx

- mycomponent.css

3 chỉ đơn giản là hiển thị HTML

components

- mycomponent.jsx

- mycomponent.css

4 nhưng vẻ đẹp là, nó có thể chấp nhận đạo cụ phong cách của chakra. Chúng tôi có thể chuyển đổi bất kỳ thành phần tùy chỉnh nào để nhận đạo cụ luân xa bằng chức năng

components

- mycomponent.jsx

- mycomponent.css

5. Tương tự về chức năng với

components

- mycomponent.jsx

- mycomponent.css

6 trong cảm xúc

1import styled from '@emotion/styled'

2

3const Button = styled.button`

4 color: turquoise;

5`

6render(<Button>This my button component.Button>)

Khả năng tiếp cận ❤️

Các thành phần luân xa được chế tạo có tính đến khả năng tiếp cận 🚀. Ví dụ: nếu bạn đang sử dụng phương thức từ chakra, thì đây là bàn phím và quản lý tiêu điểm bạn lấy ra khỏi hộp tuân thủ các tiêu chuẩn có thể truy cập

  • Khi phương thức mở ra, tiêu điểm bị mắc kẹt trong đó
  • Khi phương thức mở ra, tiêu điểm sẽ tự động được đặt thành phần tử được bật đầu tiên
  • Khi chế độ đóng, tiêu điểm sẽ trở lại thành phần được lấy tiêu điểm trước khi chế độ được kích hoạt
  • Nhấp vào lớp phủ sẽ đóng Phương thức
  • Nhấn

    components

    - mycomponent.jsx

    - mycomponent.css

    7 đóng Modal
  • Cuộn bị chặn trên các phần tử đằng sau phương thức
  • Phương thức được hiển thị trong một cổng thông tin được gắn vào cuối

    components

    - mycomponent.jsx

    - mycomponent.css

    8 để tách nó ra khỏi thứ tự nguồn và giúp dễ dàng thêm

    components

    - mycomponent.jsx

    - mycomponent.css

    9 vào các anh chị em của nó

Có thành phần đặc biệt

1import { Box } from "@chakra-ui/react";

2

3return (

4 <Box

5 backgroundColor="hotpink"

6 _hover={{

7 color: "lightgreen"

8 }}

9 >

10 This has a hotpink background.

11 Box>

12);

0 mà người dùng bình thường không nhìn thấy nhưng có thể truy cập được bằng trình đọc màn hình. Điều này hữu ích để cung cấp các chi tiết bổ sung cho nút biểu tượng hoặc hình ảnh mà người dùng khiếm thị không thể nhận biết được. Mặc dù điều này có thể đạt được với 10 dòng css, nhưng xin cảm ơn nhóm chakra vì đã nghĩ về nó và cung cấp nó như một thành phần 💯

Chế độ tối 🌗

Tất cả các thành phần giao diện người dùng luân xa đều tương thích với chế độ tối, màu sắc và kiểu mặc định có thể dễ dàng ghi đè

Với sự hỗ trợ và tài liệu tuyệt vời của cộng đồng, bạn có thể xây dựng các thành phần tuyệt vời chỉ với lượng thời gian tối thiểu

Chakra CSS là gì?

Giao diện người dùng Chakra là thư viện thành phần đơn giản, theo mô-đun và có thể truy cập cung cấp cho bạn các khối xây dựng cần thiết để xây dựng các ứng dụng React của mình .

Chakra CSS có trong JS không?

Giao diện người dùng Chakra sử dụng CSS-in-JS dưới vỏ bọc ( cảm xúc + hệ thống kiểu dáng ), tính linh hoạt này đi kèm với một mức giá nhỏ . Dấu chân thời gian chạy này là do tính toán kiểu của styled-system và tạo className theo cảm xúc.

Làm cách nào để thêm CSS vào luân xa?

Đính kèm các biến CSS . pass the cssVarsRoot prop to ChakraProvider and set its value to the css selector of the element you want.

Chakra UI có giống như Bootstrap không?

Bootstrap Styled thuộc danh mục "Khung công tác phía trước" của ngăn xếp công nghệ, trong khi Giao diện người dùng Chakra có thể được phân loại chủ yếu trong "Thành phần giao diện người dùng". Chakra UI is an open source tool with 10.1K GitHub stars and 669 GitHub forks.