Menyahkod StyleX: Sistem Penggayaan Terkemuka Meta

Setiap tahun pada bulan Oktober, persidangan reaksi antarabangsa terbesar diadakan di Goa, India. Ya, saya bercakap tentang React India. Tahun ini (2024), lebih istimewa bagi saya kerana saya mendapat peluang untuk bercakap di persidangan yang hebat ini. Berikut adalah rakaman ceramah saya jika anda terlepas menontonnya secara langsung. Jika anda lebih suka membaca daripada menonton video, maka blog ini hanya untuk anda! Mari kita mendalaminya.

Apakah StyleX?

StyleX ialah perpustakaan penggayaan baharu Meta yang boleh skala yang kini digunakan sebagai sistem utama di sebalik platform seperti Facebook, Instagram dan WhatsApp. Ia menangani masalah kesakitan yang dialami dengan pendekatan CSS-dalam-JS, terutamanya dalam aplikasi React besar-besaran. Dengan menawarkan penyelesaian hibrid yang menggabungkan ciri terbaik kedua-dua CSS atom dan CSS statik, StyleX menawarkan alternatif yang cekap, modular dan berskala.

Bagaimana dan Mengapa Meta mencipta StyleX?

• Meta membina StyleX untuk menangani cabaran khusus yang dihadapi dengan perpustakaan CSS-dalam-JS tradisional dalam projek berskala besar:

1. Gaya Yang Tidak Digunakan: Apabila projek berkembang, CSS sering mengumpul peraturan yang tidak digunakan, menyebabkan helaian gaya menjadi kembung.
2. Isu Prestasi: Penyelesaian CSS-dalam-JS boleh mengakibatkan fail CSS yang besar atau kesesakan prestasi, terutamanya apabila digabungkan dengan aplikasi.
3. Saiz Perpustakaan CSS-dalam-JS: Banyak perpustakaan popular yang digunakan untuk penggayaan dalam JavaScript menambah berat yang tidak perlu pada berkas, memberi kesan kepada masa pemuatan.

• Pengenalan StyleX: Ia dicipta pada 2019 sebagai sebahagian daripada rombakan UI Facebook dan mereka menjadikannya sumber terbuka pada Disember 2023.
• Pengoptimuman CSS: Sebelum menggunakan StyleX, satu halaman di Facebook akan memuatkan sekitar 15-45MB gaya CSS. Ini telah dikurangkan secara drastik kepada sekitar 200-300KB dengan StyleX dengan menggunakan satu berkas CSS.
• Tujuan StyleX: Ia dibangunkan untuk menguruskan kerumitan penggayaan secara berkesan pada skala. Ia menangani cabaran yang timbul apabila banyak pembangun mencipta beribu-ribu komponen, yang sering membawa kepada konflik kekhususan dalam CSS. Dengan menyediakan rangka kerja berstruktur untuk penggayaan, StyleX membantu mengekalkan konsistensi dan kejelasan dalam proses penggayaan.
• Penjanaan Kelas Atom: Dari awal lagi, StyleX menjana kelas atom secara konsisten, menerima pertukaran daripada mempunyai berbilang nama kelas bagi setiap komponen untuk kebolehselenggaraan yang lebih baik dan mengurangkan konflik penggayaan.

Ciri-ciri Utama StyleX:

1. Penjanaan CSS Atom: StyleX menggunakan penjanaan CSS atom, yang bermaksud ia mencipta kelas kecil yang boleh digunakan semula untuk setiap peraturan gaya. Pendekatan ini bukan sahaja meminimumkan lebihan dalam berkas CSS terakhir tetapi juga meningkatkan prestasi dengan mengurangkan saiz keseluruhan helaian gaya.

2. Deduplikasi CSS: Dengan menjana pengecam kelas unik untuk setiap gaya, StyleX menghapuskan gaya pendua dengan berkesan. Proses penyahduaan ini memastikan bahawa setiap pasangan nilai sifat dipaparkan sekali sahaja, seterusnya menyumbang kepada output CSS yang lebih ramping.

3. “Gaya Terakhir Digunakan Sentiasa Menang!”: StyleX mengikut peraturan penggayaan yang boleh diramal di mana gaya terakhir yang digunakan diutamakan. Ciri ini memudahkan penyahpepijatan dan meningkatkan keyakinan pembangun, kerana ia mengurangkan kebimbangan tentang peraturan gaya yang bercanggah.

4. Dioptimumkan untuk React: Direka khusus untuk aplikasi React, StyleX menyepadukan dengan lancar ke dalam ekosistem React. Ia membolehkan pembangun mentakrifkan gaya terus dalam komponen mereka, memupuk aliran kerja pembangunan yang lebih padu.

