Chuyển đổi các thành phần được tạo kiểu thành css

Thực hành trong khi bạn học với các tập tin bài tập

Tải xuống các tệp mà người hướng dẫn sử dụng để dạy khóa học. Theo dõi và học hỏi bằng cách xem, nghe và thực hành

Tải xuống các khóa học và học mọi lúc, mọi nơi

Xem các khóa học trên thiết bị di động của bạn mà không cần kết nối internet. Tải xuống các khóa học bằng ứng dụng LinkedIn Learning trên iOS hoặc Android của bạn

Tôi dày công nghiên cứu các hệ thống tạo kiểu javascript và tôi đã nhận thấy điều gì đó trong quá trình thử các công cụ khác nhau. Với tư cách là một nhóm, chúng tôi đã thực sự hiểu rõ về

  
    
      {'Home'}
    
    
      {'About'}
    
  
  
    
      {loggedIn ? username : 'Login/Register'}
    
  

Nhưng vì CSS (hoặc SCSS/LESS/etc) không hiển thị ngay lập tức từ bên trong thành phần React, thiết kế phải chạy trên một “luồng tinh thần” khác

Tất cả những ai đã từng dành thời gian viết CSS đều biết rằng đây là một vấn đề tầm thường trong các ứng dụng nhỏ, nhưng nếu không có sự thực thi mạnh mẽ của phương pháp CSS (BEM/SMACSS/v.v.), các biểu định kiểu sẽ tự nhiên trở nên khó đoán

Khi một ứng dụng mở rộng quy mô, việc xác định kiểu cần phải diễn ra bên trong phạm vi, giúp dễ dàng đưa ra tính đặc hiệu, điều này khiến bạn khó thêm kiểu mới hoặc cập nhật bất kỳ thứ gì hiện có mà không thêm vào tính đặc hiệu để tránh ảnh hưởng đến kiểu của một số ứng dụng. . Các kỹ sư nên xác định hiện tượng này là bình thường, vì tôi mới chỉ thấy một hoặc hai hệ thống kiểu dáng quy mô lớn thực sự đẹp. Cả hai đều là SCSS và cả hai đều ủng hộ việc hạn chế tính đặc hiệu và thúc đẩy khả năng sử dụng lại. Mọi hệ thống phong cách khác mà tôi từng thấy đều là một mớ hỗn độn và đó là bởi vì đó CHỈ LÀ CÁCH CSS LÀ

Điều làm cho việc chuyển đổi (hoặc bất kỳ) hệ thống CSS truyền thống nào của chúng tôi thành

  
    
      {'Home'}
    
    
      {'About'}
    
  
  
    
      {loggedIn ? username : 'Login/Register'}
    
  

  
    
      {'Home'}
    
    
      {'About'}
    
  
  
    
      {loggedIn ? username : 'Login/Register'}
    
  

Tôi đã xem xét hệ thống “khối” — nơi các thành phần được chia nhỏ thành. Một

  
    
      {'Home'}
    
    
      {'About'}
    
  
  
    
      {loggedIn ? username : 'Login/Register'}
    
  

  
    
      {'Home'}
    
    
      {'About'}
    
  
  
    
      {loggedIn ? username : 'Login/Register'}
    
  

  
    
      {'Home'}
    
    
      {'About'}
    
  
  
    
      {loggedIn ? username : 'Login/Register'}
    
  

// Block
// Element
// Element <-- modifier_A, modifier_B
// Element <-- modifier_Cconst Block = styled.div``
const Element = styled.div`
  font-size: ${props => { return props.size | '16px' }};
  color: ${props => { return props.color | 'rebeccapurple' }};
`
  
  
  
    {modifier_C}
  

Đây không phải là một khái niệm mới đối với các Thành phần JS (CSS có phương pháp tương tự), nhưng nó mang ý nghĩa mới khi được coi là một cấu trúc để tổ chức thiết kế được sử dụng lại trực tiếp bên trong javascript. Ý tưởng này phù hợp với việc nói chung là

  
    
      {'Home'}
    
    
      {'About'}
    
  
  
    
      {loggedIn ? username : 'Login/Register'}
    
  

Từ những gì tôi đang thấy, chúng tôi đang phải đối mặt với vấn đề về phong cách toàn cầu (chủ yếu là với bootstrap). Xóa tất cả các định nghĩa về kiểu nhưng để nguyên bootstrap và chúng tôi còn lại một ứng dụng chưa được tạo kiểu vẫn có

  
    
      {'Home'}
    
    
      {'About'}
    
  
  
    
      {loggedIn ? username : 'Login/Register'}
    
  

Câu hỏi chính của tôi là liệu chúng ta nên sử dụng gói lưới hay tự viết. Việc viết của riêng chúng tôi sẽ tương đối đơn giản, nhưng các lưới dựng sẵn đã trải qua khó khăn (đáng kể) để tìm ra các hệ thống điểm dừng và các biến thể, v.v.

