1. Giới thiệu chung

StyleX là một thư viện CSS mã nguồn mở được phát triển bởi Meta (trước đây là Facebook), với mục tiêu cung cấp một hệ thống thiết kế giao diện người dùng (UI) tự động hóa cho các sản phẩm của công ty. Thư viện này nhằm giúp các nhà phát triển web dễ dàng xây dựng những giao diện người dùng đẹp mắt, đồng nhất với thời gian phát triển ngắn nhất. StyleX đã được tích cực sử dụng trong các sản phẩm đình đám như Facebook, Messenger, Instagram, WhatsApp, Oculus và nhiều ứng dụng khác. Đặc biệt, nó đã nhận được sự yêu thích từ cộng đồng lập trình viên.

2. Tính năng nổi bật

2.1 Khả năng mở rộng (Scalable)

• Giảm thiểu đáng kể đầu ra CSS nhờ vào atomic CSS.
• Kích thước của tệp CSS không tăng khi số lượng component gia tăng.
• Dễ đọc và bảo trì ngay cả trong các dự án lớn.

2.2 Độ dự đoán (Predictable)

• Class names trên một element chỉ có thể áp dụng style cho chính nó.
• Loại bỏ vấn đề cụ thể (specificity issues).
• Style cuối cùng luôn được áp dụng - “Style cuối cùng luôn chiến thắng!”.

2.3 Khả năng kết hợp (Composable)

• Áp dụng các styles theo nhiều điều kiện khác nhau.
• Kết hợp nhiều styles tùy ý thông qua các component và tệp tin.
• Sử dụng hằng số và biểu thức để giữ các kiểu DRY mà không ảnh hưởng đến hiệu suất.

2.4 An toàn kiểu (Type-Safe)

• Đảm bảo an toàn cho APIs.
• Tính an toàn cho styles và themes.

3. Hướng dẫn sử dụng StyleX nhanh chóng

3.1 Cấu hình

import plugin from '@stylexjs/rollup-plugin'; 

const config = () => ({ 
  plugins: [ 
    plugin({ ...options }) 
  ] 
}); 

export default config; 

3.2 Định nghĩa styles

Styles được định nghĩa qua cú pháp create() API như sau:

import * as stylex from '@stylexjs/stylex'; 

const styles = stylex.create({ 
  root: { 
    width: '100%', 
    maxWidth: 800, 
    minHeight: 40, 
  }, 
}); 

Bạn có thể định nghĩa nhiều quy tắc bằng cách sử dụng các khóa bổ sung và các cuộc gọi bổ sung cho create():

const styles = stylex.create({ 
  root: { 
    width: '100%', 
    maxWidth: 800, 
    minHeight: 40, 
  }, 
  child: { 
    backgroundColor: 'black', 
    marginBlock: '1rem', 
  }, 
}); 

3.3 Sử dụng styles

Để sử dụng styles, bạn cần chuyển chúng qua props() như sau:

import * as React from 'react'; 
import * as stylex from '@stylexjs/stylex'; 

function ReactDiv({ color, isActive, style }) { 
  return <div {...stylex.props( 
    styles.main, 
    isActive && styles.active, 
    colorStyles[color], 
    style, 
  )} />; 
} 

Chú ý: StyleX là một framework agnostic, tức là nó hoạt động tốt với nhiều framework khác như SolidJS, Preact, hay Qwik.

4. Khi nào nên sử dụng StyleX?

StyleX có thể được sử dụng trong nhiều dự án, nhưng nó đặc biệt hiệu quả trong các trường hợp sau:

4.1 Xây dựng giao diện người dùng trong JavaScript

StyleX rất phù hợp cho các ứng dụng được phát triển trên các framework như React, Preact, Solid, lit-html hay Angular. Thậm chí bạn có thể dùng nó với Svelte hay Vue sau khi cấu hình một chút.

4.2 Dự án lớn hoặc đang phát triển

Thư viện này cực kỳ hữu ích trong các ứng dụng lớn, vì nó giúp duy trì kích thước tệp CSS không bị gia tăng khi số lượng components tăng lên.

4.3 Components tái sử dụng

StyleX giúp việc xây dựng các components UI tiện lợi với style mặc định có thể tùy chỉnh, đồng thời hỗ trợ việc xuất bản các components này lên NPM một cách dễ dàng.

5. Cách StyleX hoạt động

StyleX bao gồm nhiều công cụ làm việc cùng nhau như:

• Babel plugin: Quan trọng cho việc tạo ra các class atomic cho styles trong mã nguồn ứng dụng.
• ESlint plugin: Cải thiện kiểm soát kiểu và cảnh báo vấn đề tiềm ẩn cho lập trình viên.
• Tích hợp với Bundlers & Framework: Hỗ trợ nhiều bundler phổ biến như Vite và Rollup, cũng như các frameworks như Next.js.
• Thư viện runtime nhỏ: Gộp các objects của class names một cách nhanh chóng và hiệu quả.

6. Tài liệu tham khảo

• Cách sử dụng StyleX
• StyleX trên Medium
  source: viblo