Panduan Gaya Sass: Tutorial Sass tentang Cara Menulis Kode CSS yang Lebih Baik

Menulis CSS yang konsisten dan mudah dibaca yang akan diskalakan dengan baik adalah proses yang menantang. Terutama ketika style sheet menjadi lebih besar, lebih kompleks, dan lebih sulit untuk dirawat. Salah satu alat yang tersedia bagi pengembang untuk menulis CSS yang lebih baik adalah praprosesor. Praprosesor adalah program yang mengambil satu jenis data dan mengubahnya menjadi jenis data lain, dan dalam kasus kami praprosesor CSS adalah bahasa prapemrosesan yang dikompilasi ke CSS. Ada banyak praprosesor CSS yang direkomendasikan dan digunakan oleh pengembang front-end, tetapi dalam artikel ini kita akan fokus pada Sass. Mari kita lihat apa yang ditawarkan Sass, mengapa ini adalah pilihan yang lebih disukai daripada praprosesor CSS lainnya, dan bagaimana mulai menggunakannya dengan cara terbaik.

Apa Sass dan Mengapa Anda Harus Menggunakannya?

Bagi Anda yang tidak tahu apa itu Sass, titik awal terbaik adalah mengunjungi halaman web resmi Sass. Sass adalah singkatan dari Syntactically Awesome StyleSheets, dan merupakan perpanjangan dari CSS yang menambahkan kekuatan dan keanggunan pada bahasa dasar.

Sass adalah praprosesor CSS dengan banyak fitur canggih. Fitur yang paling menonjol adalah variabel, ekstensi, dan mixin.

Variabel menyimpan informasi yang dapat digunakan kembali nanti, seperti warna atau nilai lain yang umum digunakan. Extends membantu Anda membuat "kelas" yang memungkinkan pewarisan aturan. Mixin, Anda bisa memikirkan seperti "fungsi". Sass juga memiliki beberapa fitur luar biasa lainnya dibandingkan dengan preprosesor lain, seperti penggunaan pernyataan logika (kondisional dan loop), fungsi kustom, integrasi dengan perpustakaan lain seperti Compas, dan banyak lagi. Fitur-fitur ini saja dapat membantu Anda dan tim Anda menjadi lebih produktif dan pada akhirnya menulis CSS yang lebih baik.

Mengapa Anda Membutuhkan Panduan Gaya CSS

Sayangnya, bahkan praprosesor tidak dapat memperbaiki semuanya dan membantu Anda menulis kode CSS yang baik. Masalah yang dihadapi setiap pengembang adalah aplikasi web saat ini menjadi semakin besar. Itu sebabnya kode harus dapat diskalakan dan dapat dibaca, dan perlu menghindari kode spageti dan baris yang tidak digunakan. Untuk menghindari masalah tersebut, diperlukan semacam standar untuk tim Anda dalam pekerjaan sehari-hari. Apa itu kode spageti, dan bagaimana itu terjadi? Kode spageti adalah nama untuk kode yang buruk, lambat, berulang, dan tidak terbaca. Ketika sebuah tim menulis aplikasi besar tanpa pedoman atau standar yang ditetapkan, setiap pengembang menulis apa yang dia butuhkan dan bagaimana dia inginkan. Juga ketika pengembang menulis banyak perbaikan bug, perbaikan terbaru, dan tambalan, mereka cenderung menulis kode yang akan menyelesaikan masalah tetapi tidak punya waktu untuk menulis kode dengan cara terbaik. Dalam situasi ini, sangat biasa berakhir dengan banyak baris CSS yang tidak digunakan lagi di sektor aplikasi mana pun. Pengembang tidak memiliki cukup waktu untuk membersihkan kode, dan mereka terpaksa memublikasikan perbaikan secepat mungkin. Situasi berulang lainnya adalah bahwa untuk memperbaiki hal-hal yang rusak dengan cepat, pengembang menggunakan banyak !important , yang menghasilkan kode yang sangat retas yang sulit untuk dipelihara, menghasilkan banyak perilaku yang tidak terduga, dan perlu difaktorkan ulang nanti. Seperti yang sudah disebutkan, ketika kode tumbuh, situasinya menjadi lebih buruk.

Ide artikel ini adalah untuk berbagi aturan, tips, dan praktik terbaik untuk menulis Sass yang lebih baik. Mengelompokkan tips dan praktik terbaik Sass tersebut dapat digunakan sebagai panduan gaya Sass. Panduan gaya ini akan membantu pengembang untuk menghindari situasi yang disebutkan di atas. Aturan dikelompokkan ke dalam segmen logis untuk referensi yang lebih mudah, tetapi pada akhirnya Anda harus mengadopsi dan mengikuti semuanya. Atau setidaknya, kebanyakan dari mereka.

Panduan Gaya

