[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 [
Hello world
]
}
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 => [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
] function Example[] {
return [
Hello world
]
}
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 => [1 giống như bạn sử dụng giá đỡ
] function Example[] {
return [
Hello world
]
}
import { css, jsx } from '@emotion/core' const Button = props => [2
] function Example[] {
return [
Hello world
]
}
import { css, jsx } from '@emotion/core' const Button = props => [
] function Example[] {
return [
Hello world
]
}
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 => [1 hơn vì những lý do sau
] function Example[] {
return [
Hello world
]
}
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 => [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
] function Example[] {
return [
Hello world
]
}
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 => [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
] function Example[] {
return [
Hello world
]
}
Đặ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 => [2 để điều chỉnh nhanh
] function Example[] {
return [
Hello world
]
}
Nhưng việc sử dụng
import { css, jsx } from '@emotion/core' const Button = props => [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 [
Hello world
]
}
function Example[] {
return [
Hi there
]
}
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 => [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ử?
] function Example[] {
return [
Hello world
]
}
Bố cục thật dễ dàng
Xem xét thành phần
import { css, jsx } from '@emotion/core' const Button = props => [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 [
Hello world
]
}
function Example[] {
return [
Cancel
Save
]
}
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 => [0 và soạn các kiểu cho chúng ta, áp dụng lề tùy chỉnh
] function Example[] {
return [
Hello world
]
}
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 => [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
] function Example[] {
return [
Hello world
]
}