Hướng dẫn css modules vs styled component - mô-đun css so với thành phần được tạo kiểu

Theo ý kiến ​​cá nhân của tôi, vấn đề xếp tầng CSS được đánh giá quá cao. Nếu chúng tôi đang phát triển một ứng dụng hoặc trang web nhỏ, với một nhóm, thì chúng tôi không có khả năng gặp phải một vụ va chạm tên hoặc khó khăn trong việc tái sử dụng các thành phần. Nếu bạn phải đối mặt với vấn đề này, tôi khuyên bạn nên xem xét các mô -đun CSS, vì theo tôi, đây là một giải pháp tối ưu hơn cho các yếu tố trên. Trong mọi trường hợp, bất cứ điều gì bạn chọn, hãy viết mã có ý nghĩa và không bị lừa bởi sự cường điệu. Hype sẽ vượt qua, và tất cả chúng ta phải sống với nó. Có các dự án tuyệt vời và thú vị, độc giả thân mến!

Những mô -đun CSS tốt hơn hoặc kiểu dángstyled-components as the most popular solution) and CSS Modules. In this article, we will try to answer the question: which is better CSS-in-JS or CSS Modules?

Trong thử nghiệm tổng hợp này, các mô -đun CSS tiếp cận chiến thắng, vì hệ thống xây dựng không thêm một cái gì đó để thực hiện nó, ngoại trừ tên lớp đã thay đổi. Thành phần kiểu dáng do thực hiện kỹ thuật, thêm sự phụ thuộc cũng như mã để xử lý thời gian chạy và kiểu dáng.

Thời gian trôi qua, web ngày càng trở nên phức tạp hơn và chúng tôi đang phải đối mặt với thực tế là các tầng kiểu biến thành một vấn đề đối với chúng tôi. Các nhóm phân tán, làm việc trên các bộ phận của họ, kết hợp chúng thành các mô -đun có thể tái sử dụng, lắp ráp một ứng dụng từ các mảnh, như Tiến sĩ Frankenstein, khâu các kiểu thành một bức tranh lớn, có thể nhận được kết quả đột ngột ... do Cascade, phong cách của mô -đun 1 có thể ảnh hưởng đến màn hình của mô -đun 3 và mô -đun 4 có thể thay đổi các kiểu toàn cầu và thay đổi toàn bộ màn hình của ứng dụng nói chung.

Các nhà phát triển đã bắt đầu nghĩ đến việc giải quyết vấn đề này. Các quy ước đặt tên kiểu được tạo ra để tránh sự chồng chéo, chẳng hạn như BEM hoặc CSS nguyên tử của Yandex. Ý tưởng rất rõ ràng, chúng tôi hoạt động với các tên để có thể dự đoán được, nhưng đồng thời để ngăn chặn sự lặp lại.

Những cách tiếp cận này đã bị sụp đổ các tảng đá của yếu tố con người. Dù sao, chúng tôi không có gì đảm bảo rằng nhà phát triển từ Team A sẽ không sử dụng tên từ Team C.

Vấn đề đặt tên chỉ có thể được giải quyết bằng cách gán một tên ngẫu nhiên cho lớp CSS. Do đó, chúng tôi nhận được một bộ kiểu CSS hoàn toàn độc lập sẽ được áp dụng cho một khối HTML cụ thể và chúng tôi hiểu chắc chắn rằng phần còn lại của hệ thống sẽ không bị ảnh hưởng dưới bất kỳ hình thức nào.

Và sau đó, 2 cách tiếp cận đã lên sân khấu để tổ chức các mô-đun CSS: CSS và CSS-in-JS của chúng tôi. Dưới mui xe, có một triển khai kỹ thuật khác nhau và trên thực tế giải quyết vấn đề về tính nguyên tử, khả năng tái sử dụng và tránh các tác dụng phụ khi viết CSS.

Về mặt kỹ thuật, các mô-đun CSS biến đổi tên kiểu bằng cách sử dụng một băm dựa trên tên tệp, đường dẫn, tên kiểu. Thành phần kiểu dáng xử lý các kiểu trong thời gian chạy của JS, thêm chúng khi chúng đi đến phần HTML đầu ().head HTML section ().

Phương pháp tổng quan

Hãy xem cách tiếp cận nào là tối ưu hơn để viết một ứng dụng web hiện đại!

Hãy tưởng tượng chúng ta có một ứng dụng phản ứng cơ bản:

import React, { Component } from 'react';
import './App.css';

class App extends Component {
 render() {
   return (
     <div className="title">
       React application title
     div>
   );
 }
}

Nhập chế độ FullScreenen EXIT Mode FullScreen

Kiểu CSS của ứng dụng này:

.title {
 padding: 20px;
 background-color: #222;
 text-align: center;
 color: white;
 font-size: 1.5em;
}

Nhập chế độ FullScreenen EXIT Mode FullScreen

Kiểu CSS của ứng dụng này:16.14, react-dom 16.14

Các phụ thuộc là phản ứng 16,14, React-DOM 16,14

Chúng ta hãy cố gắng xây dựng ứng dụng này bằng cách sử dụng trang web bằng tất cả các tối ưu hóa sản xuất.

chúng tôi đã có129kb
separated and minified CSS - 133 bytes

JS UGLEND

import React, { Component } from 'react';
import styles from './App.module.css';

class App extends Component {
 render() {
   return (
     <div className={styles.title}>
       React application title
     div>
   );
 }
}

Nhập chế độ FullScreenen EXIT Mode FullScreen

Kiểu CSS của ứng dụng này:129kb
separated and minified CSS - 151 bytes

Các phụ thuộc là phản ứng 16,14, React-DOM 16,14

Chúng ta hãy cố gắng xây dựng ứng dụng này bằng cách sử dụng trang web bằng tất cả các tối ưu hóa sản xuất.