Serangkaian aturan dan praktik terbaik dalam panduan gaya ini diadopsi berdasarkan pengalaman bekerja dengan banyak tim. Beberapa dari mereka datang dari trial by error, dan yang lain terinspirasi oleh beberapa pendekatan populer seperti BEM. Untuk beberapa aturan, tidak ada alasan khusus mengapa dan bagaimana aturan itu ditetapkan. Terkadang memiliki pengalaman masa lalu sebagai satu-satunya alasan sudah cukup. Misalnya, untuk memastikan bahwa kode dapat dibaca, penting bahwa semua pengembang menulis kode dengan cara yang sama, sehingga ada aturan untuk tidak menyertakan spasi di antara tanda kurung. Kita bisa berdebat apakah lebih baik memasukkan spasi di antara tanda kurung atau tidak. Jika menurut Anda itu terlihat lebih baik ketika ada spasi di antara tanda kurung, sesuaikan panduan gaya dan aturan ini dengan preferensi Anda. Pada akhirnya, tujuan utama dari panduan gaya adalah untuk mendefinisikan aturan, dan membuat proses pengembangan menjadi lebih standar.

Aturan CSS Umum

Aturan umum harus selalu diikuti. Mereka sebagian besar berfokus pada bagaimana kode Sass harus diformat untuk menghadirkan konsistensi dan keterbacaan kode:

• Untuk indentasi, gunakan spasi alih-alih tab. Praktik terbaik adalah menggunakan 2 spasi. Anda dapat menjalankan perang suci Anda sendiri dengan opsi ini, dan Anda dapat menentukan aturan Anda sendiri dan menggunakan tab, atau spasi, atau apa pun yang paling cocok untuk Anda. Penting untuk mendefinisikan aturan dan mengikuti aturan itu sambil tetap konsisten.
• Sertakan satu baris kosong di antara setiap pernyataan. Ini membuat kode lebih mudah dibaca manusia, dan kode ditulis oleh manusia, bukan?
• Gunakan satu pemilih per baris, seperti ini:

 selector1, selector2 { }

• Jangan sertakan spasi di antara tanda kurung.

 selector { @include mixin1($size: 4, $color: red); }

• Gunakan tanda kutip tunggal untuk menyertakan string dan URL:

 selector { font-family: 'Roboto', serif; }

• Akhiri semua aturan dengan titik koma tanpa spasi sebelum:

 selector { margin: 10px; }

Aturan untuk Selector

Selanjutnya kita mengikuti seperangkat aturan untuk digunakan ketika berhadapan dengan penyeleksi:

• Hindari penggunaan pemilih ID. ID terlalu spesifik dan sebagian besar digunakan untuk tindakan JavaScript.
• Hindari !important . Jika Anda perlu menggunakan aturan ini, itu berarti ada yang salah dengan aturan CSS Anda secara umum, dan CSS Anda tidak terstruktur dengan baik. CSS dengan banyak !important dapat dengan mudah disalahgunakan dan berakhir dengan kode CSS yang berantakan dan sulit dipelihara.
• Jangan gunakan pemilih anak. Aturan ini memiliki alasan yang sama dengan ID. Selektor anak terlalu spesifik dan digabungkan erat dengan struktur HTML Anda.

Pertahankan Aturan Sass Anda secara Teratur

Penting untuk menjaga konsistensi dalam kode. Salah satu aturan adalah Anda harus menjaga ketertiban aturan. Dengan cara ini pengembang lain dapat membaca kode dengan lebih banyak pemahaman, dan akan menghabiskan lebih sedikit waktu untuk menemukan jalan mereka. Berikut adalah urutan yang diusulkan:

1. Gunakan @extend terlebih dahulu. Ini memberi tahu Anda pada awalnya bahwa kelas ini mewarisi aturan dari tempat lain.
2. Gunakan @include berikutnya. Memiliki mixin dan fungsi Anda yang disertakan di atas bagus untuk dimiliki, dan juga memungkinkan Anda mengetahui apa yang akan Anda timpa (jika diperlukan).
3. Sekarang Anda dapat menulis kelas CSS atau aturan elemen biasa.
4. Tempatkan kelas pseudo bersarang dan elemen semu sebelum elemen lainnya.
5. Terakhir, tulis pemilih bersarang lainnya seperti pada contoh berikut:

 .homepage { @extend page; @include border-radius(5px); margin-left: 5px; &:after{ content: ''; } a { } ul { } }

Beberapa konvensi penamaan

Konvensi penamaan bagian dari buku gaya didasarkan pada dua konvensi penamaan BEM dan SMACSS yang ada yang menjadi populer di kalangan pengembang. BEM adalah singkatan dari Block, Element, Modifier. Ini dikembangkan oleh tim YANDEX, dan ide di balik BEM adalah untuk membantu pengembang memahami hubungan antara HTML dan CSS dalam proyek. SMACSS di sisi lain adalah singkatan dari Scalable and Modular Architecture for CSS. Ini adalah panduan untuk menyusun CSS untuk memungkinkan pemeliharaan.

