Cảm xúc/css 2024

Xem Cảm xúc/css 2024

[Chỉnh sửa. Kể từ phiên bản 4, styled-components cũng hỗ trợ css prop, vì vậy hãy xem xét thêm bài viết này về các lựa chọn api — css prop so với api thành phần được tạo kiểu và lý do bạn nên sử dụng cái cũ]

Tôi đã viết css cho web theo mọi cách có thể tưởng tượng được. Tôi đã sử dụng các mô-đun css, bộ tiền xử lý bao gồm Sass, Less và Stylus, BEM, css chức năng (sử dụng Tachyons) và tôi đã sử dụng nhiều thư viện CSS-in-JS bao gồm Styled-components và biểu định kiểu gốc phản ứng. Tôi đã thử tất cả những điều này và sử dụng css prop của Emotion dễ dàng là sở thích của tôi. Tôi sẽ cố gắng giải thích tại sao

Cảm xúc vs Styled-thành phần

Giả sử rằng bạn đã sử dụng CSS-in-JS bandwagon. Nếu không, bạn nên đọc nhiều bài viết và video hay về lợi ích của việc viết css trong Javascript

Nhiệm vụ chính của tôi ở đây là tranh luận rằng sử dụng Emotion là thư viện tốt nhất để tạo kiểu cho ứng dụng của bạn. Trên thực tế, Emotion chia sẻ nhiều điều với người khổng lồ khác trong lĩnh vực CSS-in-JS, Styled-components. Nó thậm chí còn hiển thị một api styled về cơ bản bắt chước cách thức hoạt động của các thành phần kiểu dáng. Nhưng khi so sánh hai thư viện, tôi thực sự đang so sánh hai tùy chọn riêng biệt để tạo kiểu cho các thành phần của bạn

Một là cách styled-components

import styled from 'styled-components' const Button = styled.button` 
  background: #08e; 
  color: white; 
  padding: 6px 10px; 
  border: none;
` function Example() { 
 return ( 
  
  
      
  
 
 ) 
}

Các thành phần được tạo kiểu sử dụng API kiểu

import { css, jsx } from '@emotion/core' const Button = props => ( 
     css={{ 
    background: '#08e', 
    color: 'white', 
    padding: '6px 10px', 
    border: 'none'
   }} 
   {...props} 
 /> 
) function Example() { 
  return ( 
    
  
          
    
 
  ) 
}

0 kết hợp với các ký tự mẫu để tạo các nút có kiểu. Bạn có thể thấy lý do tại sao nó phổ biến. Với những ví dụ như thế này, đó là một API đẹp

Ngược lại, với Emotion, chúng ta có thể thêm các kiểu vào một phần tử bằng cách sử dụng giá đỡ

import { css, jsx } from '@emotion/core' const Button = props => ( 
     css={{ 
    background: '#08e', 
    color: 'white', 
    padding: '6px 10px', 
    border: 'none'
   }} 
   {...props} 
 /> 
) function Example() { 
  return ( 
    
  
          
    
 
  ) 
}

1 giống như bạn sử dụng giá đỡ

import { css, jsx } from '@emotion/core' const Button = props => ( 
     css={{ 
    background: '#08e', 
    color: 'white', 
    padding: '6px 10px', 
    border: 'none'
   }} 
   {...props} 
 /> 
) function Example() { 
  return ( 
    
  
          
    
 
  ) 
}

2

import { css, jsx } from '@emotion/core' const Button = props => ( 
     css={{ 
    background: '#08e', 
    color: 'white', 
    padding: '6px 10px', 
    border: 'none'
   }} 
   {...props} 
 /> 
) function Example() { 
  return ( 
    
  
          
    
 
  ) 
}

Thoạt nhìn, ví dụ về styled-component có vẻ thanh lịch hơn. Nhưng tôi nhận thấy rằng về lâu dài, tôi thường thích api kiểu

import { css, jsx } from '@emotion/core' const Button = props => ( 
     css={{ 
    background: '#08e', 
    color: 'white', 
    padding: '6px 10px', 
    border: 'none'
   }} 
   {...props} 
 /> 
) function Example() { 
  return ( 
    
  
          
    
 
  ) 
}

1 hơn vì những lý do sau

Bạn vẫn đang viết các React component thông thường

Đặc biệt khi làm việc với TypeScript, tôi thấy điều này có lợi. Bạn nhập một thành phần

import { css, jsx } from '@emotion/core' const Button = props => ( 
     css={{ 
    background: '#08e', 
    color: 'white', 
    padding: '6px 10px', 
    border: 'none'
   }} 
   {...props} 
 /> 
) function Example() { 
  return ( 
    
  
          
    
 
  ) 
}

0 giống như bạn làm với một thành phần React thông thường, cho phép bạn chỉ định rõ ràng những đạo cụ nào được chấp nhận. Do đó, bạn ít có khả năng làm ô nhiễm dom của mình bằng các thuộc tính kỳ lạ—một vấn đề mà tôi thấy phổ biến khi chuyển các thuộc tính tùy chỉnh cho các thành phần được tạo kiểu

Các kiểu đối tượng dễ làm việc hơn

Khi làm việc với TypeScript, tôi thích rằng tất cả css của tôi đều được kiểm tra kiểu và cung cấp tính năng tự động hoàn thành mạnh mẽ. Và tôi thường thấy việc chèn các biến chủ đề vào các đối tượng dễ dàng hơn thay vì sử dụng ký hiệu kiểu

