Memikirkan Ulang CSS in JS

CSS adalah elemen inti yang membuat antarmuka pengguna menjadi indah dan fungsional, tetapi seiring skala yang membesar, pengelolaan CSS menjadi pekerjaan yang semakin sulit.

Benturan style, penurunan performa, dan sulitnya pemeliharaan adalah masalah yang mengganggu banyak pengembang.

Tulisan ini menjelaskan secara rinci pendekatan baru untuk menyelesaikan masalah-masalah tersebut, khususnya CSS in JS.
Dimulai dari latar belakang historis CSS, tulisan ini membahas beragam topik secara luas, dari metode styling modern hingga design system masa depan.

Struktur tulisannya adalah sebagai berikut.

1. Definisi dan latar belakang CSS di JS
   1. Apa itu CSS di JS?
   2. Latar belakang CSS di JS
2. Konteks historis CSS dan desain
   3. Latar belakang CSS
   4. Latar belakang desain
   5. Latar belakang design system
3. Analisis metode pengelolaan style dan usulan baru
   6. Bagaimana style dikelola selama ini?
   7. Bagaimana seharusnya style dikelola?
4. Rencana implementasi konkret CSS untuk JS
   8. Mengapa ada CSS di JS?
   9. Memperkenalkan proyek mincho
   10. CSS yang ramah CSS untuk JS
   11. CSS yang dapat diskalakan di JS
5. Integrasi dengan design system
   12. CSS di JS untuk design system

Secara khusus, tulisan ini memperkenalkan metodologi SCALE CSS dan konsep baru bernama StyleStack, lalu mengusulkan proyek mincho yang dibangun di atasnya. Tujuannya adalah mengimplementasikan CSS yang ramah CSS dan dapat diskalakan di JS.

Tujuan akhir tulisan ini adalah menunjukkan kemungkinan solusi styling yang lebih baik kepada pengembang, desainer, dan pemangku kepentingan lain dalam proyek web.
Terima kasih telah membaca tulisan yang panjang ini.

[savvykang]

Maaf kalau ini bukan respons yang antusias terhadap proyek ini, tetapi saya merasa industri frontend perlu membuat alat atau konvensi yang disepakati secara luas dengan perspektif yang lebih jangka panjang. Dari sudut pandang seseorang yang punya cukup banyak pengalaman dengan stack seperti SCSS, LESS, AngularJS, Angular 2.0, dan React, teknologi frontend baru terasa terlalu overengineering dan melelahkan secara tidak perlu.

[slowandsnow]

Jika yang menjadi konsensus di web adalah standar web, maka itu sudah ada. Di CSS, hal-hal seperti nesting ala SCSS, class, metode pemrograman fungsional, web component, dan lain-lain terus dibahas serta ditambahkan sebagai fitur.

[alstjr7375]

Menurut saya, karena frontend sendiri belum lama terdiversifikasi, sepertinya berbagai hal masih terus dicoba.
Mulai dari library seperti React dan Vue, hingga tooling secara keseluruhan seperti bundler dan linter.

Selain itu, berbeda dengan ranah aplikasi, tampaknya kebingungannya juga lebih besar karena bukan satu perusahaan saja yang menetapkan lalu menyebarkan best practice!!