Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. CSS
Webdesign

Memahami Statistik CSS: Cara Memaksimalkan Angka

by
Difficulty:IntermediateLength:LongLanguages:

Malay (Melayu) translation by Fariz Alfarizki (you can also view the original English article)

Jika anda tidak memperhatikan, laman web analisis CSS cssstats.com menerima perbaikan terkini baru-baru ini.  Ini adalah alat yang direka dengan indah yang memberi anda banyak objektivitas ke dalam kode anda, tetapi bagaimana anda dapat menggunakan CSS statik dengan sebaik-baiknya? Apa yang perlu anda perhatikan?   Apa maksudnya, dan bagaimana anda boleh menggunakannya sehari-hari? 

Hari ini, kami akan membincangkan tentang best practices, spesifisitas, dan penyelenggaraan CSS, dan Anda akan mempelajari cara menguraikan dengan betul dan memanfaatkan CSS statistika dengan lebih baik.  Mari selami!

Panduan Mulai Cepat untuk Statistik CSS

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

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

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

Fokus pada Kekukuhan

Sebagai pengembang front-end, kami selalu prihatin tentang kinerja dan pengalaman pengguna. Kami juga bertanggungjawab untuk membina perisian, tetapi kata "perisian" begitu asing bagi banyak pengembang front-end yang berasal dari desain latar belakang.   Sangat mudah untuk mengabaikan praktik terbaik ketika kita mengkodekan CSS.

Namun, kenyataannya adalah pengembangan front-end, sama seperti pengembangan perangkat lunak lainnya, memerlukan fokus pada best practice. Aturan untuk praktik terbaik telah banyak dibincangkan di web, tetapi demi artikel ini, kita akan mengasah apa yang paling praktis yang paling penting yang berkaitan dengan CSS: penjagaan.

Pemeliharaan CSS berpusat pada banyak aspek yang berbeza.

  • Seberapa mudah anda boleh mendesain tertentu modul?
  • Seberapa mudah anda boleh mendesain modifikasi versi daripada modul itu?
  • Bolehkah pemaju baru memahami sistem CSS anda secara komprehensif?
  • Adakah CSS anda boleh diprediksi, konsisten, dan terorganisir?
  • Adakah anda bergantung kepada preprocessor (atau alat lain) untuk membuat pengembangan dan segmentasi lebih fleksibel?
  • Adakah anda sering mengulanginya sendiri?
  • Adakah anda menggunakan penamaan dan gaya konvensi yang ditetapkan sebelumnya?

Kita tidak akan menyelami masing-masing item secara individu, tetapi ketika kita berbicara tentang pemeliharaan, masing-masing pemikiran ini mempengaruhi pemeliharaan dasar Anda secara keseluruhan.

Jadi, apa statistik ini katakan tentang pemeliharaan?

Jawapan yang jujur? Tidak ada, selalu.  Anda tidak mempelajari apa-apa tentang pemeliharaan hanya dengan melihat CSS statistik. Anda juga harus memahami sesuatu yang tertentu dalam CSS, serta perkembangan perkembangan aktif.

Cara pertama untuk menganalisis statistik CSS Anda adalah mencari simbol-simbol gumpalan CSS.

Kencang

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

Berapa skala tapak yang memuat CSS?

Misalkan, contohnya, aplikasi satu halaman yang mempunyai lima modul yang berbeza. Apa jenis statistik CSS yang anda inginkan untuk satu halaman? Aplikasi khas tunggal laman web mungkin mempunyai sebahagian kecil daripada jumlah peraturan CSS dan mungkin setengah jumlah warna deklarasi sebagai situs penerbitan berita besar atau aplikasi SAAS multi-faceted.

Jika anda melihat sejumlah besar pemilih (contohnya, jika laman web Anda satu halaman mudah Anda mencakup sebanyak CSS sebagai web framework seperti Bootstrap, yang hanya memiliki kurang dari 2400 pemilih), kemungkinan Anda salah di suatu tempat Jika anda memuat dalam 30 font ukuran dan menamakan anda untuk 10, kemungkinan anda mempunyai gaya yang tidak digunakan, membengkak, atau mungkin tidak konsisten.