import React, { Component } from 'react';
import styles from 'styled-components';

const Title = styles.h2`
 padding: 20px;
 background-color: #222;
 text-align: center;
 color: white;
 font-size: 1.5em;
`;

class App extends Component {
 render() {
   return (
     <Title>
       React application title
     Title>
   );
 }
}

Nhập chế độ FullScreenen EXIT Mode FullScreen

Kiểu CSS của ứng dụng này:163kb
CSS file is missing

Các phụ thuộc là phản ứng 16,14, React-DOM 16,1430kb difference between CSS Modules and CSS-in-JS (styled-components) is due to styled-components adding extra code to add styles to the part of the HTML document.

Chúng ta hãy cố gắng xây dựng ứng dụng này bằng cách sử dụng trang web bằng tất cả các tối ưu hóa sản xuất.

chúng tôi đã có

JS UGLEND

Mã tương tự trong các mô -đun CSS sẽ trông như thế này:

JS UGLEND

• Phiên bản mô -đun CSS sẽ chiếm một vài byte hơn do không thể nén các tên CSS được tạo dài.
• Cuối cùng, hãy viết lại cùng một mã trong các thành phần kiểu dáng:
• Tệp CSS JS - 163KB UGLEX
• Sự khác biệt hơn 30kb giữa các mô-đun CSS và CSS-in-JS (thành phần kiểu dáng) là do các thành phần kiểu dáng thêm mã thêm để thêm các kiểu vào một phần của tài liệu HTML.
• Trong thử nghiệm tổng hợp này, các mô -đun CSS tiếp cận chiến thắng, vì hệ thống xây dựng không thêm một cái gì đó để thực hiện nó, ngoại trừ tên lớp đã thay đổi. Thành phần kiểu dáng do thực hiện kỹ thuật, thêm sự phụ thuộc cũng như mã để xử lý thời gian chạy và kiểu dáng.

Bây giờ chúng ta hãy xem nhanh các ưu và nhược điểm của các mô-đun CSS-in-JS / CSS.

• Ưu và nhược điểm

const Title = styles.h2`
 padding: 20px;
 background-color: #222;
 text-align: center;
 color: white;
 font-size: 1.5em;
 ${props => props.secondary && css`
   background-color: #fff;
   color: #000;
   padding: 10px;
   font-size: 1em;
 `}
`;

Nhập chế độ FullScreenen EXIT Mode FullScreen

• Kiểu CSS của ứng dụng này:
• Các phụ thuộc là phản ứng 16,14, React-DOM 16,14

Chúng ta hãy cố gắng xây dựng ứng dụng này bằng cách sử dụng trang web bằng tất cả các tối ưu hóa sản xuất.

JS UGLEND

• Phiên bản mô -đun CSS sẽ chiếm một vài byte hơn do không thể nén các tên CSS được tạo dài.

:global(.myclass) {
    text-decoration: underline;
}

Nhập chế độ FullScreenen EXIT Mode FullScreen

• Kiểu CSS của ứng dụng này:
• Làm việc với TypeScript, bạn cần tự động tạo giao diện theo cách thủ công. Đối với các mục đích này, tôi sử dụng trình tải webpack:

@teamsupercell/typings-for-css-modules-loader

Ưu điểm

• Chúng tôi làm việc với CSS thông thường, nó có thể sử dụng SCSS, ít hơn, postcss, stylelint, v.v. Ngoài ra, bạn không lãng phí thời gian để điều chỉnh CSS với JS.
• Không tích hợp các kiểu vào mã, kết quả là mã sạch.
• Gần 100% tiêu chuẩn hóa ngoại trừ các phong cách toàn cầu.

Sự kết luận

Vì vậy, vấn đề cơ bản với phương pháp CSS-in-JS là nó không phải là CSS! Loại mã này khó duy trì hơn nếu bạn có một người xác định trong nhóm của bạn làm việc trên Markup. Mã đó sẽ chậm hơn, do thực tế là CSS được hiển thị vào tệp được xử lý song song và CSS-in-JS không thể được chuyển thành một tệp CSS riêng biệt. Và lỗ hổng cơ bản cuối cùng là không có khả năng sử dụng các phương pháp và tiện ích làm sẵn, chẳng hạn như SCSS, ít và bút stylelint, v.v.

Mặt khác, cách tiếp cận CSS-in-JS có thể là một giải pháp tốt cho nhóm Frontend, người đối phó với cả đánh dấu và JS, và phát triển tất cả các thành phần từ đầu. Ngoài ra, CSS-in-JS sẽ hữu ích cho các mô-đun tích hợp vào các ứng dụng khác.

Theo ý kiến ​​cá nhân của tôi, vấn đề xếp tầng CSS được đánh giá quá cao. Nếu chúng tôi đang phát triển một ứng dụng hoặc trang web nhỏ, với một nhóm, thì chúng tôi không có khả năng gặp phải một vụ va chạm tên hoặc khó khăn trong việc tái sử dụng các thành phần. Nếu bạn phải đối mặt với vấn đề này, tôi khuyên bạn nên xem xét các mô -đun CSS, vì theo tôi, đây là một giải pháp tối ưu hơn cho các yếu tố trên. Trong mọi trường hợp, bất cứ điều gì bạn chọn, hãy viết mã có ý nghĩa và không bị lừa bởi sự cường điệu. Hype sẽ vượt qua, và tất cả chúng ta phải sống với nó. Có các dự án tuyệt vời và thú vị, độc giả thân mến!

Những mô -đun CSS tốt hơn hoặc kiểu dáng

Các mô -đun CSS có tốt hơn không?

Tôi có nên sử dụng các mô -đun CSS với React không?

Là mô -đun CSS A CSS