Tạo kiểu thực hành tốt nhất bằng React

Ảnh của Pankaj Patel trên Bapt

Một trong những phần thú vị nhất khi làm việc trên web là bạn có thể làm việc trong một phương tiện trực quan như vậy. Tôi phần lớn của khía cạnh hình ảnh rõ ràng là cách nó nhìn. Tạo kiểu cho một trang web đã xuất hiện từ gốc rễ của việc thêm đánh dấu và thuộc tính để thay đổi những thứ như phông chữ và màu sắc, thành Cascading Style Sheets ngày nay. Bây giờ trong thế giới của chúng ta về các ứng dụng Web và Khung công tác JS, web đã phát triển và do đó có các thực tiễn tốt nhất. Điều này đặc biệt đúng khi làm việc trong một khung như React.

Làm thế nào mà một phong cách tôn trọng trang web của bạn bằng cách sử dụng React?

React, tự nó và không có bất kỳ công cụ nào khác, hỗ trợ hai cách để tạo kiểu cho các thành phần: kiểu dáng prop, thẻ kiểu và biểu định kiểu CSS. Kiểu prop lấy một đối tượng JS của các thuộc tính và giá trị CSS và cuối cùng dịch nó để nội tuyến các kiểu của một phần tử, như sau:

// JSX
   Văn bản màu đỏ   // DOM
   Văn bản màu đỏ

Vì nó chỉ là kiểu nội tuyến, bạn vẫn có được độ đặc hiệu cao nhất nhưng bạn bị giới hạn về những gì bạn có quyền truy cập vào kiểu.

Thẻ kiểu và biểu định kiểu CSS hoạt động giống như làm việc với đánh dấu HTML thuần túy. Sự khác biệt lớn nhất là bạn phải sử dụng prop theclassName thay vì lớp. Cả id prop và className prop đều lấy một chuỗi hoặc một biểu thức mà các ước lượng thành một chuỗi, như sau:

// JSX
// DOM

Việc duy trì CSS ở quy mô có thể trở nên rất khó khăn vì vậy cộng đồng React đã xây dựng các công cụ cải thiện trải nghiệm của nhà phát triển trong việc duy trì CSS ở quy mô. Có một số đã được tạo, nhưng hai cái lớn nhất có lẽ là các mô-đun CSS và CSS-in-JS (và cụ thể hơn là các thành phần / cảm xúc).

Các mô-đun CSS cho phép bạn xử lý tệp CSS như Mô-đun JS. Bạn nhập tệp CSS và các lớp trong tệp CSS được xử lý như các thuộc tính trên đối tượng JS, như sau:

nhập css từ './index.css';
// DOM

Bạn có thể nhận thấy rằng lớp cuối cùng được sử dụng là tên của lớp cộng với hàm băm. Hàm băm này được thêm vào lớp để đảm bảo rằng nó là duy nhất trong ứng dụng của chúng tôi.

Điều này cho phép nhà phát triển không cần biết toàn bộ phạm vi của ứng dụng và cách CSS mà chúng tôi đang viết sẽ tác động đến phần còn lại của Cascade. Trong thực tế, nó là một điển hình cho mỗi thành phần có tệp CSS riêng được liên kết với nó khi bạn đang sử dụng các mô-đun CSS. Các mô-đun CSS cần được kích hoạt như một phần của quy trình xây dựng, ví dụ như trong Webpack để có thể tận dụng lợi thế của công cụ.

Kiểu dáng-Thành phần và Cảm xúc là hai thư viện rất phổ biến thực hiện cùng một mục tiêu như các mô-đun CSS nhưng lại đi theo một cách khác. Cả hai thư viện đều tận dụng cú pháp văn bản mẫu được gắn thẻ, được giới thiệu trong ES6. Nói một cách đơn giản, các mẫu chữ được gắn thẻ là các hàm được gọi với một chuỗi ký tự mẫu. Hàm phân tích cú pháp mẫu và có thể hành động tương ứng.

