Tại sao chúng tôi ngừng sử dụng CSS

CSS không phải lúc nào cũng là một phần quan trọng trong phát triển web. Trước khi CSS phổ biến, nhiều công ty có trang web xấu xí và không thể truy cập được. Trong suốt những năm qua, web đã phát triển, các khuôn khổ mới được tạo ra, JavaScript được củng cố làm ngôn ngữ lập trình chính cho web, các nhà phát triển đang cải thiện các kỹ năng giao diện người dùng của họ. Bây giờ, chúng tôi có rất nhiều khái niệm để tạo kiểu cho trang web

Rất nhiều lập trình viên sẽ nhớ lại khoảng thời gian chúng ta từng làm rất nhiều việc với HTML và CSS. Chúng tôi đã phải tạo ra một sự riêng biệt. css, hãy liên kết tệp CSS mới của chúng tôi bằng cách sử dụng thẻ liên kết trong tài liệu HTML của chúng tôi và sau đó, chúng tôi đã tạo kiểu CSS hoạt động tốt

Tạo kiểu cho các ứng dụng của chúng tôi bằng CSS đôi khi là một công việc đầy thách thức. Chúng tôi không có nhiều tính năng CSS mới và trình duyệt không hỗ trợ nhiều tính năng mới. Bạn có tưởng tượng mình phải sử dụng

.container_4xks92k2kl {
  width: 400px;
  height: 400px;
  background-color: blue;
}

1 và

.container_4xks92k2kl {
  width: 400px;
  height: 400px;
  background-color: blue;
}

2 để định vị các phần tử không?

Điều đó ban đầu khá khó hiểu đối với một số nhà phát triển, nhưng rất nhiều thứ đã thay đổi trong vài năm qua và kiểu dáng CSS là một trong số đó. React là thư viện JavaScript được sử dụng nhiều nhất cho các ứng dụng hiện đại và đã mang đến rất nhiều ý tưởng và khái niệm mới để tạo kiểu cho các ứng dụng của chúng tôi

Kiểu dáng CSS trong React

Trong hệ sinh thái React, chúng tôi có rất nhiều thư viện khác nhau cho các mục đích khác nhau và trong phần tạo kiểu của giao diện người dùng cũng vậy, chúng tôi có rất nhiều thư viện và khái niệm để tạo kiểu cho các ứng dụng React của mình. Đây là một trong những cách được sử dụng nhiều nhất để tạo kiểu cho ứng dụng React

mô-đun CSS

Một vài năm trở lại đây, rất nhiều nhà phát triển đã sử dụng và ủng hộ việc sử dụng kiểu dáng của các mô-đun CSS trong cộng đồng React. Với các Mô-đun CSS, theo mặc định, tất cả các tên lớp và hoạt ảnh của bạn được đặt trong phạm vi cục bộ, nó hoạt động khá giống với cách tạo kiểu cũ trong tài liệu HTML. Đây là một ví dụ

.container {
  width: 400px;
  height: 400px;
  background-color: blue;
}

Một mô-đun chỉ là một đơn giản. css và nó hiển thị thành HTML bằng tên lớp CSS động, toàn bộ ý tưởng của khái niệm này là để tránh xung đột tên hoặc ảnh hưởng đến kiểu của các thành phần khác trong ứng dụng của chúng tôi

.container_4xks92k2kl {
  width: 400px;
  height: 400px;
  background-color: blue;
}

CSS-in-JS

Xu hướng tạo style cho các ứng dụng React ngày nay là CSS-in-JS, chúng ta có rất nhiều thư viện nổi tiếng để làm điều đó như styled-components, Emotion, Radium, v.v. Một điều mà bạn nên biết về CSS-in-JS là CSS-in-JS không phải là một thư viện cụ thể, đó là một khái niệm cố gắng giải quyết vấn đề về kiểu dáng trong các ứng dụng React

Vì React là tất cả về các thành phần, tại sao không sử dụng nó để tạo kiểu cho các thành phần của chúng ta?

import styled from "styled-components";

const Button = styled.button`
  width: 200px;
  height: 40px;
  background-color: green;
  border-radius: 6px;
`;    

Bây giờ, hãy nói về cách được sử dụng nhiều nhất để tạo kiểu cho các ứng dụng React, tại sao khái niệm này không phải là một ý tưởng hay cho các ứng dụng của bạn và tại sao bạn không nên sử dụng nó

