6 Jenis CSS Preprocessor untuk Web Development

Dahulu kala, menulis kode CSS memang cukup menyenangkan, tetapi juga sangat melelahkan. Niat awal hanya akan menulis 100 baris kode, berujung menjadi lebih dari 3 ribu baris. Meski sudah menggunakan komentar sepanjang cerpen, saya kerap tersesat di belantara kode-kode itu. Ya, memang begitulah kehidupan seorang CSS web developer.

Tetapi semua itu berubah saat ada yang namanya CSS preprocessor. Menulis baris demi baris kode CSS menjadi lebih singkat dan lebih mudah dikelola karena modular.

Apa Itu CSS Preprocessor?

CSS preprocessor adalah adalah alat atau bahasa yang digunakan untuk mengubah kode CSS menjadi kode CSS yang lebih efisien dan mudah dikelola. Preprocessor juga memungkinkan kita untuk memperluas kemampuan CSS. Misalnya adanya variabel, fungsi, operasi matematika, dan nesting.

Untuk yang belum familiar dengan preprocessor, prosesnya seperti ini: ketika mengembangkan sebuah website, kita menulis CSS menggunakan CSS preprocessor agar proses pengembangan lebih efisien dan lebih cepat.

Contoh penulisan kode CSS menggunakan SCSS:

figcaption {
    font-style: italic;
    font-size: 1rem;

    &.figcaption {
        &__quote {
            color: $black-color;
            font-weight: 600;
            font-size: 1.5rem;

            &::before {
                content: "— ";
            }
        }
    }
}

TETAPI, browser tidak dapat membaca kode tersebut. Maka, kode SCSS tadi akan di-compile atau diterjemahkan oleh compiler ke dalam kode CSS biasa yang bisa dibaca oleh browser seperti ini:

figcaption {
  font-style: italic;
  font-size: 1rem;
}

figcaption.figcaption__quote {
  color: #111;
  font-weight: 600;
  font-size: 1.5rem;
}

figcaption.figcaption__quote::before {
  content: "— ";
}

Contoh vanilla CSS:

/* Vanilla CSS */
.header {
  color: #111;
}

.header h1 {
  text-align: center;
}

Contoh SCSS:

// SCSS
.header {
  color: #111;
  
  h1 {
    text-align: center;
  }
}

Bagi yang belum terbiasa, menggunakan CSS preprocessor mungkin terlihat sia-sia atau sama saja karena begitu juga pemikiran saya dahulu. Tetapi, setelah mencoba dan terbiasa, kutakmau kembali ke CSS biasa. :D

Perbedaan CSS Preprocessor dengan CSS Framework

Apa bedanya antara CSS preprocessor dengan CSS framework?

Bagi Anda yang belum familiar atau belum terbiasa menggunakan dan sedikit bingung dengan perbedaan keduanya, mari kita analogikan CSS sebagai kain bahan untuk membuat baju. Saat kita menggunakan vanilla CSS, kita menjahitnya secara manual atau jahit tangan. Sedangkan CSS preprocessor adalah mesin jahit yang bisa kita gunakan agar proses membuat baju lebih cepat dan lebih rapi.

CSS framework, di sisi lain, adalah lemari berisi baju-baju yang sudah siap pakai. Di dalam lemari tersebut sudah tersedia berbagai model, kita tinggal memilih model baju seperti apa yang akan kita kenakan.

BACA JUGA

CSS Framework Terbaik

Ada pepatah yang mengatakan bahwa front-end developer tanpa CSS framework ibarat nasi tanpa garam. Well okay, pepatah itu saya karang barusan, hanya …

Baca Selengkapnya

Jadi, pada dasarnya CSS preprocessor adalah cara kita menulis kode CSS. Preprocessor tidak memberikan class atau mengatur tampilan apa pun, kitalah yang mengatur dan menulis semuanya. Mereka hanya memfasilitasi dengan software yang memungkinkan kita menulis CSS dengan lebih efisien. Sedangkan CSS framework adalah sekumpulan aturan CSS yang sudah siap pakai, kita tak perlu mengatur property dan value-nya karena sudah diatur oleh framework.

CSS Preprocessor untuk Web Development

1. Sass (Syntactically Awesome Stylesheets)

Sass adalah salah satu preprocessor CSS yang paling populer. Ini memungkinkan Anda untuk menulis kode CSS dengan sintaks yang lebih ekspresif dan fitur-fitur seperti variabel, mixin, dan nested rules. Sass kemudian dikompilasi menjadi kode CSS standar sebelum digunakan di situs web Anda.

2. SCSS (Sassy CSS)

Ini adalah sintaks alternatif untuk Sass yang lebih mirip dengan CSS konvensional daripada sintaks Sass asli. SCSS menggunakan kurung kurawal dan titik koma seperti CSS standar, yang membuatnya lebih mudah diterima oleh banyak pengembang yang sudah terbiasa dengan CSS. Saya sendiri lebih sering menggunakan SCSS karena menurut saya ini lebih mudah digunakan.

3. Less (Leaner Style Sheets)

Less adalah preprocessor CSS lain yang mirip dengan Sass. Ini menambahkan fitur-fitur seperti variabel, fungsi, dan mixin ke dalam CSS, dan kemudian menghasilkan kode CSS konvensional saat dikompilasi.

// Contoh penulisan variabel dengan Less
@width: 10px;
@height: @width + 10px;

#header {
  width: @width;
  height: @height;
}

4. Stylus

Stylus adalah preprocessor CSS yang memiliki sintaks yang sangat ringkas dan ekspresif. Ini adalah salah satu preprocessor yang paling fleksibel dalam hal sintaks. Stylus juga memiliki berbagai plugin yang memperluas fungsionalitasnya.

// Contoh penulisan variabel dengan Stylus
font-size = 14px

body
  font font-size Arial, sans-serif

//Compiles to:
body {
  font: 14px Arial, sans-serif;
}

5. PostCSS

PostCSS berbeda dari Sass, Less, dan Stylus karena bukan preprocessor sejati, melainkan sebuah alat pengolahan CSS yang dapat memanipulasi dan mengubah kode CSS Anda. PostCSS sangat modular dan dapat digunakan dengan berbagai plugin untuk melakukan berbagai transformasi pada kode CSS Anda.

6. CSS-in-JS

Ini adalah pendekatan di mana Anda menulis gaya menggunakan JavaScript daripada preprocessor CSS tradisional. Beberapa library populer yang mendukung pendekatan ini adalah Styled-components, Emotion, dan JSS.

Mana yang lebih baik di antara keenam preprocessor CSS tersebut? Tidak ada jawaban pasti untuk itu. Jawabannya tergantung pada preferensi pribadi dan jenis web yang sedang dikembangkan.