StyleX - Thư viện CSS đơn giản, linh hoạt!

MayFest2024

1. Mở đầu

StyleX là một thư viện CSS (Cascading Style Sheets) mã nguồn mở do Meta (trước đây là Facebook) phát triển nhằm mục đích cung cấp một hệ thống thiết kế UI tự động hoá cho các sản phẩm của mình. Với Stylex, Meta muốn xây dựng một thư viện CSS tiện ích, hiện đại giúp các nhà phát triển web có thể nhanh chóng xây dựng những giao diện người dùng đẹp mắt, đồng nhất và dễ sử dụng mà không cần mất nhiều thời gian. Stylex đã được Meta sử dụng rộng rãi trong các sản phẩm như Facebook, Messenger, Instagram, Whatsapp, Oculus và nhiều sản phẩm khác. Bên cạnh đó, Stylex cũng được cộng đồng nhà phát triển web ưa chuộng và đón nhận nồng nhiệt.

2. Tính năng

2.1 Scalable

Giảm thiểu đầu ra CSS với atomic CSS.
Kích thước CSS không tăng lên khi số lượng component tăng.
Có thể đọc và bảo trì trong các mã nguồn lớn.

2.2 Predictable

Class names trên một element chỉ có thể trực tiếp áp dụng style cho cùng một element đó.
Không có specificity issues.
Style cuối cùng sẽ được áp dụng - “The last style applied always wins!”.

2.3 Composable

Áp dụng style theo các điều kiện khác nhau.
Gộp và kết hợp styles tuỳ ý qua component và file.
Sử dụng constants và expressions để giữ các kiểu DRY. Hoặc lặp lại các kiểu mà không cần lo lắng về hiệu suất.

2.3 Fast

Không runtime style injection.
Tất cả styles được gói trong một file CSS tĩnh tại thời gian biên dịch.
Thời gian chạy được tối ưu hóa để gộp class names.

2.4 Type-Safe

An toàn về APIs.
An toàn về styles.
An toàn về themes.

3. StyleX trong 5 phút

3.1 Configure

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 bằng cú pháp create() API.

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

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

Bất kỳ số lượng rules nào cũng có thể được tạo bằng cách sử dụng additional keys và additional calls để create():

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

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

const colorStyles = stylex.create({
  red: {
    backgroundColor: 'red',
    borderColor: 'darkred',
  },
  green: {
    backgroundColor: 'lightgreen',
    borderColor: 'darkgreen',
  },
});

function ReactDiv({ color, isActive, style }) { /* ... */ }

3.3 Sử dụng styles

Để sử dụng styles, chúng phải được chuyển tới function props(). Styles có thể được combined và applied conditionally bằng cách sử dụng standard JavaScript expressions.

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

const styles = stylex.create({ ... });
const colorStyles = stylex.create({ ... });

function ReactDiv({ color, isActive, style }) {
  return <div {...stylex.props(
    styles.main,
    // apply styles conditionally
    isActive && styles.active,
    // choose a style variant based on a prop
    colorStyles[color],
    // styles passed as props
    style,
  )} />;
}

Ví dụ trên sử dụng JSX. Bản thân StyleX là một framework agnostic. Code tương tự hoạt động với các frameworks khác chấp nhận các chuỗi className và các đối tượng style như SolidJS, Preact hoặc Qwik.

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

StyleX hoạt động tốt trong nhiều dự án. Tuy nhiên, nó được thiết kế để đáp ứng trong các trường hợp cụ thể sau.

4.1 Authoring UI trong JavaScript

StyleX là một thư viện CSS-in-JS, có nghĩa là nó hữu ích nhất khi UI của ứng dụng được viết trong JavaScript. Nếu một ứng dụng sử dụng một framework như React, Preact, Solid, lit-html hoặc Angular, việc sử dụng StyleX sẽ phù hợp. Một số framework, như Svelte và Vue sử dụng định dạng file tùy chỉnh được compiled thành JavaScript vào thời gian build. StyleX vẫn có thể được sử dụng trong các framework này, nhưng có thể cần một số configuration.

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

Mặc dù StyleX hoạt động tốt cho các dự án có mọi size project, nhưng nó thực sự nổi bật trong các ứng dụng lớn. Do StyleX compiles thành atomic class names, một lợi ích về performance lớn là kích thước của gói CSS không tăng lên khi dự án phát triển.

4.3 Components tái sử dụng

Các lợi ích của StyleX lớn nhất khi được sử dụng kèm với components UI có thể tái sử dụng. Trong nhiều năm qua, chúng ta đã phải lựa chọn giữa các thành phần "Design System" đi kèm với các kiểu đã được tích hợp nhưng khó tùy chỉnh hoặc components "Headless" hoàn toàn unstyled. StyleX giúp developers xây dựng components UI có thể có default styles và vẫn có thể được tùy chỉnh.

Hơn nữa, sự nhất quán cho phép chia sẻ components này bằng cách xuất bản chúng lên NPM. Miễn là một component đó cũng đang sử dụng StyleX, styles sẽ được gộp và kết hợp đúng cách mà không cần bất kỳ configuration bổ sung nào.

5. StyleX hoạt động như thế nào?

StyleX đi kèm với một bộ công cụ hoạt động cùng nhau, bao gồm:

Babel plugin: Công cụ quan trọng này trong StyleX đóng vai trò quan trọng trong việc tạo ra classes atomic cho styles được định nghĩa trong mã nguồn ứng dụng. Ngoài ra, nó chứa định nghĩa của helper functions như deduplication, sorting và quá trình viết các styles vào một file CSS.
ESlint plugin: StyleX tăng cường kiểm soát kiểu ở mức độ cụ thể thông qua hệ thống Typing của nó, được tăng cường bởi một plugin eslint cảnh báo các vấn đề tiềm ẩn cho các nhà phát triển trong quá trình phát triển. Trải nghiệm Phát triển (DX) nâng cao này đặt StyleX khác biệt trong việc đảm bảo chất lượng code và tính nguyên vẹn của styles.
Tích hợp với Bundlers & Framework: StyleX cung cấp một công cụ tích hợp dành riêng cho developers, hiện đang hỗ trợ các bundler phổ biến như Vite và Rollup và các framework như Next.js. Nhóm phát triển đang tích cực mở rộng hỗ trợ để bao gồm thêm các framework và bundler khác.
Thư viện runtime nhỏ: Thư viện runtime nhỏ này gộp objects của class names dynamically. Thư viện runtime này đã được tối ưu hóa để rất nhanh chóng, và kết quả sau đó được ghi nhớ.