import { css, jsx } from '@emotion/core' const Button = props => ( 
     css={{ 
    background: '#08e', 
    color: 'white', 
    padding: '6px 10px', 
    border: 'none'
   }} 
   {...props} 
 /> 
) function Example() { 
  return ( 
    
  
          
    
 
  ) 
}

1. Nhược điểm nhỏ của các đối tượng là chúng hơi cồng kềnh để viết và không dễ dàng sao chép từ trình duyệt

Đặt tên cho mọi thứ thật khó. Và tôi lười biếng

Khi làm việc với các thành phần có kiểu dáng, bạn thường cần tạo tên cho các thành phần có kiểu riêng biệt. Điều này dẫn đến nhiều thành phần thiếu tầm quan trọng ngữ nghĩa rõ ràng mà vẫn yêu cầu các tên riêng biệt. Đặt tên cho các thành phần này với một bộ mô tả có ý nghĩa có thể khó khăn. Hơn nữa, bản soạn sẵn thường cảm thấy nặng nề khi áp dụng các kiểu tùy chỉnh nhỏ, chẳng hạn như thay đổi lề hoặc phần đệm. Vì vậy, vì lười biếng, tôi thấy mình thường sử dụng giá đỡ

import { css, jsx } from '@emotion/core' const Button = props => ( 
     css={{ 
    background: '#08e', 
    color: 'white', 
    padding: '6px 10px', 
    border: 'none'
   }} 
   {...props} 
 /> 
) function Example() { 
  return ( 
    
  
          
    
 
  ) 
}

2 để điều chỉnh nhanh

Nhưng việc sử dụng

import { css, jsx } from '@emotion/core' const Button = props => ( 
     css={{ 
    background: '#08e', 
    color: 'white', 
    padding: '6px 10px', 
    border: 'none'
   }} 
   {...props} 
 /> 
) function Example() { 
  return ( 
    
  
          
    
 
  ) 
}

1 prop sẽ tránh được những cạm bẫy này, trong khi vẫn tạo cơ hội để gói các kiểu vào một thành phần nếu nó đáng để sử dụng lại và có ý nghĩa về mặt ngữ nghĩa

function Example() { 
  return ( 
    
      margin: theme.spacing.sm, 
      padding: theme.spacing.sm, 
     }}
    > 
      
     
  ) 
}

Bạn sắp xếp các kiểu với các phần tử

Với sự hỗ trợ của

import { css, jsx } from '@emotion/core' const Button = props => ( 
     css={{ 
    background: '#08e', 
    color: 'white', 
    padding: '6px 10px', 
    border: 'none'
   }} 
   {...props} 
 /> 
) function Example() { 
  return ( 
    
  
          
    
 
  ) 
}

1, những gì bạn thấy là những gì bạn nhận được. Đó là một điểm nhỏ, nhưng việc không phải cuộn khỏi một phần tử để tìm định nghĩa kiểu của bạn thực sự cải thiện quy trình làm việc của tôi. Nó cảm thấy hiệu quả hơn và giúp tôi theo kịp dòng chảy khi viết các thành phần của mình. Cần xóa một phần tử?

Bố cục thật dễ dàng

Xem xét thành phần

import { css, jsx } from '@emotion/core' const Button = props => ( 
     css={{ 
    background: '#08e', 
    color: 'white', 
    padding: '6px 10px', 
    border: 'none'
   }} 
   {...props} 
 /> 
) function Example() { 
  return ( 
    
  
          
    
 
  ) 
}

0 của chúng tôi. Điều gì sẽ xảy ra nếu chúng tôi muốn cung cấp một khoản ký quỹ cho nó?

function Example() { 
  return ( 
    <>  
       
        
    > 
  ) 
}

Thao tác này chuyển các kiểu được xác định trong ví dụ của chúng ta sang phần tử

import { css, jsx } from '@emotion/core' const Button = props => ( 
     css={{ 
    background: '#08e', 
    color: 'white', 
    padding: '6px 10px', 
    border: 'none'
   }} 
   {...props} 
 /> 
) function Example() { 
  return ( 
    
  
          
    
 
  ) 
}

0 và soạn các kiểu cho chúng ta, áp dụng lề tùy chỉnh

Cả hai đều tuyệt vời, nhưng tôi chọn Cảm xúc

Styled-components là một công cụ tuyệt vời và kết hợp với thứ gì đó như styled-system, bạn có thể nhận được những lợi ích của CSS kiểu chức năng có thể làm giảm bớt một số vấn đề về đặt tên. Nhưng tôi nhận thấy rằng việc sử dụng prop

import { css, jsx } from '@emotion/core' const Button = props => ( 
     css={{ 
    background: '#08e', 
    color: 'white', 
    padding: '6px 10px', 
    border: 'none'
   }} 
   {...props} 
 /> 
) function Example() { 
  return ( 
    
  
          
    
 
  ) 
}

1, đặc biệt là với TypeScript, sẽ giảm nhu cầu về thứ gì đó như hệ thống định kiểu và thường cung cấp phương tiện linh hoạt nhất để viết các kiểu của bạn trong Javascript

Bạn đang tìm hiểu bài viết:  Cảm xúc/css 2024

HỆ THỐNG CỬA HÀNG TRÙM SỈ QUẢNG CHÂU

Điện thoại: 092.484.9483

Zalo: 092.484.9483

Facebook: https://facebook.com/giatlathuhuongcom/

Website: Trumsiquangchau.com

Địa chỉ: Ngõ 346 Nam Dư, Trần Phú, Hoàng Mai, Hà Nội.

0/5 (0 Reviews)
Xem thêm:

Bài viết cùng chủ đề: