CSSX : Solusi pemrograman CSS dalam JavaScript


web development banner

[sumber: PixaBay]

Kini, para developer dapat menggunakan CSS pada pemrograman JavaScript dengan menggunakan seperangkat tool CSSX. Dengan satu set tool ini para developer dapat menuliskan baris-baris kode Vanilla CSS dalam pemrograman JavaScript.

Berdasarkan survei yang diselenggarakan Stack Overflow, bahasa pemrograman JavaScript merupakan bahasa yang paling banyak digunakan pada tahun 2014 hingga tahun 2016. JavaScript sendiri merupakan bahasa pemrograman yang sangat kaya, dinamis, dan sangat banyak digunakan dalam mengembang web saat ini.

Oleh karena itu, CSSX memberikan sebuah solusi untuk memadukan penggunaan CSS ke dalam bagian pemrograman JavaScript, meskipun hanya style sheets dasar untuk saat ini. CSSX bukanlah bahasa pemrograman baru, bahasa CSSX adalah CSS dalam konteks JavaScript.

Konsep yang digunakan pada CSSX sangat sederhana. CSSX mengusung ide untuk mengonversikan object literals ke dalam CSS yang valid. Kemudian styles tersebut diterapkan ke dalam halaman dengan media JavaScript.

Keseluruhan dari style tersebut digabungkan menjadi satu sehingga para developer tak perlu lagi untuk mengatur style sheets eksternal. Akan tetapi, CSSX masih memiliki dua permasalahan dalam proses implementasinya.

Dua permasalahan yang terjadi saat penelitian dengan metode di atas adalah Flash of unstyled text (FOUT) dan ketiadaan style sheet. Para pengguna akan mendapati konten-konten unstyled untuk beberapa saat sebelum mendapati halaman-halaman styled.

Selain itu, telah terdapat beberapa contoh style yang diaplikasikan dengan menggunakan JavaScript, akan tetapi kebanyakan dari conto-contoh tersebut menampilkan inline styles. Oleh karena itu untuk mengatasi dua permasalahan tersebut, sedang dikembangkan CSSX client-side library.

Bagi para developer yang tertarik menggunakan CSSX, para developer dapat mengunjungi halaman GitHub dari CSSX. Dalam laman tersebut para developer dapat menemukan contoh, paket, dan referensi lainnya.

 

[sumber: Smashing Magazine]