Tạo kiểu nội tuyến trong React

Tạo kiểu nội tuyến là một trong những cách phổ biến nhất để tạo kiểu cho các ứng dụng React, rất nhiều nhà phát triển bắt đầu sử dụng khái niệm này khi họ bắt đầu một ứng dụng mới vì ban đầu nó rất dễ hiểu và bạn có thể đạt được kết quả cuối cùng giống như bạn . Một trong những lý do khiến kiểu dáng nội tuyến rất nổi tiếng và được sử dụng là bởi vì khi một nhà phát triển mới bắt đầu học React, họ có thể sẽ bắt đầu với khái niệm kiểu dáng nội tuyến

Chúng tôi cũng có thể sử dụng kiểu dáng nội tuyến trong các tài liệu HTML đơn giản. Nếu bạn muốn kiểm tra nó, chỉ cần tạo một tài liệu HTML đơn giản và tạo một thuộc tính kiểu trong phần tử mà bạn muốn tạo kiểu. Trong các tài liệu HTML thuần túy, thuộc tính style này nhận một chuỗi và bên trong chuỗi đó, chúng ta có thể chuyển các thuộc tính CSS của mình, như thế này

My Button

Trong một tài liệu HTML đơn giản, loại mà thuộc tính style mong đợi là một chuỗi, hơi khác một chút so với React

Tạo kiểu nội tuyến trong React khá đơn giản, tất cả những gì bạn cần làm là tạo một đối tượng và bên trong đối tượng đó, bạn chuyển các thuộc tính CSS mà bạn muốn

const styles = {
  width: 200,
  height: 50,
  backgroundColor: 'red'
};

Các thuộc tính trong đối tượng kiểu của chúng ta phải là kiểu camelCase, đây là thứ liên quan đến ngôn ngữ JavaScript, chúng ta không thể có kebab-case vì nó không hoạt động với quy tắc cú pháp

Bây giờ, chúng ta có thể truyền đối tượng

.container_4xks92k2kl {
  width: 400px;
  height: 400px;
  background-color: blue;
}

3 này cho phần tử của mình. Mỗi phần tử trong React có một thuộc tính kiểu, tương tự như mỗi tài liệu HTML, nhưng trong trường hợp này, các thuộc tính kiểu cần một đối tượng. Đây là cách chúng ta có thể sử dụng kiểu nội tuyến trong React

________số 8_______

Khi bạn đang sử dụng kiểu dáng nội tuyến trong React, bạn không cần chuyển một đơn vị cho một thuộc tính trong CSS, bạn chỉ có thể chuyển một số và React sẽ tự động thêm px vào thuộc tính kiểu nội tuyến số của bạn

Tuy nhiên, chúng tôi gặp một số vấn đề với kiểu nội tuyến trong React, đặc biệt nếu bạn đang làm việc trong một ứng dụng lớn và có nhiều thành phần được sử dụng lại. Ngay cả khi bạn không làm việc trong một ứng dụng lớn, nhưng cuối cùng bạn sẽ bắt đầu cảm thấy một số nhược điểm của kiểu dáng nội tuyến trong bài đăng này

---

Hơn 200 nghìn nhà phát triển sử dụng LogRocket để tạo ra trải nghiệm kỹ thuật số tốt hơn

Tìm hiểu thêm →

---

Vấn đề với kiểu dáng nội tuyến là gì?

Chúng tôi biết rằng kiểu dáng nội tuyến hoạt động rất tốt khi chúng tôi bắt đầu một ứng dụng mới và chúng tôi có thể áp dụng nó ở mọi nơi chúng tôi muốn trong mã của mình. Nhưng nếu khái niệm này hoạt động tốt, tại sao chúng ta nên ngừng sử dụng nó?

Khái niệm kiểu dáng nội tuyến có thể không giúp bạn xây dựng các thành phần React tốt nhất trong ứng dụng của mình. Nếu bạn đang dự định xây dựng một kiểu dáng nội tuyến ứng dụng rất hiệu quả, có thể mở rộng và phong phú thì đây không phải là lựa chọn phù hợp với bạn

tính năng CSS

Một trong những lý do chính khiến kiểu dáng nội tuyến không phải là lựa chọn tốt cho ứng dụng của bạn là vì nó không hỗ trợ (hoặc hỗ trợ thực sự kém) cho các tính năng CSS

Mọi ứng dụng ngày nay có thể phải kết thúc bằng cách sử dụng một số bộ chọn, chẳng hạn như

