Pertanyaan Filter Kekhususan CSS


Ini adalah tembakan panjang, tetapi apakah ada alat yang dapat mengoptimalkan pemilih CSS dengan menghapus spesifisitas yang tidak dibutuhkan?

Saya menemukan bahwa ketika saya menulis CSS, saya sengaja membuat pemilih saya lebih spesifik daripada yang diperlukan untuk menghindari konflik dan untuk kuasi-dokumentasi.

Akan sangat bagus jika ada alat yang bisa menganalisis kelompok aturan tertentu, menentukan "keunikan" mereka dalam hal tumpang tindih dengan aturan lain, dan kemudian menghapus semua kekhususan yang tidak perlu.

Saya bahkan tidak bisa mulai membayangkan bagaimana seorang pengembang alat akan mendekati semua skenario yang diperlukan, tetapi saya telah terpesona oleh kecerdikan orang lain di bidang ini sebelumnya dan menganggapnya patut ditanyakan.

Memperbarui:

Saya telah menambahkan karunia untuk pertanyaan ini, dan semakin saya memikirkannya, semakin saya menyadari betapa berharganya sebuah Filter Kekhususan CSS akan menjadi.

Misalnya, ketika bekerja dengan Nested Rules / Selectors di Kelancangan dan KURANG, bertelur berlebihan adalah umum dan terkenal antipattern yang dapat dengan mudah mengarah ke pemilih yang terlalu spesifik.

Ada ilustrasi yang bagus tentang ini di kursus TutsPlus yang sangat bagus CSS yang dapat dipertahankan dengan Sass dan Kompas:

body {
    div.container {
        p {
            a {
                color: purple;
            }
        }
    }
}

Sass akan mengikuti instruksi bersarang ini dan menghasilkan output CSS berikut, tidak menimbulkan keberatan atas kekhususan yang tidak diperlukan:

body div.container p a {
    color: purple;
}

Namun, jika Specificity Filter benar-benar ada, itu akan menciptakan manfaat potensial bagi para pengembang CSS:

  1. Anda dapat mengatur stylesheet Anda sebagai pemetaan DOM 1: 1, serupa dengan apa yang Anda lihat saat memeriksa aturan gaya di Firebug dan Alat Pengembang Chrome. Editor pintar / IDE dapat secara otomatis mengisi gaya untuk elemen DOM dengan gaya / kelas bersama. Redundansi itu, tentu saja, akan disaring oleh Specificity Filter / Optimizer.

  2. Stylesheet dapat memiliki struktur yang telah terisi sebelumnya oleh alat yang memindai DOM dan menerjemahkannya ke pemilih / aturan CSS. Ini berarti pengembang hanya perlu memperbarui HTML; CSS "pohon" akan tetap sinkron untuk mencerminkan keadaan DOM saat ini. Editor cerdas akan membiarkan Anda melompat ke definisi CSS untuk elemen / kelas untuk styling - atau bahkan membuat aturan gayanya terlihat di panel terpisah.

Di satu sisi, ini hampir tampak seperti langkah mundur - seperti fitur yang Anda temukan di Dreamweaver atau WebAssist untuk membantu newbs belajar CSS. Tetapi ide dasar dari alat pengoptimasi pemilih CSS sepertinya tidak ada otak, dan jenis otomatisasi alur kerja yang telah saya jelaskan akan menjadi langkah logis berikutnya - dan katalis akan menjadi Filter Spesifitas.

Saya melihat beberapa editor CSS dan web IDE yang lebih terkenal, tetapi belum menemukan apa pun yang menawarkan jenis fungsi ini di luar penargetan satu elemen dan menghasilkan pemilih untuk itu.

Pembaruan 2: Kinerja Pemilih CSS

Sebagai tanggapan atas komentar Spliff, berikut adalah dua artikel bagus tentang kinerja pemilih CSS:

Keduanya setuju bahwa CSS yang mengoptimalkan mikro tidak sepadan dengan upaya, tetapi pemilih keturunan yang sangat berkualitas adalah "bencana efisiensi." Saya belum mengukur sendiri, tetapi menduga bahwa jenis pendekatan "Pemetaan DOM" yang saya sarankan akan menyebabkan pementasan kinerja tanpa langkah pengoptimalan, baik manual atau otomatis.

Pertanyaan, Tautan, dan Alat Terkait:

Poin dalam Specificity CSS

Alat untuk Melihat Kekhususan CSS

Alat untuk Membersihkan CSS

Urutan berdasarkan Specificity CSS

5 Kesalahan Besar CSS Masif

Google: Pemilih CSS yang Efisien

Procssor

Bersihkan CSS

CSS Rapi


32
2017-08-07 07:26


asal


Jawaban:


Anda dapat mencoba untuk mengambil pendekatan yang berbeda, cobalah untuk menulis pemilih Anda sebagai kecil (spesifisitas rendah) sebanyak mungkin. dan hanya membuatnya lebih spesifik saat dibutuhkan. Dengan cara itu Anda tidak membutuhkan alat.


10
2017-08-08 14:44



Hanya akan membuang ini di luar sana - itu tidak 'menjawab' pertanyaan Anda, tapi itu alat yang saya sukai untuk menyebarkan berita tentang untuk orang-orang yang melakukan banyak pemrograman css: Pembakar. 

Jika Anda tidak terbiasa dengannya, ini adalah alat untuk peramban web. Anda menarik halaman Anda setelah terinstal, klik kanan dan pilih 'Inspect Element.' Ini akan menunjukkan kepada Anda semua css yang mempengaruhi berbagai elemen di halaman Anda, dan berguna untuk membuat kode css yang bersih dan tepat. Juga membuatnya lebih mudah untuk melihat pembaruan instan tentang bagaimana tampilan halaman Anda dengan sedikit modifikasi. Ini akan memberitahu Anda tentang kode css tidak berguna yang sedang ditimpa oleh kode css lainnya.

JUGA! Firebug sekarang tersedia untuk hampir semua browser. Bukan hanya Firefox. Secara pribadi, saya parsial untuk menggunakannya di Chrome.


2
2017-08-16 16:23



Kami benar-benar tidak dapat melakukannya tanpa kekhususan karena itu adalah satu-satunya hal yang menyelamatkan Anda ketika Anda memiliki dua atau lebih aturan bertabrakan. Spesifitas membawa kewarasan pada aturan CSS yang campur aduk, jadi ini lebih merupakan berkah daripada kutukan. Beberapa hal yang Anda bicarakan, seperti pemilih CSS, dapat dilakukan menggunakan Firefox / Firebug. Saya lebih terganggu oleh kompatibilitas browser.


2
2017-08-16 14:38



Sebenarnya ada cara Anda dapat melakukan ini menggunakan HTML5 dan CSS3. Teknik standar adalah menentukan elemen menggunakan atribut HTML 5 "data-" dan kemudian lakukan seleksi CSS untuk atribut ini. Ini bukan tujuan dari atribut, tetapi Anda dapat secara khusus menentukan beberapa elemen yang dapat Anda gunakan untuk bahkan mengganti tema situs.

Jadi, misalnya, Anda dapat akhirnya membuat filter spesifisitas Anda secara manual di CSS, dengan menentukan

<b data-specificity=2>test</b>

di mana kekhususan data hanya cocok untuk orang tua di atas.

MEMPERBARUI:

Baiklah, jadi misalnya, katakanlah Anda memiliki kelas paragraf, tetapi Anda ingin menentukan orang tua yang mana, atau berapa banyak orang tua yang dapat mewarisi properti paragraf. Anda akan menggunakan aturan untuk setiap calon induk yang dapat diwarisi dari:

p[data-specificity="1"]{
    color:red;
    font-family:verdana;
    text-decoration:underline;
}
p[data-specificity="2"]{
    color:black;
    font-family:arial;
}
div.container > *[data-specificity="2"] {
    font-family:impact;
    color:blue;
    text-decoration:underline;
}

Jadi aturan-aturan ini berarti bahwa setiap tag p yang merupakan turunan langsung dari wadah div dan memiliki spesifisitas 2, diperbolehkan untuk mewarisi properti dari wadah div. Warna biru dari div akan diwarisi oleh p dengan spesifisitas data 2.

Ini a JSFiddle dimana kamu bisa melihat ini!

Idenya adalah seperti ini, menggunakan HTML5, Anda dapat mengontrol elemen mana yang diizinkan untuk mewarisi properti mana. Ada banyak kode ekstra untuk ditulis (untuk kedua elemen anak dan orang tua) tetapi Anda dapat menggunakan ini untuk menyingkirkan beberapa kekhususan yang tidak perlu

Saya tidak pernah benar-benar melihat seseorang menggunakan metode ini dalam prakteknya, saya cukup banyak hanya memasaknya untuk Anda, tetapi saya pikir itu bisa sangat berguna, bagaimana menurut Anda?


1
2017-08-16 21:26