Bạn có biết rằng hơn 97% trang web sử dụng CSS để tạo kiểu?
Cascading Style Sheets (CSS) cho phép các nhà phát triển tạo các trang web đẹp mắt, có thể quét được và được trình bày tốt.
Ngôn ngữ CSS xác định cách trình bày tài liệu cho người dùng. Trong trường hợp này, tài liệu là một tệp được viết bằng ngôn ngữ đánh dấu như XML hoặc HTML.
Tạo kiểu trong React là gì?
Sự đơn giản trong việc tạo, chạy và bảo trì ứng dụng React là lý do chính khiến nó trở nên phổ biến. React là một thư viện JavaScript, không phải một framework, cung cấp nhiều thứ hơn là chỉ các hàm và đoạn mã được viết sẵn.
Tính sẵn có của các thành phần có thể tái sử dụng, tính linh hoạt, độ ổn định mã, tốc độ và hiệu quả của nó chỉ là một số lý do khiến React được xếp hạng cao trong số các khung và thư viện JavaScript.
Tạo kiểu trong React là quá trình tạo các phần tử ứng dụng React hấp dẫn trực quan bằng CSS. Tuy nhiên, điều đáng chú ý là React sử dụng JSX (JavaScript và XML) thay vì HTML làm ngôn ngữ đánh dấu. Một trong những khác biệt chính là HTML sử dụng .class để biểu thị các lớp trong khi JSX sử dụng .ClassName để biểu thị giống nhau.
Tại sao bạn nên tạo kiểu cho React bằng CSS?
- Làm cho ứng dụng của bạn phản hồi nhanh. Các ứng dụng web hiện đại có thể truy cập được trên cả màn hình nhỏ và lớn. CSS cho phép bạn sử dụng truy vấn phương tiện trong ứng dụng React của mình và điều chỉnh nó cho phù hợp với các kích thước màn hình khác nhau.
- Đẩy nhanh quá trình phát triển. Bạn có thể sử dụng cùng một quy tắc CSS trong một số thành phần của ứng dụng React của mình.
- Làm cho ứng dụng React của bạn dễ bảo trì. Thật dễ dàng thực hiện các thay đổi về giao diện của các thành phần/bộ phận cụ thể của ứng dụng bằng CSS.
- Cải thiện trải nghiệm người dùng. CSS cho phép định dạng thân thiện với người dùng. Phản ứng bằng văn bản và các nút ở những vị trí hợp lý rất dễ điều hướng và sử dụng.
Có một số cách tiếp cận mà các nhà phát triển có thể sử dụng để tạo kiểu cho ứng dụng React của họ. Dưới đây là một số phổ biến nhất;
Viết kiểu nội tuyến
Kiểu nội tuyến là cách tiếp cận dễ dàng nhất để tạo kiểu cho ứng dụng React vì người dùng không cần tạo biểu định kiểu bên ngoài. Kiểu CSS được áp dụng trực tiếp vào mã React.
Lưu ý rằng các kiểu dựng sẵn có mức độ ưu tiên cao hơn các kiểu khác. Vì vậy, nếu bạn có một biểu định kiểu bên ngoài với một số định dạng, nó sẽ bị ghi đè bởi kiểu nội tuyến.
Đây là minh chứng cho phong cách được tích hợp trong ứng dụng React.
import React from 'react';
import ReactDOM from 'react-dom/client';
const Header = () => {
return (
<>
<h1 style={{backgroundColor: "lightblue"}}>Hello World!!!!!</h1>
<h2>Add a little style!</h2>
</>
);
}
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Header />);Mục hiển thị sẽ hiển thị h1 với nền màu xanh nhạt.
Lợi ích của việc tạo kiểu nội tuyến
- Nhanh. Đây là cách tiếp cận đơn giản nhất vì bạn thêm kiểu trực tiếp vào thẻ bạn muốn tạo kiểu.
- Anh ấy có những sở thích tuyệt vời. Kiểu nội tuyến ghi đè các biểu định kiểu bên ngoài. Bằng cách này, bạn có thể sử dụng nó để tập trung vào một chức năng cụ thể mà không cần thay đổi toàn bộ ứng dụng.
- Tuyệt vời cho việc tạo mẫu. Bạn có thể sử dụng kiểu nội tuyến để kiểm tra chức năng trước khi kết hợp định dạng vào biểu định kiểu bên ngoài.
Nhược điểm của phong cách nội tuyến
- Nó có thể nhàm chán. Tạo kiểu trực tiếp cho từng thẻ rất tốn thời gian.
- Giới hạn. Bạn không thể sử dụng các tính năng CSS như bộ chọn và hình động với kiểu nội tuyến.
- Nhiều kiểu dựng sẵn làm cho mã JSX không thể đọc được.
Nhập biểu định kiểu bên ngoài
Bạn có thể viết CSS vào một tệp bên ngoài và nhập nó vào ứng dụng React của mình. Cách tiếp cận này có thể được so sánh với việc nhập tệp CSS vào thẻ
tài liệu.
Để đạt được điều này, bạn cần tạo một tệp CSS trong thư mục ứng dụng của mình, nhập nó vào thành phần đích và viết các quy tắc kiểu cho ứng dụng của bạn.
Để minh họa cách hoạt động của các biểu định kiểu CSS bên ngoài, bạn có thể tạo một tệp CSS và đặt tên là App.css. Sau đó, bạn có thể xuất nó như sau.
import { React } from "react";
import "./Components/App.css";
function App() {
return (
<div className="main">
</div>
);
}
export default App;Đoạn mã ở trên nhập biểu định kiểu bên ngoài vào thành phần App.js. Tệp App.css nằm trong thư mục Thành phần.
Ưu điểm của CSS style sheet bên ngoài
- Có thể tái sử dụng. Bạn có thể sử dụng cùng một quy tắc CSS trong các thành phần khác nhau trong ứng dụng React.
- Làm cho mã dễ đọc hơn. Việc hiểu mã rất dễ dàng khi bạn sử dụng bảng định kiểu bên ngoài.
- Cấp quyền truy cập vào các tính năng CSS nâng cao. Bạn có thể sử dụng các lớp giả và bộ chọn nâng cao khi sử dụng các biểu định kiểu bên ngoài.
Với các bảng định kiểu CSS bên ngoài
- Yêu cầu quy ước đặt tên đáng tin cậy để đảm bảo kiểu không bị ghi đè.
Sử dụng các mô-đun CSS
Ứng dụng React có thể trở nên thực sự lớn. Tên hoạt ảnh CSS và tên lớp theo mặc định là tên chung. Cài đặt này có thể gây rắc rối cho các biểu định kiểu lớn vì một kiểu có thể ghi đè lên kiểu khác.
Các mô-đun CSS giải quyết thách thức này bằng cách chỉ định cục bộ phạm vi hoạt ảnh và tên lớp. Cách tiếp cận này đảm bảo rằng tên lớp chỉ có sẵn trong tệp/thành phần khi cần thiết. Mỗi tên lớp được đặt một tên lập trình duy nhất để tránh xung đột.
Để triển khai các mô-đun CSS, hãy tạo một tệp có phần mở rộng .module.css. Nếu bạn muốn đặt tên cho biểu định kiểu của mình một kiểu, tên tệp sẽ là style.module.css.
Nhập tệp đã tạo vào thành phần React của bạn và bạn đã sẵn sàng bắt đầu.
Tệp CSS của bạn có thể trông giống như thế này;
/* styles.module.css */
.font {
color: #f00;
font-size: 30px;
}Bạn có thể nhập mô-đun CSS vào tệp App.js như sau;
import { React } from "react";
import styles from "./styles.module.css";
function App() {
return (
<h1 className={styles.heading}>Hello newsblog.pl reader</h1>
);
}
export default App;Ưu điểm của việc sử dụng các mô-đun CSS
- Dễ dàng tích hợp với SCSS và CSS
- Tránh xung đột tên lớp
Nhược điểm của việc sử dụng mô-đun CSS
- Việc tham chiếu tên lớp bằng các mô-đun CSS có thể gây nhầm lẫn cho người mới bắt đầu.
Sử dụng các thành phần theo kiểu
Các thành phần cách điệu cho phép nhà phát triển tạo các thành phần bằng CSS trong mã JavaScript. Thành phần được tạo kiểu hoạt động giống như thành phần React đi kèm với các kiểu. Các thành phần được cách điệu hóa mang lại kiểu dáng năng động và tên lớp độc đáo.
Để bắt đầu sử dụng các thành phần được tạo kiểu, bạn có thể cài đặt gói trong thư mục gốc bằng lệnh này;
npm install styled-components
Bước tiếp theo là nhập các thành phần được tạo kiểu vào ứng dụng React của bạn
Dưới đây là một đoạn tệp App.js sử dụng Thành phần được tạo kiểu;
import { React } from "react";
import styled from "styled-components";
function App() {
const Wrapper = styled.div`
width: 80%;
height: 120px;
background-color: lightblue;
display: block;
`;
return <Wrapper />;
}
export default App;Ứng dụng được kết xuất sẽ có các kiểu trên được nhập từ Thành phần được tạo kiểu.
Ưu điểm của các thành phần cách điệu
- Nó có thể dự đoán được. Các kiểu trong phương pháp tạo kiểu này được lồng trong các thành phần riêng lẻ.
- Bạn không cần phải tập trung vào quy ước đặt tên cho các lớp của mình. Chỉ cần viết phong cách của bạn và gói sẽ làm phần còn lại.
- Các thành phần cách điệu có thể được xuất dưới dạng đạo cụ. Các thành phần cách điệu chuyển đổi CSS đơn giản thành các thành phần React. Bằng cách này, bạn có thể sử dụng lại mã đó, mở rộng kiểu bằng đạo cụ và xuất.
Con thành phần cách điệu
- Để bắt đầu, bạn cần cài đặt thư viện của bên thứ ba.
Bảng định kiểu có cú pháp tuyệt vời (SASS/SCSS)
SASS bao gồm các công cụ và tính năng mạnh mẽ hơn mà CSS thông thường thiếu. Bạn có thể viết kiểu theo hai kiểu khác nhau được hướng dẫn bởi các tiện ích mở rộng này; .scss và .sass.
Cú pháp SASS tương tự như cú pháp CSS thông thường. Tuy nhiên, dấu ngoặc mở và đóng không cần thiết khi viết quy tắc kiểu trong SASS.
Một đoạn SASS đơn giản sẽ xuất hiện như sau;
nav ul margin-right: 20px padding: 0 list-style: list li display: block a display: block padding: 6px 12px text-decoration: underline nav
Để bắt đầu sử dụng SASS trong ứng dụng React, trước tiên bạn cần biên dịch SASS thành CSS đơn giản. Sau khi thiết lập ứng dụng của mình bằng Tạo ứng dụng React, bạn có thể cài đặt node-sass để xử lý bản dựng.
npm install node-sass
Sau đó, bạn có thể tạo các tệp của mình và cung cấp cho chúng phần mở rộng .scss hoặc .sass. Sau đó, bạn có thể nhập tệp của mình như bình thường. Ví dụ;
import "./Components/App.sass";
Ưu điểm của SASS/SCSS
- Nó bao gồm nhiều tính năng động như mixins, lồng và mở rộng.
- Bạn không có nhiều mẫu để viết mã CSS khi sử dụng SASS/SCSS
Nhược điểm của SASS/SCSS
- Kiểu có tính chất chung nên bạn có thể gặp phải các vấn đề quan trọng hơn.
Phương pháp tạo kiểu nào là tốt nhất?
Vì chúng tôi đã đề cập đến năm cách tiếp cận nên bạn muốn biết cách nào là tốt nhất. Thật khó để xác định người chiến thắng rõ ràng trong cuộc thảo luận này. Tuy nhiên, những cân nhắc này sẽ giúp bạn đưa ra quyết định sáng suốt:
- Số liệu hiệu suất
- Cho dù bạn cần một hệ thống thiết kế
- Dễ dàng tối ưu hóa mã
Kiểu dáng nội tuyến phù hợp khi bạn có một ứng dụng đơn giản với một vài dòng mã. Tuy nhiên, tất cả những người khác; bên ngoài, SASS, các thành phần được tạo kiểu và mô-đun CSS phù hợp cho các ứng dụng lớn.
Các phương pháp hay nhất để duy trì CSS trong ứng dụng React lớn là gì?
- Tránh tạo kiểu đường nét. Viết các kiểu CSS nội tuyến cho mỗi thẻ trong một ứng dụng React lớn có thể rất mệt mỏi. Thay vào đó, hãy sử dụng biểu định kiểu bên ngoài phù hợp với nhu cầu của bạn.
- Dán mã của bạn. Linters như Stylelint sẽ làm nổi bật các lỗi về văn phong trong mã của bạn để bạn có thể sửa chúng sớm hơn.
- Xem lại mã thường xuyên. Viết CSS nghe có vẻ thú vị, nhưng việc đánh giá mã thường xuyên giúp bạn sớm phát hiện lỗi dễ dàng hơn.
- Tự động kiểm tra các tệp CSS của bạn. Enzyme và Đây là những công cụ tuyệt vời mà bạn có thể sử dụng để tự động kiểm tra mã CSS của mình.
- Giữ mã của bạn KHÔ. đối với các kiểu thường được sử dụng như màu sắc và lề, hãy sử dụng các biến và lớp tiện ích theo nguyên tắc Đừng lặp lại chính mình (DRY).
- Sử dụng các quy ước đặt tên như Công cụ sửa đổi phần tử khối. Cách tiếp cận này giúp việc viết các lớp CSS dễ hiểu và dễ sử dụng hơn.
Ứng dụng
Trên đây là một số cách tạo kiểu cho React. Việc lựa chọn cách tiếp cận kiểu dáng sẽ phụ thuộc vào nhu cầu, kỹ năng và sở thích của bạn. Bạn thậm chí có thể kết hợp một số cách tiếp cận tạo kiểu trong ứng dụng React, chẳng hạn như bảng định kiểu nội tuyến và bên ngoài.
Bạn cũng có thể xem các khung và thư viện CSS tốt nhất dành cho nhà phát triển giao diện người dùng.