5. Sokongan Aliran dan TypeScript: StyleX ditulis dalam "Flow" (dicipta oleh Meta) dan ia juga menyediakan sokongan teguh untuk TypeScript, membolehkan API jenis selamat untuk gaya dan tema. Keselamatan jenis ini meningkatkan kebolehpercayaan dan kebolehselenggaraan kod, menjadikannya lebih mudah untuk mengurus senario penggayaan yang kompleks.

6. Penggayaan Bersyarat Fleksibel: Dengan StyleX, pembangun boleh menggunakan gaya secara bersyarat berdasarkan keadaan komponen atau prop. Fleksibiliti ini membolehkan penggayaan dinamik yang menyesuaikan diri dengan interaksi pengguna atau perubahan dalam keadaan aplikasi.

7. Penggayaan Berskop: Ciri penggayaan berskop StyleX memastikan gaya digunakan hanya pada komponen yang dimaksudkan untuknya. Ini menghalang kesan sampingan yang tidak diingini dan isu kekhususan yang sering timbul dalam pangkalan kod yang lebih besar.

8. Kurang Pengiraan Masa Jalan: StyleX meminimumkan pengiraan masa jalan dengan menggabungkan semua gaya ke dalam fail CSS statik pada masa penyusunan. Pengoptimuman ini membawa kepada masa pemaparan yang lebih pantas dan prestasi yang lebih baik, terutamanya dalam aplikasi yang lebih besar.

9. Kebolehselenggaraan Kod yang Lebih Baik: Dengan menempatkan gaya bersama komponen masing-masing dan menggunakan kelas atom, StyleX menggalakkan kebolehselenggaraan kod yang lebih baik. Pembangun boleh memahami dan mengubah suai gaya dengan mudah tanpa menyaring lembaran gaya yang luas.

10. Output CSS Minimum: Penggunaan CSS atom menghasilkan output CSS yang minimum, yang sangat bermanfaat untuk prestasi. Apabila projek berkembang dalam saiz dan kerumitan, StyleX memastikan bahawa berkas CSS kekal terurus tanpa mengorbankan fungsi.

11. Berfungsi Baik untuk Projek Semua Saiz: Walaupun StyleX sesuai untuk projek semua saiz, ia benar-benar cemerlang dalam aplikasi yang lebih besar. Seni binanya direka bentuk untuk mengendalikan kerumitan keperluan penggayaan yang meluas tanpa menjejaskan prestasi atau kebolehselenggaraan.

Mari lihat bagaimana ia berfungsi ??

Contoh kod dalam artikel ini ditulis dalam React, dan kami akan bekerja terutamanya dengan dua komponen, App.jsx dan Button.jsx. Mari kita lihat struktur asas komponen ini sebelum kita menambah gaya.

import Button from "./components/Button";

const App = () => {
  return (
    <div>
      <h1>StyleX by Meta</h1>
      <Button text="Get Started" />
    </div>
  );
};

export default App;

// Button.jsx
import PropTypes from "prop-types";

const Button = ({ text }) => {
  return <button>{text}</button>;
};

Button.propTypes = {
  text: PropTypes.string.isRequired,
};

export default Button;

Menambah gaya menggunakan StyleX

import PropTypes from "prop-types";
import * as stylex from "@stylexjs/stylex";

const styles = stylex.create({
  base: {
    fontSize: 18,
    backgroundColor: "black",
    color: "white",
  },
});

const Button = ({ text }) => {
  return <button {...stylex.props(styles.base)}>{text}</button>;
};

Button.propTypes = {
  text: PropTypes.string.isRequired,
};

export default Button;

Untuk menggunakan gaya ini, kita perlu mengimportnya daripada pakej styleX dan kemudian mentakrifkan gaya menggunakan kaedah stylex.create yang mengambil objek sebagai parameter. Kemudian kita boleh menggunakan kaedah stylex.props untuk menggunakan gaya pada komponen.

Dalam contoh ini, asas ialah nama gaya yang ingin kita gunakan. Kami memanggilnya ruang nama dalam StyleX. Beginilah rupa komponen butang kami sekarang.

Menambah gaya pada kelas pseudo

import PropTypes from "prop-types";
import * as stylex from "@stylexjs/stylex";

const styles = stylex.create({
  base: {
    fontSize: 18,
    backgroundColor: {
      default: "black",
      ":hover": "blue",
    },
    color: "white",
  },
});

const Button = ({ text }) => {
  return <button {...stylex.props(styles.base)}>{text}</button>;
};