Cách các thư viện này hoạt động là bạn viết CSS dưới dạng chuỗi mẫu, hàm phân tích chuỗi mẫu, đưa nó vào thẻ kiểu của tài liệu và trả về một thành phần có lớp thích hợp được đưa vào. Dưới đây là một ví dụ về cách thức hoạt động của nó (ví dụ này sử dụng các thành phần theo kiểu, nhưng cảm xúc sử dụng API gần như giống hệt nhau):

nhập kiểu dáng từ 'thành phần theo kiểu';
const Bố cục = styled.div`
   hiển thị: lưới;
`;
// DOM

Như bạn có thể thấy, nó đạt được cùng một mục tiêu như Mô-đun CSS, nhưng thay vì tạo lớp phạm vi trong thời gian xây dựng, nó xây dựng CSS khi chạy. Điều này cho phép nhiều tính năng thú vị nằm ngoài phạm vi của bài đăng này, nhưng tôi khuyến khích bạn nên kiểm tra chúng để tìm ra các tài liệu cho các thành phần và cảm xúc theo kiểu.

Với tất cả những cách tạo kiểu này, cách tốt nhất để tạo kiểu là gì? Phần lớn là chủ quan và thực sự phụ thuộc vào sở thích của nhà phát triển hoặc nhóm nhà phát triển. Điều đó nói rằng, có một số thực tiễn tốt nhất đã xuất hiện.

Kiểu nội tuyến không dài hơn Bad Bad Bad

Một trong những điều đầu tiên tôi học được khi học CSS là phong cách nội tuyến rất tệ, quy mô không tốt và nên tránh bằng mọi giá. Nhưng điều quan trọng là phải hiểu lý do tại sao họ bị coi là xấu.

Kiểu nội tuyến được coi là xấu vì kiểu nội tuyến chỉ áp dụng cho phần tử cụ thể đó. Nếu bạn cần tái tạo kiểu tương tự, chẳng hạn như nút chính, bạn phải sao chép và dán từ một phần của ứng dụng sang phần khác. Bây giờ khi bạn tính đến việc thay đổi kiểu quét và kiểu chỉ giống nhau một phần giữa hai yếu tố, bạn sẽ gặp ác mộng.

Trong khung dựa trên thành phần, như React, đây không còn là yếu tố nữa. Nếu bạn có nhu cầu về một yếu tố được tạo kiểu ở nhiều nơi, bạn sử dụng cùng một thành phần ở cả hai nơi. Nếu kiểu dáng thay đổi cho cả hai thành phần, bạn vẫn chỉ có một thành phần để cập nhật, vì vậy nó không có vấn đề mở rộng giống như khi bạn làm việc trực tiếp với HTML.

Kiểu nội tuyến cũng cho phép các kiểu có thể được cấu hình thông qua các đạo cụ. Bạn có thể hiển thị các yếu tố nhất định thông qua các đạo cụ được cấu hình bởi người dùng thành phần của bạn. Nếu bạn có các hằng kiểu được sử dụng phổ biến trên toàn bộ trang web của bạn, chúng có thể được duy trì trong một thư mục hằng kiểu và nhập vào. Dưới đây là một ví dụ về cách tất cả những gì có thể được thực hiện:

Phương pháp này là hoàn hảo. Ví dụ, các kiểu in don don cung cấp quyền truy cập vào các bộ chọn giả hoặc truy vấn phương tiện. Nhưng nó không phải là xấu khi sử dụng các kiểu nội tuyến nữa và chắc chắn là một phần của hộp công cụ nhà phát triển.

Các thành phần nên chọn vị trí bản thân

Trong khung dựa trên thành phần, như React, chúng tôi phân tách mối quan tâm của chúng tôi ở cấp thành phần, điều này bao gồm các kiểu. Một thành phần không biết đâu là nó được kết xuất cũng như anh chị em của nó là ai nếu có. Nó cũng không biết làm thế nào mà nó được định vị. Ví dụ, cha mẹ của nó có thể sử dụng hộp flex, lưới css, phao hoặc vị trí tuyệt đối. Vì vậy, không có cách nào để bạn đặt các giá trị như lề, vị trí, tự uốn hoặc bất kỳ thuộc tính nào khác như thế.