.container_4xks92k2kl {
  width: 400px;
  height: 400px;
  background-color: blue;
}

4,

.container_4xks92k2kl {
  width: 400px;
  height: 400px;
  background-color: blue;
}

5,

.container_4xks92k2kl {
  width: 400px;
  height: 400px;
  background-color: blue;
}

6, v.v. Làm thế nào chúng ta có thể đạt được hành vi tương tự với kiểu dáng nội tuyến?

Sử dụng thư viện CSS-in-JS, bạn có thể đạt được nó rất dễ dàng như thế này

const StyledButton = styled.button`
  width: 200px;
  height: 50px;
  background-color: red;
  &:hover {
    background-color: blue;
  }
`;

const App = () => {
  return (
    
      My Button
    
  )
};

Nếu bạn không định sử dụng CSS-in-JS để làm điều đó thì cuối cùng bạn sẽ phải viết rất nhiều mã, thậm chí có thể sử dụng trạng thái để mô phỏng di chuột trong phần tử. Đây là một trong những điểm nhức nhối nhất về kiểu dáng nội tuyến và đây là lý do chính tại sao bạn nên xem xét chuyển khỏi kiểu dáng nội tuyến trong các ứng dụng của mình

đạo cụ

Đôi khi, khi chúng tôi đang xây dựng các thành phần React của mình, chúng tôi muốn đạt được mức độ sử dụng lại thành phần tốt, đôi khi chúng tôi sẽ gặp phải một số tình huống mà chúng tôi sẽ cần phải thay đổi một thuộc tính cụ thể của thành phần CSS của mình. Hãy tưởng tượng rằng chúng ta có một nút và

.container_4xks92k2kl {
  width: 400px;
  height: 400px;
  background-color: blue;
}

8 mặc định của nút này là màu đỏ

const Button = () => {
  return (
    
        My Button
    
  );
};

Nhưng, nếu tôi muốn sử dụng cùng một nút, nhưng trong trường hợp này, tôi muốn thay đổi

.container_4xks92k2kl {
  width: 400px;
  height: 400px;
  background-color: blue;
}

8 thành màu xanh lục thì sao?

Cuối cùng, chúng tôi có thể phải sử dụng các câu lệnh bậc ba JavaScript, đây không phải là ý kiến ​​hay vì nó sẽ khiến mã của chúng tôi nặng hơn, khó hiểu và tăng kích thước thành phần

const Button = ({ green }) => {
  return (
    
        My Button
    
  );
};

Chúng tôi có thể đồng ý rằng mã này trông không đẹp. Chúng ta phải sử dụng câu lệnh ternary JavaScript để chỉ thay đổi một thuộc tính của kiểu nút, hãy tưởng tượng nếu chúng ta có một thành phần phức tạp với 20 thuộc tính có thể thay đổi?

---

Các bài viết hay khác từ LogRocket

• Đừng bỏ lỡ một khoảnh khắc nào với The Replay, một bản tin được tuyển chọn từ LogRocket
• Tìm hiểu cách Galileo của LogRocket loại bỏ tiếng ồn để chủ động giải quyết các sự cố trong ứng dụng của bạn
• Sử dụng useEffect của React để tối ưu hóa hiệu suất ứng dụng của bạn
• Chuyển đổi giữa nhiều phiên bản của Node
• Khám phá cách tạo hoạt ảnh cho ứng dụng React của bạn với AnimXYZ
• Khám phá Tauri, một khuôn khổ mới để xây dựng các tệp nhị phân
• So sánh NestJS với. Thể hiện. js

---

Mặt khác, trong các thư viện CSS-in-JS, tất cả những gì chúng ta phải làm là chuyển thuộc tính cho kiểu của chúng ta và nó sẽ thay đổi tùy thuộc vào giá trị của chỗ dựa, như thế này

const StyledButton = styled.button`
  width: 200px;
  height: 50px;
  background-color: ${({ backgroundColor }) => backgroundColor};
`;

const App = () => {
  return (
    
      My Button
    
  )
};

Truy vấn phương tiện truyền thông

Ngày nay, một hành vi mặc định là các ứng dụng hỗ trợ thiết bị di động, vì vậy bạn sẽ có rất nhiều truy vấn phương tiện trong ứng dụng của mình