Button.propTypes = {
  text: PropTypes.string.isRequired,
};

export default Button;

Dengan StyleX, ia agak mudah untuk menambah gaya pada kelas pseudo. Dalam contoh sebelumnya, backgroundColor ialah rentetan. Di sini, kami menukarnya kepada objek dengan nilai lalai dan kelas pseudo.

Bekerja dengan pertanyaan media

import PropTypes from "prop-types";
import * as stylex from "@stylexjs/stylex";

const styles = stylex.create({
  base: {
    fontSize: 18,
    backgroundColor: {
      default: "black",
      ":hover": "blue",
    },
    color: "white",
    width: {
      default: "100px",
      "@media (max-width: 476px)": "100%",
    },
  },
});

const Button = ({ text }) => {
  return <button {...stylex.props(styles.base)}>{text}</button>;
};

Button.propTypes = {
  text: PropTypes.string.isRequired,
};

export default Button;

Satu perkara yang kami lakukan secara berbeza dalam StyleX jika dibandingkan dengan perpustakaan penggayaan lain ialah pertanyaan media. Di sini, kami menggunakan pertanyaan media pada setiap ruang nama berdasarkan keperluan. Dalam contoh ini, kami mentakrifkan lebar butang menjadi 100px untuk skrin yang lebih besar dan 100% lebar untuk skrin yang lebih kecil atau peranti mudah alih.

Mari lihat bagaimana "gaya terakhir digunakan sentiasa menang"

Mari panjangkan contoh sebelumnya untuk melihat cara kita boleh mencipta variasi butang ini yang berbeza.

const styles = stylex.create({
  base: {
    fontSize: 18,
    backgroundColor: {
      default: "teal",
      ":hover": "blue",
    },
    color: "white",
    width: {
      default: "100px",
      "@media (max-width: 476px)": "100%",
    },
  },
  highlighted: {
    backgroundColor: "orange",
  },
  danger: {
    backgroundColor: "red",
  },
  primary: {
    backgroundColor: "green",
  },
});

const Button = ({ text, isHighlighted, variant }) => {
  return (
    <button
      {...stylex.props(
        styles.base,
        isHighlighted && styles.highlighted, // conditional styling
        styles[variant]
      )}
    >
      {text}
    </button>
  );
};

Button.propTypes = {
  text: PropTypes.string.isRequired,
  isHighlighted: PropTypes.bool,
  variant: PropTypes.oneOf(["danger", "primary"]),
};

Mari tambahkan beberapa lagi ruang nama pada kaedah stylex.create dan berikan mereka warna latar belakang yang berbeza. Selain itu, kami menerima 2 prop baharu dalam komponen Butang kami. isHighlighted ialah prop boolean yang kami gunakan untuk menggunakan ruang nama yang diserlahkan. Dan varian ialah prop yang kami gunakan untuk menggunakan ruang nama utama, bahaya atau diserlahkan.

// App.jsx
import Button from "./components/Button";

const App = () => {
  return (
    <div>
      <h1>StyleX by Meta</h1>
      <div {...stylex.props(styles.main)}>
        <Button text="Base Button" />
        <Button text="Highlighted Button" isHighlighted />
        <Button text="Danger Button" isHighlighted variant="danger" />
        <Button text="Primary Button" variant="primary" />
      </div>
    </div>
  );
};

export default App;

Kami mencipta beberapa salinan lagi komponen Butang dengan prop berbeza yang dihantar. Beginilah rupa apl kami sekarang.

Sekarang, lihat dengan lebih dekat 'Butang Bahaya'. Walaupun kami telah lulus dalam isHighlighted sebagai benar, ruang nama yang diserlahkan tidak akan digunakan. Varian bahaya disebut terakhir dan ia akan digunakan. Oleh itu, butang akan mempunyai warna latar belakang merah.

Gaya mengatasi daripada ibu bapa

Kami boleh mengatasi sifat gaya komponen Butang ini daripada App.jsx secara langsung.

import Button from "./components/Button";

const App = () => {
  return (
    <div>
      <h1>StyleX by Meta</h1>
      <Button text="Get Started" />
    </div>
  );
};

export default App;

Dalam contoh ini, ruang nama ganti pada masa ini membenarkan sebarang sifat. Walau bagaimanapun, StyleX memberi kami keupayaan untuk mengehadkan sifat yang boleh ditindih. Ciri ini menjadi amat berguna apabila menggunakan TypeScript.

// Button.jsx
import PropTypes from "prop-types";

const Button = ({ text }) => {
  return <button>{text}</button>;
};

