Students Save 30%! Learn & create with unlimited courses & creative assets Students Save 30%! Save Now
Advertisement
  1. Web Design
  2. CSS
Webdesign

Memahami Statistik CSS: Cara Memaksimalkan Angka

by
Difficulty:IntermediateLength:LongLanguages:

Indonesian (Bahasa Indonesia) translation by Suci Rohini (you can also view the original English article)

Jika Anda tidak memperhatikan, situs analisis CSS cssstats.com menerima perbaikan baru-baru ini. Ini adalah alat yang dirancang dengan indah yang memberi Anda banyak wawasan obyektif ke dalam kode Anda, tetapi bagaimana Anda dapat memanfaatkan statistik CSS dengan sebaik-baiknya? Apa yang harus Anda perhatikan? Apa maksudnya, dan bagaimana Anda bisa menggunakannya sehari-hari?

Hari ini, kita akan membahas tentang praktik terbaik, spesifisitas, dan pemeliharaan CSS, plus Anda akan belajar cara menafsirkan dengan benar dan memanfaatkan statistik CSS dengan lebih baik. Mari selami!

Panduan Mulai Cepat untuk Statistik CSS

Lanjutkan ke cssstats.com, masukkan url situs web Anda, stylesheetnya, atau tempelkan CSS mentah langsung ke textarea di bagian bawah dan tekan Go.

Setelah diuraikan, Anda akan diberi banyak statistik tentang CSS; dari jumlah aturan yang digunakan, ukuran rata-rata mereka, rincian dari setiap jenis deklarasi, font dan warna background, fariasi font dan ukuran, dan grafik kekhususan.

Itulah yang diberikan oleh Statistik CSS, sekarang mari kita lihat apa yang bisa kita lakukan dengan semua data.

Fokus pada Maintainability

Sebagai pengembang front-end, kita selalu prihatin tentang kinerja dan pengalaman pengguna. Kita juga bertanggung jawab untuk membangun perangkat lunak, tetapi kata "perangkat lunak" begitu asing bagi banyak pengembang front-end yang berasal dari latar belakang desain. Sangat mudah untuk mengabaikan praktik terbaik saat kita mengkodekan CSS.

Namun, kenyataannya adalah pengembangan front-end, sama seperti pengembangan perangkat lunak lainnya, membutuhkan fokus pada praktik terbaik. Aturan untuk praktik terbaik telah banyak dibahas di web, tetapi demi artikel ini, kita akan mengasah apa yang boleh dibilang praktik yang paling penting yang berkaitan dengan CSS: pemeliharaan.

Pemeliharaan CSS berpusat pada banyak aspek yang berbeda.

  • Seberapa mudah Anda dapat mendesain modul tertentu?
  • Seberapa mudah Anda dapat mendesain versi modifikasi dari modul itu?
  • Dapatkah pengembang baru memahami sistem CSS Anda secara komprehensif?
  • Apakah CSS Anda dapat diprediksi, konsisten, dan terorganisir?
  • Apakah Anda mengandalkan preprocessor (atau alat lain) untuk membuat pengembangan dan segmentasi lebih fleksibel?
  • Apakah Anda sering mengulanginya sendiri?
  • Apakah Anda menggunakan penamaan dan gaya konvensi yang ditetapkan sebelumnya?

Kita tidak akan menyelami masing-masing item ini secara individual, tetapi ketika kita berbicara tentang pemeliharaan, masing-masing pertimbangan ini mempengaruhi pemeliharaan basis kode Anda secara keseluruhan.

Jadi, apa yang statistik ini katakan tentang pemeliharaan?

Jawaban yang jujur? Tidak ada, selalu. Anda tidak belajar apa pun tentang pemeliharaan hanya dengan melihat statistik CSS. Anda juga harus memahami konteks CSS tertentu, serta konteks pengembangan aktif.

Cara pertama untuk menganalisis statistik CSS Anda adalah mencari tanda-tanda bloat CSS.

Bloat

Dengan bloat berarti CSS yang tidak digunakan, berlebihan, atau tidak perlu.

Berapa skala situs yang memuat CSS?

Misalkan, misalnya, aplikasi satu halaman yang memiliki lima modul konten yang berbeda. Apa jenis statistik CSS yang Anda harapkan untuk satu halaman? Aplikasi halaman tunggal yang khas mungkin memiliki sebagian kecil dari jumlah aturan CSS dan mungkin setengah jumlah deklarasi warna sebagai situs penerbitan berita besar atau aplikasi SAAS multi-faceted.

Jika Anda melihat sejumlah besar pemilih (misalnya, jika situs satu halaman sederhana Anda mencakup sebanyak CSS sebagai kerangka web seperti Bootstrap, yang hanya memiliki kurang dari 2400 pemilih), kemungkinan Anda salah di suatu tempat. Jika Anda memuat dalam 30 ukuran font dan panggilan desain Anda untuk 10, kemungkinan Anda memiliki gaya yang tidak terpakai, membengkak, atau mungkin tidak konsisten.

Pengecualian yang mungkin untuk aturan ini, yang berkaitan dengan pemeliharaan, adalah jika Anda benar-benar menggunakan Bootstrap atau kerangka kerja populer lainnya yang didokumentasikan dengan baik; karena dokumentasi pada proyek tersebut relatif dalam dan penggunaannya telah menjenuhkan web, pengembang ujung depan tidak perlu memelihara Bootstrap, selama sumber utama mempertahankan implementasi inti Bootstrap. Namun, jika Anda menyertakan kerangka Bootstrap hanya untuk kisi atau beberapa elemen UI, Anda sebaiknya membuat versi khusus yang tidak menyertakan CSS tambahan yang tidak pernah Anda rencanakan untuk digunakan.

Apa jenis halaman yang memuat situs?

Ada kemungkinan aplikasi Anda melakukan sesuatu yang memerlukan banyak pemilih, warna, atau ukuran font. Misalnya, jika Anda menjalankan toko online yang menggunakan warna produk, kemungkinan sejumlah besar warna dapat muncul di CSS Anda dan menjadi kasus yang sepenuhnya sah. Contoh lain adalah jika Anda menjalankan situs yang memungkinkan pengguna untuk memilih dari daftar ukuran font dan font untuk konten yang mereka buat. Dalam contoh-contoh ini, masuk akal untuk melihat jumlah besar dalam kategori-kategori khusus tersebut.

medium font size
Medium.com menggunakan font berukuran 301px di suatu tempat ..

Namun, jika Anda membuat sesuatu seperti, misalnya, blog dengan skema warna terbatas, Statistik CSS Anda harus mencerminkan pemilihan warna dan jumlah deklarasi font.

Redundansi Antar Aturan

Apakah Anda menentukan ukuran font yang sama dua puluh kali di CSS Anda? Sangat sering hal ini dapat dihindari, dan biasanya disebabkan oleh kurangnya perencanaan. Jika Anda menentukan ukuran font Anda sebelum menulis CSS lain, Anda akan lebih mudah untuk menerapkan ukuran tersebut di seluruh sistem.

Hal yang sama berlaku untuk gaya berulang; jika Anda menemukan diri Anda menulis hal yang sama beberapa kali, mungkin rangkaian gaya itu layak kelas presentasional atau semantiknya sendiri atau definisi modular lainnya?

Jangan berlebihan di sini; mendefinisikan ulang beberapa ukuran font atau warna latar belakang bukan masalah besar. Namun, mendefinisikan ulang sejumlah gaya beberapa kali pada modul yang sangat mirip dapat berarti bahwa Anda harus memperluas kelas dasar. Misalnya, jika Anda memiliki kelas tombol:

Katakanlah Anda menginginkan versi biru dari tombol yang sama. Bagaimana seharusnya Anda mendefinisikannya? Jika Anda mendefinisikan kembali kelas btn yang sama, itu akan terlihat seperti ini:

Tentu saja, ada banyak masalah dengan hal ini. Pertama, ini melanggar prinsip DRY (jangan ulangi sendiri). Tapi mengapa itu penting? Maintainability. Katakan saja, misalnya, bahwa desain berubah dan panggilan untuk font yang lebih kecil pada tombol. Anda kemudian harus masuk ke kelas .btn dan .btn-blue untuk mengubah ukuran font. Lebih banyak kerumitan terjadi ketika Anda membutuhkan varian tombol abu-abu biru dan biasa, seperti versi garis-biru. Semua perubahan Anda ke salah satu tombol harus dilakukan ke banyak tombol.

Ini sangat tidak efisien. Sebaliknya, Anda harus mengambil keuntungan dari fakta bahwa kelas adalah modular, dan memungkinkan Anda untuk menentukan gaya tombol yang memperpanjang basis kelas.btn Anda.

Nah! Dan sekarang kita memiliki solusi yang lebih mudah dipertahankan, yang juga menghapus sejumlah besar baris CSS dan mengikuti prinsip DRY.

Spesifikasi

Kekhususan adalah salah satu sudut gelap yang sulit dipahami CSS yang sering kali menjelajah bahkan oleh pengembang yang paling berpengalaman sekalipun. Pada Statistik CSS, Anda dapat melihat grafik kekhususan yang menunjukkan seberapa spesifik pemilih dalam CSS Anda, serta di mana pemilih tersebut muncul.

BBC specificity
Kekhususan CSS dari situs web BBC

Grafik ini menunjukkan kekhususan pemilih karena mereka ditemui dalam CSS dari bbc.co.uk. Bayangkan sebelah kiri grafik adalah bagian atas stylesheet, lalu bergerak sepanjang sumbu x saat membaca lembar stylesheet. Semakin spesifik aturannya, semakin tinggi garis biru gelap pada sumbu y.

Aturan kekhususan Praktis

Kami akan memberikan tiga "aturan praktis" umum untuk memulainya, dan kemudian menjelaskan aturannya.

  1. Mulai dari yang kurang spesifik hingga lebih spesifik
  2. Potret untuk spesifisitas rata-rata terendah
  3. Kurangi puncak di grafik Anda

Kita akan membicarakan masing-masing hal ini secara lebih mendalam, tetapi pertama-tama mari kita bicara sedikit tentang bagaimana spesifisitas bekerja.

Pemilih CSS diberi skor spesifisitas untuk menginformasikan mesin perenderan browser yang aturan berlaku untuk elemen apa. Alasan ini diperlukan juga alasan mengapa CSS sangat kuat: gaya dapat diwariskan dan mengalir dalam CSS. Ini berarti Anda dapat menerapkan lebih dari satu rangkaian gaya ke elemen apa pun yang diberikan. Mesin rendering harus mengkonsolidasikan semua aturan ini dan menyajikan sesuatu, tetapi apa yang terjadi ketika dua nilai yang berbeda ditetapkan untuk deklarasi gaya yang sama? Sebagai contoh:

Ketika mesin CSS menemukan tag <a> dengan kelas button, itu harus menentukan apakah atribut color harus #fff, #000 atau default Kekhususan CSS adalah aturan yang digunakan browser untuk membuat penentuan ini.

Poin

Jadi, bagaimana kekhususan bekerja? Gunakan sistem penilaian ini sebagai panduan, diambil langsung dari Trik CSS:

  • Pemilih elemen dan elemen pseudo menerima 1 poin.
  • Kelas pemilih dan pseudo-class menerima 1,0 poin.
  • Penyeleksi ID menerima 1,0,0 poin.
  • Gaya sebaris menerima 1,0,0,0 poin.
  • !Important mengalahkan mereka semua
  • * pemilih mendapatkan skor spesifisitas dari semua 0.

Perhatikan bahwa dalam sistem penilaian ini, ketika sesuatu berjalan di atas 10, itu tidak masuk ke kolom berikutnya, jadi misalnya jika Anda memiliki pemilih yang 11 elemen panjang, itu tidak akan tumpah menjadi kekhususan 0, 0,1,1. Sebaliknya akan 0,0,0,11.

Berikut adalah beberapa penyeleksi dan nilai yang dihasilkan mereka.

Oke - sekarang kita punya primer dasar dari jalan untuk kekhususan CSS, bagaimana seharusnya itu mempengaruhi kode kita? Mari kembali ke tiga aturan praktis untuk kekhususan CSS.

#1 Pergi dari yang kurang spesifik ke yang lebih spesifik

Aturan ini pada dasarnya menyatakan bahwa pemilih umum harus berada di awal CSS Anda, dan pemilih yang lebih spesifik akan datang nanti di CSS Anda. Alasan untuk aturan ini banyak.

Pertama, menempatkan aturan umum di awal aplikasi Anda biasanya menetapkan tahap di kode Anda untuk modul dasar yang akan dibuat. Dalam hubungannya dengan #2, memiliki gaya yang paling tidak spesifik di awal memastikan bahwa Anda menulis dengan sedikit spesifisitas terlebih dahulu. Kemudian, ketika kode Anda berevolusi, penambahan gaya yang lebih spesifik mungkin diperlukan untuk mengesampingkan atau memperpanjang gaya sebelumnya.