Tuy nhiên, nếu bạn đang sử dụng kiểu dáng nội tuyến, bạn không thể sử dụng truy vấn phương tiện vì nó không hỗ trợ nó. Hãy nhớ rằng, bạn đang sử dụng một đối tượng JavaScript đơn giản để chuyển đến phần tử của mình, làm cách nào bạn có thể sử dụng truy vấn phương tiện?

Bạn có thể sử dụng nó bằng cách tạo một số chức năng tùy chỉnh để có được kích thước cửa sổ chiều rộng thực tế, như thế này

.container_4xks92k2kl {
  width: 400px;
  height: 400px;
  background-color: blue;
}

0

Nhưng hãy tưởng tượng về lâu dài, hãy tưởng tượng nếu bạn cần hỗ trợ năm truy vấn phương tiện khác nhau, mã của bạn sẽ trông như thế nào? . Ngoài ra, bạn sẽ phải tạo rất nhiều đối tượng

.container_4xks92k2kl {
  width: 400px;
  height: 400px;
  background-color: blue;
}

3 chỉ để xử lý tất cả các truy vấn phương tiện

khả năng mở rộng

Hãy tưởng tượng một ứng dụng phải tiếp cận hàng triệu người dùng mỗi ngày. Bạn sẽ kết thúc trong một ứng dụng có hàng tá thành phần và kiểu dáng nội tuyến có thể làm chậm bạn và đồng nghiệp của bạn một chút để tạo các thành phần mới hoặc duy trì những thành phần đã tồn tại

Nếu bạn vẫn đang sử dụng một số thành phần tạo kiểu nội tuyến trong ứng dụng của mình và nếu hiện tại chúng đang hoạt động tốt, thì bạn có thể gắn bó với khái niệm này một thời gian. Mục đích ở đây là để cho bạn thấy lý do tại sao ứng dụng của bạn sẽ không hoạt động hiệu quả và có thể mở rộng trong thời gian dài

Một trong những công việc của các nhà phát triển là cố gắng tìm ra giải pháp hiệu quả nhất, không mất nhiều thời gian để triển khai và cũng giúp xây dựng một ứng dụng mạnh mẽ, linh hoạt trong dài hạn.

Phần kết luận

Trong bài viết này, chúng ta đã tìm hiểu về một số cách để tạo kiểu cho ứng dụng React, chúng ta đã tìm hiểu thêm về khái niệm tạo kiểu nội tuyến trong React và lý do tại sao chúng ta không nên sử dụng khái niệm này nếu chúng ta dự định có một ứng dụng hiệu quả và có thể mở rộng

Nhật KýTên Lửa. Khả năng hiển thị đầy đủ vào các ứng dụng React sản xuất của bạn

Gỡ lỗi ứng dụng React có thể khó khăn, đặc biệt khi người dùng gặp sự cố khó tái tạo. Nếu bạn quan tâm đến việc giám sát và theo dõi trạng thái Redux, tự động hiển thị các lỗi JavaScript và theo dõi các yêu cầu mạng chậm và thời gian tải thành phần, hãy thử LogRocket.

LogRocket kết hợp tính năng phát lại phiên, phân tích sản phẩm và theo dõi lỗi – trao quyền cho các nhóm phần mềm để tạo ra trải nghiệm sản phẩm di động và web lý tưởng. Điều đó có ý nghĩa gì đối với bạn?

Thay vì đoán tại sao xảy ra lỗi hoặc yêu cầu người dùng chụp ảnh màn hình và kết xuất nhật ký, LogRocket cho phép bạn phát lại các sự cố như thể chúng đã xảy ra trong trình duyệt của chính bạn để nhanh chóng hiểu điều gì đã xảy ra.

Không còn cảnh báo ồn ào. Tính năng theo dõi lỗi thông minh cho phép bạn phân loại và phân loại các sự cố, sau đó học hỏi từ điều này. Nhận thông báo về các sự cố có ảnh hưởng đến người dùng, không phải thông báo sai. Ít cảnh báo hơn, nhiều tín hiệu hữu ích hơn

Gói phần mềm trung gian LogRocket Redux thêm một lớp khả năng hiển thị bổ sung vào các phiên người dùng của bạn. LogRocket ghi lại tất cả các hành động và trạng thái từ các cửa hàng Redux của bạn

Tại sao CSS không được áp dụng?

Tại sao CSS được tách ra khỏi HTML?

Tại sao CSS lại là một mớ hỗn độn như vậy?

CSS có còn được sử dụng không?