Terinspirasi oleh mereka, aturan konvensi penamaan kami adalah sebagai berikut:

• Gunakan awalan untuk setiap jenis elemen. Awali blok Anda, seperti: tata letak ( l- ), modul ( m- ), dan status ( is- ).
• Gunakan dua garis bawah untuk elemen anak untuk setiap blok:

 .m-tab__icon {}

• Gunakan dua tanda hubung untuk pengubah untuk setiap blok:

 .m-tab--borderless {}

Variabel

Gunakan variabel. Mulailah dengan variabel yang lebih umum dan global seperti warna, dan buat file terpisah _colors.scss . Jika Anda menyadari bahwa Anda mengulangi beberapa nilai pada lembar gaya beberapa kali, buka dan buat variabel baru untuk nilai tersebut. Silakan KERING. Anda akan bersyukur ketika Anda ingin mengubah nilai itu, dan ketika Anda perlu mengubahnya hanya di satu tempat.

Juga, gunakan tanda hubung untuk memberi nama variabel Anda:

 $red : #f44336; $secondary-red :#ebccd1;

Pertanyaan Media

Dengan Sass Anda dapat menulis kueri media sebagai kueri elemen. Sebagian besar pengembang menulis kueri media dalam file terpisah atau di bagian bawah aturan kami, tetapi itu tidak disarankan. Dengan Sass Anda dapat menulis hal-hal seperti contoh berikut dengan membuat kueri media:

 // ScSS .m-block { &:after { @include breakpoint(tablet){ content: ''; width: 100%; } } }

Ini menghasilkan CSS seperti ini:

 // Generated CSS @media screen and (min-width: 767px) { .m-block:after { content: ''; width: 100%; } }

Aturan kueri media bersarang ini memungkinkan Anda mengetahui dengan jelas aturan apa yang Anda timpa, seperti yang dapat Anda lihat di cuplikan Sass tempat kueri media bernama digunakan.

Untuk membuat kueri media bernama, buat mixin Anda seperti ini:

 @mixin breakpoint($point) { @if $point == tablet { @media (min-width: 768px) and (max-width: 1024px) { @content; } } @else if $point == phone { @media (max-width: 767px) { @content; } } @else if $point == desktop { @media (min-width: 1025px) { @content; } } }

Anda dapat membaca selengkapnya tentang penamaan kueri media di artikel berikut: Memberi Nama Kueri Media dan Menulis Kueri Media yang Lebih Baik dengan Sass.

Pertimbangan lainnya

Pada akhirnya, berikut adalah beberapa pertimbangan lain yang juga harus Anda ingat dan ikuti:

• Jangan pernah menulis awalan vendor. Gunakan autoprefixer sebagai gantinya.
• Gunakan maksimum tiga level aturan terdalam dalam aturan bersarang. Dengan lebih dari tiga level bersarang, kode akan sulit dibaca, dan mungkin Anda menulis pemilih yang jelek. Pada akhirnya, Anda menulis kode CSS untuk dipasangkan dengan HTML Anda.

 .class1 { .class2 { li { //last rules } } }

• Jangan menulis lebih dari 50 baris kode bersarang: Atau lebih baik, jangan menulis lebih dari X baris kode bersarang. Siapkan X Anda sendiri, tetapi 50 sepertinya batas yang bagus. Jika Anda melewati batas itu mungkin blok kode tidak akan muat di jendela editor teks Anda.
• Tulis file utama tempat Anda akan mengimpor semua blok, sebagian, dan konfigurasi Anda.
• Impor vendor dan dependensi global terlebih dahulu, lalu dependensi yang dibuat, lalu tata letak, pola, dan terakhir bagian dan blok. Hal ini penting untuk menghindari campuran impor dan penimpaan aturan, karena vendor dan aturan global tidak dapat kami kelola.
• Jangan malu dan pecahkan kode Anda dalam file sebanyak mungkin.

Kesimpulan

Gagasan di balik panduan gaya ini adalah untuk memberi Anda beberapa saran tentang cara meningkatkan cara Anda menulis kode Sass Anda. Harap diingat bahwa meskipun Anda tidak menggunakan Sass, tips dan aturan yang diberikan dalam panduan gaya ini juga berlaku dan disarankan untuk diikuti jika Anda menggunakan Vanilla CSS atau praprosesor lainnya. Sekali lagi, jika Anda tidak setuju dengan aturan mana pun, ubah aturan agar sesuai dengan cara berpikir Anda. Pada akhirnya, terserah Anda dan tim Anda untuk mengadaptasi panduan gaya ini, menggunakan beberapa panduan gaya lain, atau membuat yang benar-benar baru. Cukup tentukan panduannya, dan mulailah menulis kode yang luar biasa.