apple css specificity
Gaya pada situs web Apple sangat spesifik sejak awal di stylesheet
pure css specificity
Kekhususan kerangka kerja CSS Murni umumnya meningkat menjelang akhir stylesheet

Ini mengarah ke poin kedua kita: apa yang terjadi ketika mesin render CSS bertemu dengan dua pemilih yang memiliki skor yang sama? Masih harus memilih, sehingga akan memilih yang terakhir dari dua aturan. Dengan menghapus ke yang paling tidak spesifik di awal file Anda, Anda memastikan bahwa kekhususan Anda menimpa lebih spesifik saat Anda masuk nanti ke dalam file. Ini berarti bahwa satu kelas kemudian di file harus dianggap dapat menggantikan kelas tunggal sebelumnya di file.

Praktek ini akan memastikan bahwa perkembangan selanjutnya pada proyek yang sama dapat dengan cepat memahami sistem kaskade.

#2 Potret untuk spesifisitas rata-rata terendah yang mungkin

Jika Anda sudah lama menjadi pengembang front-end, Anda mungkin mengalami "perang kekhususan CSS". Anda menulis pemilih dan beberapa aturan, lalu segarkan browser hanya untuk menemukan perubahan yang belum diterapkan. Anda tahu dari proyek sebelumnya atau dari percakapan tentang kekhususan karena pemilih Anda tidak cukup spesifik, jadi daripada mencoba melacak kembali masalah ke pemilih yang terlalu spesifik, Anda memutuskan untuk membuat yang baru lebih spesifik. Anda menambahkan ID atau dua, dan jika itu tidak melakukan trik, Anda hanya melempar !important dalam hal itu. Dan, tada - gaya Anda muncul.

Pendekatan ini bekerja, secara teknis; tetapi sayangnya, kapan pun Anda ingin memperluas gaya itu, Anda harus terus mengembangkan kerumitannya, dan sebelum Anda tahu pemilih Anda sangat spesifik, dan Anda harus mengulang kode daripada hanya menggunakan kembali kelas. Selain itu, hampir tidak mungkin untuk menentukan tingkat spesifikitas apa yang harus dimiliki gaya baru tanpa menambahkan lebih banyak ID dan deklarasi !important.

Menjaga pemilih Anda kurang spesifik adalah cara yang lebih sehat dan lebih mudah dikelola untuk menangani CSS Anda.

Beberapa Tips pro:

  • Secara default, pilih kelas lebih dari ID. Praktek ini memecahkan sebagian besar masalah kekhususan dalam satu langkah.
  • Jangan menumpuk pemilih Anda lebih jauh dari tiga atau empat tingkat, dan pastikan Anda perlu untuk sekumpulan. Nesting seharusnya hanya terjadi ketika memperluas kelas yang ditentukan sebelumnya, dan tidak boleh digunakan hanya untuk organisasi kode. Nesting dapat digunakan untuk definisi kelas Anda di masa depan, tetapi kelas yang dapat digunakan kembali harus digunakan sedapat mungkin.

#3 Kurangi puncak di grafik Anda

Aturan ini terutama di tempat untuk menghindari aturan aneh ditempatkan. Misalnya, jika Anda mendefinisikan beberapa kelas untuk presentasi teks, dan tiba-tiba memiliki aturan yang menyarangkan enam kelas dan ID, aturan tersebut harus ditempatkan secara kontekstual dengan pemilih yang lebih spesifik yang terkait dengannya.

Penyelesaian

Statistik CSS dapat memberi Anda wawasan tentang cara CSS Anda ditulis, tetapi ini hanya berguna jika Anda memiliki gagasan tentang seperti apa statistik itu seharusnya sebelum mencoba menganalisisnya. Ini berarti memiliki pemahaman kontekstual yang mendalam tentang cara CSS Anda ditulis dan alasannya. Jika CSS Anda dapat dipertahankan dan sesuai untuk situs yang digunakan, statistik dari CSS itu tidak cukup alasan untuk memperbaiki kode Anda.

Daripada mengikuti aturan nomor secara membabi buta, sebagai pengembang front-end yang bertanggung jawab, Anda harus fokus untuk membuat kode Anda dapat dipertahankan dan mengurangi gejolak. Statistik tentang kode Anda dapat membantu Anda menemukan area masalah, tetapi mereka hanya dapat berjalan sejauh ini.

Bacaan lebih lanjut

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.