Vấn đề nan giải là CSS không được thiết kế xung quanh khung dựa trên thành phần và nhiều thuộc tính này cần được đặt ở cấp độ con, điều đó có nghĩa là trẻ cần phải hiểu biết về xung quanh mặc dù thực tế là nó không biết .

Làm thế nào để chúng ta có được xung quanh này? Có 3 cách chúng ta có thể làm điều này. Một cách là để hiển thị className và / hoặc đạo cụ kiểu để cho phép các kiểu được chèn vào, như thế này:

const Widget = ({className = '', ... đạo cụ}) =>
         
//hoặc là
const Widget = ({style = {}, ... đạo cụ}) =>
        

Nhược điểm tiềm năng của điều này là nó mở ra các phong cách khác của bạn để được ghi đè, điều này thường không mong muốn, đặc biệt là khi làm việc trong một hệ thống thiết kế. Để chống lại điều này, bạn có thể đặt các kiểu của mình, mà bạn không muốn ghi đè lên, cuối cùng. Bạn có thể làm như thế này:

const Widget = ({className = '', ... đạo cụ}) =>
         
//hoặc là
const Widget = ({style = {}, ... đạo cụ}) =>
        

Một cách khác để làm điều này là phơi bày rõ ràng các giá trị cụ thể, chẳng hạn như lề hoặc vị trí. Thành phần của bạn sau đó có thể thực hiện logic để đảm bảo prop là chính xác và áp dụng nó. Điều này cho phép bạn kiểm soát nhiều hơn nhưng buộc bạn là tác giả Thành phần phải xử lý từng chỗ dựa mà bạn chọn để lộ.

Cách thứ ba là kết hợp Thành phần của bạn trong các trình bao bọc của Google Có cài đặt định vị đó, như sau:

const Bố cục = () => (
   
     
        
     
   
);

Điều này không cung cấp thêm quyền kiểm soát mà không phải phơi bày các trường cụ thể. Nhưng nó có thể gây ra rất nhiều sự thiếu quyết đoán khi bạn có rất nhiều giấy gói này ở khắp mọi nơi. Cách tốt nhất để chống lại địa ngục bao bọc là kết hợp chúng thành thành phần của riêng chúng, chẳng hạn như sử dụng Thành phần bậc cao.

Phong cách nên được trừu tượng đi

Tôi đã đi sâu vào vấn đề này một lần trong bài viết của mình về việc cố gắng làm quá nhiều trong Thành phần Phản ứng của bạn. Có nhiều công cụ mà bạn có thể sử dụng để thêm kiểu vào Thành phần của mình và cách các kiểu đó được áp dụng thường không quan trọng khi bạn kết hợp các thành phần của mình lại với nhau. Các thành phần của chúng ta sẽ trông giống như thế này:

const SideBar = ({title}) => (
   
     

        {tiêu đề}            
                   ):

Và nhiều hơn như thế này:

const SideBar = ({title}) => (
   
     
        {tiêu đề}
     
     
        
     
   
):

Ví dụ thứ hai là mức độ trừu tượng đúng khi soạn Thành phần SideBar. Khi soạn Thành phần SideBar tôi không thực sự quan tâm đến cách thêm kiểu, chỉ có kiểu được thêm vào. Ví dụ đầu tiên ồn ào hơn và làm chậm khả năng của tôi để hiểu thành phần đang làm gì.

Tạo kiểu trang web là rất quan trọng đối với một trang web. Cách trang web của chúng tôi trông có thể tạo hoặc phá vỡ một trang web. May mắn thay, chúng tôi có nhiều công cụ và thực tiễn tốt nhất có thể giúp chúng tôi cung cấp một trang web trông tuyệt vời mà người dùng của chúng tôi yêu thích sử dụng.