Button.propTypes = {
  text: PropTypes.string.isRequired,
};

export default Button;

Had ini memastikan bahawa hanya warna latar belakang dan sifat warna boleh ditindih.

Bagaimanakah kelas atom berfungsi (dalaman)

Jika anda menatal ke atas ke kod contoh sebelumnya, anda akan melihat bahawa kami telah menambahkan jidar: gaya "1rem" kepada 3 ruang nama yang berbeza - utama dalam App.jsx, diserlahkan dan utama dalam Button.jsx. Apabila kita memeriksa elemen menggunakan Devtools, kita dapat melihat bahawa komponen berbeza (bekas utama, butang diserlahkan dan butang utama) dilampirkan dengan nama kelas yang sama dan hanya terdapat 1 kelas x42y017 yang memegang jidar: gaya "1rem".

Begitulah StyleX mengurangkan saiz berkasnya dengan menggunakan kelas atom. Selepas mencapai ambang tertentu, tiada kelas baharu dijana; sebaliknya, mereka hanya menggunakan semula kelas sedia ada.

Pembolehubah dan Tema Global

Dapat mengatasi gaya pada tahap butiran adalah bagus! Walau bagaimanapun, mana-mana sistem reka bentuk tertentu perlu menyokong token dan tema reka bentuk. Di situlah StyleX masuk. Reka bentuk API bertema dalam StyleX diilhamkan secara langsung oleh API Konteks React. Pembolehubah ditakrifkan dengan nilai lalai yang serupa dengan cara Konteks Reaksi dicipta dan tema boleh dibuat untuk "menyediakan" nilai yang berbeza untuk pembolehubah ini untuk subpokok UI.

Kami boleh mencipta gaya global dengan mencipta fail x.stylex.js. Pastikan anda mengikuti konvensyen penamaan ini. Dalam fail ini, kami menggunakan stylex.defineVars seperti yang ditunjukkan di bawah.

import PropTypes from "prop-types";
import * as stylex from "@stylexjs/stylex";

const styles = stylex.create({
  base: {
    fontSize: 18,
    backgroundColor: "black",
    color: "white",
  },
});

const Button = ({ text }) => {
  return <button {...stylex.props(styles.base)}>{text}</button>;
};

Button.propTypes = {
  text: PropTypes.string.isRequired,
};

export default Button;

Kami merujuk kepada tema pilihan pengguna dan menetapkannya kepada nilai tetap - DARK. Selanjutnya, mari buat tema baharu menggunakan pembolehubah warna ini.

import PropTypes from "prop-types";
import * as stylex from "@stylexjs/stylex";

const styles = stylex.create({
  base: {
    fontSize: 18,
    backgroundColor: {
      default: "black",
      ":hover": "blue",
    },
    color: "white",
  },
});

const Button = ({ text }) => {
  return <button {...stylex.props(styles.base)}>{text}</button>;
};

Button.propTypes = {
  text: PropTypes.string.isRequired,
};

export default Button;

Setelah tema dicipta, ia boleh digunakan sama seperti gaya lain dalam StyleX.

import PropTypes from "prop-types";
import * as stylex from "@stylexjs/stylex";

const styles = stylex.create({
  base: {
    fontSize: 18,
    backgroundColor: {
      default: "black",
      ":hover": "blue",
    },
    color: "white",
    width: {
      default: "100px",
      "@media (max-width: 476px)": "100%",
    },
  },
});

const Button = ({ text }) => {
  return <button {...stylex.props(styles.base)}>{text}</button>;
};

Button.propTypes = {
  text: PropTypes.string.isRequired,
};

export default Button;

Begitulah kita boleh melihat halaman yang sama dengan myCustomTheme masing-masing dalam mod terang dan gelap.

Itu bungkus?

Hore! Kami telah berjaya mendapat intipati bekerja dengan StyleX. Terima kasih kerana membaca artikel ini. Saya harap ia memberikan pemahaman yang baik tentang apa itu StyleX, bagaimana Meta menciptanya, dan cara menggunakannya. Sila kongsikan pendapat/pertanyaan anda di bahagian komen atau di Twitter. Jika blog ini menarik untuk anda, saya amat menghargai jika anda boleh memberikan siaran ini suka (dengan emoji kegemaran anda ?).

Keamanan ✌

Rujukan

• Mengenai sesi saya
• Tonton ceramah saya di sini!
• Bagaimanakah React India untuk saya?

Hubungi saya di Topmate Untuk Persediaan Temuduga

Atas ialah kandungan terperinci Menyahkod StyleX: Sistem Penggayaan Terkemuka Meta. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!