Pengecualian yang mungkin untuk peraturan ini, yang berkaitan dengan penyelenggaraan, adalah jika anda benar-benar menggunakan Bootstrap atau lain-lain kerangka kerja yang diajukan dengan baik;kerana dokumentasi pada projek itu relatif dalam dan penggunaannya telah menjenuhkan web, pengembang ujung depan tidak perlu memelihara Bootstrap, selama sumber utama mempertahankan pelaksanaan Bootstrap inti.  Namun, jika anda menyertakan Bootstrap kerangka hanya untuk kisi atau beberapa elemen UI, sebaiknya buat khusus versi yang tidak menyertakan tambahan CSS yang Anda tidak pernah rencanakan untuk digunakan.

Apa jenis laman yang memuat halaman?

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

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

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

Redundansi Antar Aturan

Adakah anda menentukan saiz font yang sama dua puluh kali di CSS anda? Sangat sering hal ini boleh dielakkan, dan biasanya disebabkan oleh kurangnya perencanaan.  Jika anda menentukan saiz font anda sebelum menulis CSS lain, anda akan lebih mudah untuk menerapkan ukuran itu di seluruh sistem.

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

Jangan berlebihan di sini; mendefinisikan ulang beberapa saiz font atau warna latar belakang bukan masalah besar. Namun, mendefinisikan beberapa gaya beberapa kali pada modul yang sangat mirip dapat berarti bahwa Anda harus memperluas basis kelas. Contohnya, jika anda mempunyai kekunci kelas:

Katakanlah anda menginginkan versi biru dari tombol yang sama Bagaimana seharusnya anda mendefinisikannya? ika anda mendefinisikan semula kelas btn yang sama, itu akan kelihatan seperti ini:

Sudah tentu, ada banyak masalah dengan hal ini. Pertama, ini melanggar prinsip DRY (jangan ulangi sendiri).  Tapi mengapa itu penting? Pemeliharaan . Katakan saja, misalnya, bahawa reka bentuk berubah dan memanggil untuk font yang lebih kecil pada tombol.  Anda kemudian harus masuk ke kelas .btn dan .btn-blue untuk mengubah font saiz Lebih banyak kerumitan berlaku apabila anda memerlukan variasi abu-abu biru dan biasa, seperti versi garis-biru. Semua perubahan anda ke salah satu tombol harus dilakukan ke banyak tombol.

Ini sangat tidak cekap.   Sebaliknya, anda harus mengambil keuntungan dari fakta bahawa kelas adalah modular, dan membolehkan anda untuk menentukan gaya tombol yang memperpanjang kelas dasar .btn anda.

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

Spesifikasi

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

BBC specificity
Kekhususan CSS dari BBC laman web

Ini menunjukkan kekhususan pemilih kerana mereka ditemui dalam CSS dari bbc.co.uk. Bayangkan sebelah kiri grafik adalah bahagian atas stylesheet, lalu bergerak sepanjang x- axis saat membaca lembar gaya sheet.  Semakin spesifik aturannya, semakin tinggi garis biru gelap dilurus y .

Aturan kekhususan Praktis

Kami akan memberikan tiga "peraturan praktis" umum untuk memulainya, dan kemudian menjelaskan peraturannya.

  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 dengan lebih mendalam, tapi pertama-tama mari kita bicara sedikit tentang bagaimana spesifisitas bekerja.

Pemilih CSS diberi skor spesifisitas untuk menginformasikan pelayar perenderan mesin yang peraturan berlaku untuk apa elemen. Alasan ini diperlukan juga alasan mengapa CSS sangat kuat: gaya dapat diwariskan dan mengalir dalam CSS.  Ini bermakna anda boleh menerapkan lebih dari satu gaya rangkaian ke sebarang elemen yang diberikan Rendering mesin harus mengkonsolidasikan semua peraturan 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 tanda <a> dengan button kelas, itu harus menentukan apakah color #fff harus #fff , #000 atau default  Kekhususan CSS adalah aturan yang digunakan browser untuk membuat penentuan ini.

Poin

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

  • Pemilih elemen dan elemen pseudo menerima 1 poin.
  • Kelas pemilih dan pseudo-kelas menerima 1.0 mata.
  • 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 bahawa dalam sistem penilaian ini, ketika sesuatu berjalan di atas 10, itu tidak masuk ke dalam 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.

Okay - sekarang kita punya asas primer dari jalan untuk kekhususan CSS, bagaimana seharusnya itu mempengaruhi kode kita? Mari kembali ke tiga peraturan praktis untuk CSS kekhususan.

# 1 Pergi dari yang kurang spesifik ke yang lebih spesifik

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

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

apple css specificity
Gaya pada laman 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 membuat CSS bertemu dengan dua pemilih yang memiliki skor yang sama?  Masih harus memilih, sehingga akan memilih yang terakhir dari dua aturan. Masih harus memilih, sehingga akan memilih yang terakhir dari dua aturan.Dengan menghapuskan yang paling tidak spesifik di awal file anda, anda memastikan bahawa spesifikasinya Anda lebih spesifik ketika masuk ke dalam file. Masih harus memilih, sehingga akan memilih yang terakhir dari dua aturan.Dengan menghapuskan yang paling tidak spesifik di awal file anda, anda memastikan bahawa spesifikasinya Anda lebih spesifik ketika masuk ke dalam file.

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

# 2 Potret untuk spesifikasi 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 penyemak imbas hanya untuk mencari perubahan yang belum diterapkan. kan. Anda tahu dari projek sebelumnya atau dari percakapan tentang kekhususan kerana pemilih anda tidak cukup spesifik, jadi daripada mencoba mengacak kembali masalah ke pemilih yang terlalu spesifik, Anda memutuskan untuk membuat yang baru lebih spesifik.  Anda menambah ID atau dua, dan jika itu tidak melakukan trik, anda hanya melempar !important dalam hal itu  Dan, tada - gaya anda muncul.

Pendekatan ini berfungsi, secara teknikal; tetapi sayangnya, kapanpun Anda ingin memperluas gaya itu, Anda harus terus mengembangkan kerumitannya, dan sebelum Anda tahu pemilih Anda sangat spesifik, dan Anda harus mengulang kode dari hanya menggunakan kembali kelas. Selain itu, hampir tidak mungkin untuk menentukan tahap spesifikitas apa yang harus dimiliki gaya baru tanpa menambah 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 lalai, kelas memihak kepada ID. Praktek ini memecahkan sebahagian besar masalah kekhususan dalam satu langkah.
  • Jangan menumpuk pemilih anda lebih jauh dari tiga atau empat tingkat, dan pastikan anda perlu untuk kumpulan. ng ditetapkan sebelumnya, dan tidak boleh digunakan hanya untuk kod organisasi.  Sarang dapat digunakan untuk definisi kelas anda di masa depan, tetapi kelas yang dapat digunakan semula harus digunakan sedapat mungkin.

# 3 Kurangkan puncak di grafik anda

Aturan ini terutama di tempat untuk menghindari aturan yang aneh ditempatkan. Sebagai contoh, jika anda mendefinisikan beberapa kelas untuk teks persembahan, dan tiba-tiba mempunyai peraturan yang menunjangkan enam kelas dan ID, maka aturan harus ditempatkan secara kontekstual dengan lebih spesifik pemilih yang terkait dengannya.

Penyelesaian

Statistik CSS boleh memberikan anda wawasan tentang cara CSS anda ditulis, tetapi ini hanya berguna jika anda mempunyai gagasan tentang apa yang statistik itu seharusnya sebelum mencoba menganalisisnya. Ini bermakna mempunyai pemahaman kontekstual yang mendalam tentang cara CSS Anda ditulis dan alasannya. Jika CSS Anda dapat dipertahankan dan sesuai untuk laman web yang digunakan, statistik dari CSS itu tidak cukup alasan untuk memperbaiki kode Anda.

Daripada mengikuti aturan nombor dengan membabi buta, sebagai pengembang front-end yang bertanggung jawab, Anda harus fokus untuk membuat kode Anda dapat dipertahankan dan mengurangi gejolak. Statistik mengenai kod anda boleh membantu anda mencari masalah kawasan, tetapi mereka hanya dapat berjalan sejauh ini.

Bacaan lebih lanjut

Advertisement
Advertisement
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.