Có những trường hợp không thể tránh khỏi khi thành phần

  
    
      {'Home'}
    
    
      {'About'}
    
  
  
    
      {loggedIn ? username : 'Login/Register'}
    
  

  
    
      {'Home'}
    
    
      {'About'}
    
  
  
    
      {loggedIn ? username : 'Login/Register'}
    
  

  
    
      {'Home'}
    
    
      {'About'}
    
  
  
    
      {loggedIn ? username : 'Login/Register'}
    
  

Trên hết,

  
    
      {'Home'}
    
    
      {'About'}
    
  
  
    
      {loggedIn ? username : 'Login/Register'}
    
  

  
    
      {'Home'}
    
    
      {'About'}
    
  
  
    
      {loggedIn ? username : 'Login/Register'}
    
  

  
    
      {'Home'}
    
    
      {'About'}
    
  
  
    
      {loggedIn ? username : 'Login/Register'}
    
  

Đây là một ví dụ về lý do tại sao việc xác định kiểu bên trong javascript lại tốt hơn CSS. Lấy ví dụ mã giả này của NavBar

  
    
      {'Home'}
    
    
      {'About'}
    
  
  
    
      {loggedIn ? username : 'Login/Register'}
    
  

Nếu bạn cần biết chính xác quy tắc kiểu dáng nào đang được áp dụng cho bất kỳ phần tử

  
    
      {'Home'}
    
    
      {'About'}
    
  
  
    
      {loggedIn ? username : 'Login/Register'}
    
  

Cập nhật

Đọc các bài báo và cân nhắc ưu và nhược điểm, tôi cứ bị mắc kẹt trong sự nhầm lẫn giữa việc sử dụng các lớp kiểu nguyên tử với kiểu dáng ở cấp độ thành phần với việc nhập các gói trợ giúp với việc chỉ tái cấu trúc sass…

Phạm vi lựa chọn và thiếu tiêu chuẩn ngành khiến việc phân tích cú pháp các tùy chọn trở nên khó khăn, đặc biệt là khi tiêu chuẩn ngành (css thông thường) quá tệ. Tâm trí tôi cứ quay trở lại với “chỉ viết hệ thống của riêng bạn”, cho đến khi các vấn đề như truy vấn phương tiện xuất hiện khi tâm trí tôi nói “hãy nhìn xem, đừng phát minh lại bánh xe, chỉ cần sử dụng gói ai đó đã viết. Nó hoạt động tốt. ”

Tôi luôn ngưỡng mộ khái niệm Tachyons, bởi vì nó cực kỳ đơn giản và có thể giảm một tệp nhập

  
    
      {'Home'}
    
    
      {'About'}
    
  
  
    
      {loggedIn ? username : 'Login/Register'}
    
  

  
    
      {'Home'}
    
    
      {'About'}
    
  
  
    
      {loggedIn ? username : 'Login/Register'}
    
  

Nhưng nó không giải quyết được vấn đề thành phần hóa, nó chỉ là một bản sửa lại css và nó làm cho phần đánh dấu trở nên thực sự xấu xí

Tuy nhiên, có thể kết hợp các triết lý và có khả năng tìm thấy một nền tảng trung gian khả thi. (tham khảo https. //liên kết. Trung bình. com/j7ErYuuE3R)

Tái tạo kiểu dáng cho một thành phần có thể trở nên trầm trọng hơn khi nó chỉ cần các đạo cụ bố cục hơi khác một chút. Một giải pháp là rất rõ ràng bên trong định nghĩa thành phần được tạo kiểu tính toán cho các trường hợp bên lề phát sinh (khi Span cần có màu đỏ ifError)

Nhưng khi một Span duy nhất thực sự rất cần lề phải là 10px, việc cập nhật định nghĩa theo kiểu sẽ cảm thấy nặng nề và tăng thêm độ phức tạp đáng kể

Giải pháp được ghi lại ở đây rất hấp dẫn và khả thi. https. // liên kết. Trung bình. com/j7ErYuuE3R

Tác giả đề nghị kết hợp một thư viện tiện ích css className (tachyons trong trường hợp này) với các thành phần theo kiểu

Hai đoạn mã sau có thể được kết hợp để tạo ra một hệ thống rất mạnh mẽ, trong đó phần tử có thể được xác định dễ dàng bằng cách sử dụng một bộ kiểu mặc định, sau đó được cập nhật nhanh chóng bằng thư viện tiện ích khi Span cần

  
    
      {'Home'}
    
    
      {'About'}
    
  
  
    
      {loggedIn ? username : 'Login/Register'}
    
  

  
    
      {'Home'}
    
    
      {'About'}
    
  
  
    
      {loggedIn ? username : 'Login/Register'}
    
  

Có một giải pháp hiện có thanh lịch, giảm độ phức tạp, có thể mở rộng và dễ học. Tôi chỉ cần tìm ra nó là gì