helo, wahai pembaca sekalian laman blog. Ini adalah nota kecil daripada siri "sebagai kenang-kenangan". Idea timbul untuk mengalih keluar baris tambahan daripada fail gaya. Sepanjang tujuh tahun kewujudan blog, banyak perkara telah berubah, tetapi baris dalam fail STYLE.CSS kekal (untuk berjaga-jaga, atau saya terlupa untuk mengalih keluarnya). Sekarang saya rasa ia mula menimbang terlalu banyak, dan oleh itu timbul idea untuk membersihkannya.

Melakukan ini secara manual agak sukar, dan ia tidak perlu. Ada cara proses ini mengautomasikan. Sebahagian daripada mereka tidak bekerja untuk saya, ada yang perlu dibayar dan saya menganggapnya tidak perlu. Pada akhirnya, saya menggunakan kaedah separa automatik, yang akan saya tulis dalam beberapa perenggan seterusnya. Melihat ke hadapan, saya akan mengatakan bahawa kami berjaya mengurangkan saiz fail CSS sebanyak hampir separuh, yang malah mengejutkan saya sedikit.

Pilihan untuk mencari gaya CSS yang tidak diperlukan untuk tapak web

Menggantikan fail gaya (kandungannya - Saya memadamkan yang lama dan memasukkan yang baru, selepas itu saya menyimpan perubahan melalui Filezilla) dengan yang baru (rosak) tidak menyebabkan sebarang perubahan yang kelihatan di tapak (belum, sekurang-kurangnya , tidak didedahkan). Secara keseluruhan, saya sangat gembira dan mengesyorkan mencubanya. Cepat, ringkas dan mudah (dan juga percuma).

Semoga berjaya! Jumpa anda tidak lama lagi di halaman laman blog

Anda boleh menonton lebih banyak video dengan pergi ke

");">

Anda mungkin berminat

Bagaimana untuk memaksimumkan kelajuan memuatkan laman web dan mengoptimumkan beban pelayan
CSS - apa itu, seperti jadual gaya melata sambung ke kod HTML menggunakan Gaya dan Pautan
Pengoptimuman dan pemampatan CSS dalam Kelajuan Halaman - bagaimana untuk melumpuhkan fail luaran gaya dan menggabungkannya menjadi satu untuk mempercepatkan pemuatan Bagaimana untuk menyediakan putaran warna latar belakang deretan jadual, senarai dan lain-lain elemen HTML di tapak web menggunakan kelas pseudo anak ke-n
Untuk apa CSS, bagaimana untuk menyambung helaian gaya berlatarkan ke dokumen HTML dan sintaks asas bahasa ini
Gaya senarai (jenis, imej, kedudukan) - Peraturan CSS untuk tetapan penampilan senarai dalam kod HTML
Bagaimana untuk mendapatkan laman web yang pantas - pengoptimuman (mampatan) imej dan skrip, serta mengurangkan bilangan permintaan Http

Faedah CSS yang bersih dan teratur adalah jelas. Tapak web dengan CSS yang sempurna akan dimuatkan dengan lebih pantas dan lebih kelihatan dalam hasil carian. Untuk pembangun web kod bersih CSS berfungsi sebagai bukti profesionalisme yang jelas untuk pelanggan masa depan.

Tetapi, membersihkan serpihan penanda CSS melalui lelaran dan perubahan reka bentuk yang tidak terkira banyaknya boleh menjadi proses yang teliti dan memakan masa yang dilakukan dengan tangan. Nasib baik, terdapat beberapa yang indah dan alat yang berguna, yang akan membantu anda mengautomasikan beberapa aspek CSS yang paling berkaitan. Pada halaman ini terdapat pautan ke alat pembersihan CSS yang saya semak secara peribadi Penanda CSS tapak pada semua alat di bawah, saya menasihati anda untuk melakukan perkara yang sama.

Alat Pembersihan CSS

ProCSSor untuk menambah baik CSS anda

ProCSSor ialah alat yang ringkas dan tanpa tambahan untuk menambah baik CSS anda dengan serta-merta. Tersedia melalui OS X, iOS atau mana-mana penyemak imbas, alat ini mengambil fail CSS, coretan yang ditampal atau URL dan segera membetulkan serta menunjukkan kod masa hadapan untuk CSS anda.

CSS Lint

alat semakan CSS dengan penjelasan perubahan

CSS Lint menawarkan cadangan, tidak seperti alat pembersihan CSS lain. Kebanyakan mereka tidak bercakap tentang perubahan CSS, tetapi CSS Lint memberikan penjelasan ringkas untuk setiap perubahan yang disyorkan. Ia mempunyai pelbagai ciri yang memfokuskan pada pepijat, keserasian, prestasi, penyahduplikasian dan kebolehaksesan yang boleh dihidupkan atau dimatikan.

Markup Kotor

Alat Dirty Markup menggabungkan beberapa teknologi yang berbeza

Dirty Markup mempunyai pendekatan unik untuk pengoptimuman kod; ia berfungsi apabila medan diisi dengan kod dan menggabungkan beberapa teknologi berbeza HTML Tidy, JavaScript, Ace Editor dan membuat pembersihan menyeluruh kod. Ia berfungsi seperti CSS, sama seperti JavaScript atau HTML standard.

CleanCSS

Alat CleanCSS melaksanakan pengoptimuman CSS

CleanCSS berfungsi dengan URL atau sekeping kod yang dimasukkan dan menawarkan pelbagai pelaksanaan pengoptimuman CSS. Anda boleh memilih antara lima pelbagai tetapan pemampatan yang menawarkan pertukaran antara kebolehbacaan dan saiz fail.

Pencantik Kod

Pencantik Kod css mudah alat pembersihan

Alat Pembersihan CSS mudah Pemindah Kod tanpa ciri yang tidak perlu. Ia memproses kod mengikut URL atau sisipan kod, dan membersihkannya secara menyeluruh berdasarkan pelbagai pilihan praktikal. Jika anda memerlukan pembersihan CSS pantas tanpa tersesat dalam lautan pilihan pembersihan kod, ini mungkin anda css yang sempurna alat pembersihan.

Spritemapper

Spritemapper menjana sprite, menggabungkan berbilang imej ke dalam lembaran gaya CSS

Tiada alat lain yang menyebut imej yang dioptimumkan, yang sama bergunanya dengan mengoptimumkan kod itu sendiri. Spritemapper menjana sprite, menggabungkan berbilang imej ke dalam helaian gaya CSS dengan kedudukan yang betul. Hasilnya ialah tapak yang lebih pantas, kuantiti yang kurang Permintaan HTTP, dan gaya CSS yang lebih diperkemas.

Topcoat

Topcoat bukan alat tradisional Pembersihan CSS

Topcoat bukanlah alat pembersihan CSS tradisional; ia pada asasnya kit pembangunan CSS, pendekatan penyusunan CSS tulen. Jika anda mempunyai CSS yang ditulis dengan baik, anda mungkin tidak perlu membersihkan kod CSS tersebut.

Alat CSSTidy berfungsi pada Windows, Mac atau platform Linux.

CSSTidy adalah serupa dengan banyak alat pembersihan CSS, tetapi yang ini menawarkan beberapa atribut unik. CSSTidy boleh dipanggil menggunakan baris arahan atau PHP, dan ia berjalan pada platform Windows, Mac atau Linux. Alat pembersihan CSSTidy boleh dimuatkan dengan sempurna ke dalam aliran kerja sedia ada anda dan menjimatkan anda CSS bersih luar talian. Alat pengesahan kod CSS W3C Valdiator

W3C Valdiator tidak menawarkan alat pembersihan kod, pemampatan atau pengoptimuman, tetapi ia pasti perlu dipertimbangkan dalam kes di mana kod CSS benar-benar rosak. Alat di atas mempunyai alat mereka sendiri, yang ini dibuat oleh Konsortium W3C yang mencipta piawaian.

Anda baru sahaja menyertai projek sedia ada untuk menggantikan pembangun yang akan berlepas. Atau mungkin mereka baru saja mengambil projek lama mereka selepas beberapa tahun. Anda berasa seram dan jijik apabila melihat kod tersebut. Hanya ada satu perkara yang boleh anda lakukan: bersihkan semua kekacauan ini. Pernahkah anda menemui sesuatu yang serupa sebelum ini? Hampir pasti, lambat laun semua orang mengalami perkara ini.

Anda tahu bahawa membersihkan kod CSS adalah tugas yang besar. Banyak yang perlu dilakukan masa terhad- terutamanya apabila pelanggan/bos/rakan sekerja dengan gigih menasihati supaya tidak menyentuh perkara yang berkesan. Awak pun tak tahu nak mula dari mana.

Linting adalah segala-galanya bagi kami

Dalam bahagian ini saya akan menganggap bahawa anda menggunakan Sass. Bukan sahaja kerana ini adalah andaian yang munasabah dalam keadaan semasa, tetapi juga kerana salah guna Sass sering menjadi punca pencemaran asas kod. Walaupun artikel ini berguna untuk mereka yang tidak menggunakan prapemproses, jadi anda harus membacanya hingga akhir.

Perkara pertama yang saya biasa lakukan apabila saya perlu memahami asas kod ialah linting. Linting ialah proses melaksanakan program untuk mencari kemungkinan ralat dan amalan buruk. Saya percaya bahawa dengan membuat kod bersih kita mengambil langkah pertama ke arah itu kod yang bagus. Etimologi perkataan linting boleh didapati dalam urutan ini di StackOverflow.

Sass mempunyai linter yang ditulis dalam Ruby yang dipanggil SCSS-lint. Anda boleh menyediakannya sendiri atau memuat turun konfigurasi yang disyorkan oleh Sass-Guidelines untuk bermula dengan segera. Juga Node.js mempunyai sass-lint, ia tidak 100% serasi dan mungkin berfungsi secara berbeza.

Cuba jalankan SCSS-Lint pada direktori fail Sass anda untuk menyemak ralat. Kemungkinan sangat tinggi bahawa satu tan ralat akan menimpa anda. Biasanya selepas ini anda ingin berhenti bereksperimen dengan pembersihan kod. Bersabarlah. Kini anda boleh cuba untuk membuat konfigurasi kurang ketat mengenai peraturan yang tidak begitu penting kepada anda (seperti format warna) atau mengambil lembu dengan tanduk dan menggunakan kuasa penuh linting.

Membetulkan ralat yang ditemui

Sudah tiba masanya untuk membetulkan apa yang perlu diperbaiki. Ini boleh dilakukan dengan dua cara. Yang pertama ialah menyemak semua fail satu persatu dan membetulkan semua ralat dan kekurangan seperti penamaan pembolehubah yang tidak berjaya, sarang pemilih yang berlebihan dan kod yang tidak diformatkan dengan baik. Yang kedua (pilihan saya) ialah menggunakan carian dan ganti. Saya tidak tahu tentang awak, tetapi saya menyukainya ungkapan biasa dan saya sentiasa suka menggunakannya dalam kerja saya.

Katakan anda ingin menambah sifar yang hilang dalam semua nombor titik terapung (iaitu, dari 0 hingga 1), jenis ralat ini ditangkap menggunakan peraturan LeadingZero dalam SCSS-lint. Untuk melakukan ini, gunakan ungkapan biasa \s+\.(\d+) untuk carian (semua nombor mengikut ruang dengan titik) dan untuk penggantian \0.$1 (ruang, sifar, titik dan nombor yang ditemui). Dan jika anda bimbang tentang peraturan linter BorderZero, maka anda boleh menggantikan semua sempadan: tiada peraturan dengan sempadan: 0 dalam editor anda menggunakan carian/ganti. Semudah pai!

Saya baru-baru ini mencipta repositori scss-lint-regex di GitHub untuk mengumpulkan semua ungkapan biasa untuk linting di satu tempat. Sila lihat jika anda menghadapi masalah dengan linting dalam projek besar. Dan berhati-hati dengan carian/ganti, kadangkala ia membawa kepada yang tidak dijangka kesan sampingan. Selepas setiap perubahan, jalankan git diff untuk mengenal pasti perkara yang telah berubah, ini akan memastikan anda tidak menambah pepijat pada kod anda.

Sebaik sahaja anda selesai dengan pengeditan cari/ganti, anda tidak akan dapat melarikan diri penyuntingan manual, di tempat yang perlu diperhalusi (lekukan yang salah, kekurangan atau lebihan baris kosong, ruang yang hilang, dsb.). Ini mengambil banyak masa, tetapi ia akan banyak membantu anda dalam langkah seterusnya, jadi penting untuk melakukan ini sebelum meneruskan.

Nota penterjemah

Beberapa perkara ini boleh dilakukan menggunakan pemalam SassBeautify penyunting teks, contohnya sublime atau atom .

Semakan struktur projek

Apa yang sangat mengganggu saya apabila saya menyertai projek sedia ada ialah kekurangan seni bina projek yang betul. Mungkin terdapat beberapa jenis projek pada awal kerja, tetapi lama kelamaan keadaan menjadi tidak terkawal dan rancangan asal hilang. Tetapi ia masih sangat penting.

Pilihan metodologi projek tidak begitu penting, perkara utama ialah anda memilikinya dan tidak menyebabkan anda tidak selesa. Ia boleh menjadi SMACSS, 7-1 atau ITCSS - pilihan di tangan anda. Cuba susun semula kod anda mengikut metodologi pilihan anda. Saya cenderung menggunakan corak 7-1 yang kami bangunkan dalam Garis Panduan Sass, jadi saya akan memberikan anda beberapa petua untuk membantu jika anda memilih laluan ini.

Kemudian mari pergi ke direktori abstrak. Semua pembolehubah, campuran, fungsi dan ruang letak harus pergi ke sini. Anda bebas untuk menyusunnya mengikut cara yang anda suka sehingga anda menguasai semua pembolehubah dan campuran dalam pangkalan kod anda. Saya juga mengenal pasti pembolehubah pilihan (dan campuran) pada peringkat ini, kerana saya sering menemui pembolehubah yang digunakan sekali atau dua kali.

Sebaik sahaja anda mengetahui perkara ini, anda perlu memutuskan yang mana antara dua langkah seterusnya yang perlu diambil dahulu. Anda boleh cuba memastikan bahawa semua kandungan direktori asas adalah benar-benar gaya asas dan bukan gaya komponen. Atau semak bahawa direktori reka letak mengandungi semua yang berkaitan dengan reka letak halaman dan kod ini didokumenkan dengan betul.

Akhir sekali, untuk menyelesaikan sesuatu, anda perlu membina direktori komponen, yang biasanya merupakan tugas besar. Saya menasihati membuat komponen sebanyak mungkin saiz yang lebih kecil dan fokus pada penggunaan berulang mereka. Tidak kira jika anda menambah bilangannya - asalkan ia tidak konteks dan mudah dibaca, difahami dan dikemas kini.

Sebagai contoh komponen yang betul dan kecil, saya boleh memberikan yang berikut:

Petikan ( padding: 10px; ) .quote__attribution ( font-size: 80%; ) .quote > :first-child ( margin-top: 0; ) .quote > : last-child ( margin-bottom: 0; )

Cuba fikir dalam modul. Kurang. Lebih mudah. Lebih berdikari.

Mengalih keluar yang tidak perlu

Saya percaya perbezaan terbesar antara buruk dan CSS yang baik ini adalah jumlah kod. CSS sangat mudah untuk berkembang. Sesetengah orang boleh melakukan hampir setiap reka letak melalui percubaan dan kesilapan. Keupayaan untuk melakukan apa sahaja menggunakan CSS minimum memerlukan usaha, dan mengekalkan pendekatan minimalis adalah cabaran sebenar.

Sudah 3 tahun, tetapi tweet ini oleh Nicholas Gallagher tetap menjadi soalan CSS kegemaran saya:

Penamatan adalah wabak sebenar CSS. Semasa menulis gaya, kami sering berulang-alik, mencuba peraturan baharu - biasanya kami meninggalkan beberapa pengisytiharan yang tidak diperlukan sama sekali. Contohnya, limpahan: tersembunyi , yang tidak diperlukan lagi, atau saiz fon , yang tidak mengubah saiz fon. Dengan meninggalkan mereka, kami meningkatkan hutang teknikal. Tidak ada yang baik tentang ini.

Semasa menulis CSS, saya sudah biasa membuka alat pembangun dalam penyemak imbas dan melumpuhkan setiap perisytiharan CSS satu per satu sebelum menyerahkan. kod sedia untuk menyemak apa yang mereka kesan. Jika mereka tidak menjejaskan apa-apa, maka perkara pertama yang saya tanya kepada diri sendiri ialah: "Mengapa mereka berada di sini?" Jika mereka ternyata tidak berguna, saya memadamkannya. Dengan teknik mudah seperti ini, saya boleh memastikan bahawa hanya kod yang berguna dan tiada sampah dihantar ke repositori.

Membersihkan pangkalan kod CSS adalah teknik yang sama. Kenal pasti komponen yang ingin anda bersihkan, buka alat pembangun dan cuba cari pengisytiharan yang tidak berguna. Kadangkala, untuk mengalih keluar kod CSS, kita perlu mengalihkan gaya ini ke atas pokok untuk memanfaatkan ciri lata. Mari kita lihat ini dengan contoh mudah berikut:

Ibu bapa ( /* ...barang di sini... */ ) .anak-A ( warna: merah; ) .anak-B ( warna: merah; )

Dengan cara yang jelas Pengoptimuman adalah untuk memindahkan warna: pengisytiharan merah ke dalam pemilih induk, dan kemudian lata akan melakukan yang lain untuk kita. Sudah tentu, contoh sebenar biasanya lebih kompleks, tetapi contoh ini juga menunjukkan bahawa anda tidak sepatutnya melupakan kemungkinan "C" dalam singkatan CSS.

CSS adalah pintar dan anda harus sama pintar

Ia juga sangat biasa untuk kurang memahami makna warisan , warna awal dan warna semasa . Katakan anda mahu pautan berwarna sama dengan teks utama (mereka sudah cukup bergaris). Inilah cara untuk tidak melakukannya:

A (warna: hitam; /* Tidak */ )

Sebab penyelesaian ini gagal adalah jelas: jika anda menukar warna badan, warna pautan akan menjadi tidak selari dengannya. Jika anda berfikir tentang menggunakan pembolehubah, ia hanya akan membuat perkara yang tidak perlu rumit. Dan akhirnya, jika pautan diletakkan di dalam elemen dengan gaya sendiri(contohnya, dalam petikan), ia tidak sepadan dengan warnanya.

CSS mempunyai cara terbina dalam untuk menyelesaikan masalah ini, nilai warisan:

A ( warna: warisan; /* Yay! */ )

Begitu juga, apabila mengembalikan harta kepada nilai lalainya, adalah idea yang tidak baik untuk menetapkan nilai kepada nilai tetap. Dalam CSS terdapat nilai awal untuk kes sedemikian. Biasanya ia tidak berbeza dengan menetapkan nilai tetap, tetapi terdapat kes apabila ia benar-benar memainkan peranan, contohnya, apabila menentukan arah teks dalam sifat penjajaran teks. Apabila menetapkan semula text-align , nilai yang ditinggalkan boleh merosakkan teks dalam bahasa RTL ​​(kanan ke kiri), output akan menjadi awal (lebih baik adalah start , tetapi nilai ini tidak disokong dalam IE9)/.

Terakhir dalam senarai, tetapi bukan nilai paling penting ialah currentcolor , ramai pembangun tidak tahu mengenainya. Jika anda salah seorang daripada mereka, jangan risau, cuma tanya diri anda sendiri: "Jika anda tidak menetapkan warna sempadan unsur, maka mengapa ia secara automatik sepadan dengan warna fon elemen?" Ya, ini berlaku kerana secara lalai sifat warna sempadan ditetapkan kepada warna semasa (spesifikasi). Setuju, semuanya jelas dari namanya.

Pada pendapat saya, jika anda ingin menggunakan warna fon elemen, anda harus menggunakan currentcolor dan bukannya nilai tetap atau pembolehubah Sass.

Elemen ( warna: deeppink; jidar: 1px pepejal; /* Warna tersirat dengan `warna semasa` */ ) .elemen svg ( isi: warna semasa; /* Warna isian akan sama dengan teks */ )

Ini semua asas Ciri CSS. Mereka membuat CSS seperti itu. Dan peluang ini jarang digunakan secara mengejutkan. Oleh itu, jika anda memutuskan untuk menambah baik kod komponen, anda tidak seharusnya mengabaikannya.

Git anda sepatutnya baik

Memfaktorkan semula pangkalan kod CSS adalah banyak kerja. Anda perlu mengemas kini berpuluh-puluh fail. Dan kemungkinan besar anda akan melanggar sesuatu dalam proses itu. Sejujurnya - semua orang membuat kesilapan dan ia akan menjadi sangat menarik jika anda berjaya menyelesaikan kerja sedemikian tanpa kesilapan kecil.

Oleh itu, saya amat mengesyorkan agar anda bekerja dengan tekun dengan sistem kawalan versi anda (adalah logik untuk menganggap bahawa Git memainkan peranan ini). Ini bermakna semua komit melakukan satu perkara - pastikan anda kembali selangkah dari kod dengan pepijat tanpa mengalami konflik.

Saya tahu bahawa ramai orang mendapati Git rumit dan sukar untuk difahami, dan cara untuk mempelajarinya dengan mudah adalah di luar skop artikel ini. Percayalah: sejarah Git anda sepatutnya seperti puisi jika anda tidak mahu otak anda mendidih.

Kesimpulan

Jadi, saya akan merumuskan secara ringkas perkara utama artikel bagi mereka yang terlalu malas membaca keseluruhan teks:

Membersihkan projek CSS/Sass adalah sukar kerana sukar untuk menilai dengan segera kesan penuh perubahan atau pemadaman. rentetan CSS. Ini semua disebabkan terutamanya oleh kebolehujian CSS yang lemah. Oleh itu anda perlu berhati-hati.

Mulakan dengan linting dan kod anda akan menjadi lebih cantik. Lakukan ini kerana ia akan memudahkan hidup anda pada masa hadapan. itu yang sama cara yang baik gambaran keseluruhan keadaan kod anda tanpa banyak risiko (membetulkan kotoran sintaksis tidak sepatutnya menyebabkan sebarang masalah).

Kemudian susun projek anda mengikut metodologi pilihan anda. Tidak kira yang mana satu yang anda pilih, adalah penting untuk anda mengikutinya. Jika projek anda tidak mempunyai terlalu banyak komponen, maka penstrukturan adalah permulaan yang baik. Cari bahagian antara muka yang boleh digunakan semula dan alihkan gayanya ke dalam fail yang berasingan. Jangan ragu untuk menulis dokumentasi dengan cara ini proses itu akan berjalan lebih mudah dan anda akan berasa seperti anda bergerak ke hadapan.

Sebaik sahaja anda telah membersihkan projek anda dan menyusun semua komponen, tiba masanya untuk menambah baik CSS. Mula-mula semak perkara yang boleh anda alih keluar, kerana kami sentiasa menulis terlalu banyak kod. Kemudian cuba mengoptimumkannya supaya kurang berulang. Jangan berlebihan! Tugas anda adalah untuk mengurangkan kerumitan, bukan meningkatkannya. Jangan lupa untuk mengulas apa-apa yang tidak jelas pada pandangan pertama.

Dan akhirnya, komitmen anda harus teratur dan logik. Gabungkan perubahan menjadi komitmen kecil, masing-masing membuat satu perkara yang mudah- ini akan memudahkan anda untuk mengubah semula perubahan jika anda melakukan sesuatu yang salah.

Akhir sekali, jangan lupa untuk meraikannya apabila semuanya telah berakhir. Semoga berjaya!

4 daripada 5

Ramai pemaju berhadapan dengan hakikat bahawa selepas beberapa lama bekerja pada projek, dalam fail CSS gaya muncul tentang yang mustahil untuk mengatakan dengan pasti sama ada ia digunakan atau tidak. Ini selalunya berlaku apabila anda bekerja dalam satu pasukan dan lebih daripada seorang bekerja pada gaya. Atau, sebagai contoh, terdapat beberapa pembangun sebelum anda, dan anda memutuskan untuk menukar sesuatu atau pereka bentuk merancang reka bentuk semula kecil. Secara umum, terdapat banyak pilihan, tetapi hasilnya adalah sama - pemilih "mati" diberikan kepada penyemak imbas.

Segala-galanya akan baik jika terdapat hanya satu atau dua daripadanya, tetapi jika fail anda mempunyai lima atau enam ribu baris, maka tidak ada keraguan mengenainya - tidak semua pemilih digunakan, yang bermaksud bahawa dengan mengalih keluar yang tidak perlu anda boleh membuat fail lebih ringan dan mempercepatkan pemuatan halaman. Hari ini kita akan melihat pelbagai program, pemalam dan perkhidmatan untuk membersihkan fail CSS daripada gaya yang tidak perlu.

Sambungan Firefox

Mengambil kira gaya yang disertakan dalam halaman melalui , @import dan. Ia boleh menganalisis kedua-dua halaman tunggal dan keseluruhan tapak. Pada akhirnya anda akan mendapat senarai pemilih yang tidak digunakan di tapak.

Ini adalah sambungan untuk FireBug yang membolehkan anda mencari pemilih yang tidak digunakan seperti pada halaman berasingan, dan di seluruh tapak. Akibatnya, anda akan menerima senarai semua pemilih anda, antaranya yang ditandakan dengan warna merah tidak akan digunakan.

Perkhidmatan web

Alat dalam talian untuk menyemak pemilih yang mana fail ini tidak digunakan pada halaman tertentu tapak. Kelemahannya ialah anda tidak boleh menilai keseluruhan tapak (atau lebih tepat, ia mungkin, tetapi ia memakan masa dan menyusahkan).

Penyunting desktop

Senarai editor kod yang entah bagaimana mengetahui cara mencari gaya CSS yang tidak digunakan.

TopStyle (Menang)

Yang ini juga boleh mencari pemilih yang digunakan pada halaman, tetapi yang tiada penerangan dalam fail CSS.

IntelliJ IDEA (Win, Mac, Linux)

Editor merentas platform direka khas untuk bekerja dengan Java.

Kesimpulan

Pada pendapat saya, alat yang paling berjaya ini ialah Dust Me. Menganalisis keseluruhan tapak mengambil masa kurang daripada seminit, selepas itu anda hanya perlu mencari dan mengalih keluar pemilih yang ditentukan.

Ngomong-ngomong, jika ada di antara anda menggunakan editor atau perkhidmatan yang tiada dalam senarai ini, kemudian tulis dalam komen, saya akan menambahnya. Terima kasih atas perhatian anda semua ;-)

Tapak yang dibuat akan sentiasa berkembang, dan suatu hari nanti anda akan menyedari betapa sukarnya untuk memahami CSSnya.

Jika anda sudah terjumpa masalah serupa, maka sudah tiba masanya untuk mengaudit kod CSS anda dan mengoptimumkannya. Kami telah memilih 15 alat untuk membantu anda melakukan perkara itu. Sebahagian daripada mereka akan membantu mengurangkan saiz fail CSS, yang lain akan meningkatkan prestasi halaman.

1. Jenis-o-Matic

Type-o-matic ialah pemalam Firebug yang boleh menganalisis fon yang digunakan pada halaman tapak web. Pemalam ini memaparkan laporan dalam bentuk jadual dengan maklumat tentang sifat fon yang digunakan ( keluarga, saiz, warna dan banyak lagi).

Walaupun laporan dibentangkan dalam bentuk jadual, anda boleh mengedit senarai ini dengan mudah dengan menggabungkan atau mengalih keluar fon yang serupa dalam gaya.

2.CSSCSS

Alat ini menganalisis fail CSS anda untuk pendua. Ini akan mengurangkan Saiz CSS dan adalah lebih mudah untuk bekerja dengan mereka pada masa hadapan. Alat ini sangat mudah untuk dipasang - ia dilaksanakan sebagai pakej sambungan untuk Ruby, dan dilancarkan dari baris arahan.

3. CSS Lint

Alat ini akan membantu anda mengenal pasti masalah dalam kod CSS anda. Alat ini menyemak sintaks asas gaya dan juga menggunakan set peraturan pada kod yang mencurigakan. Semua peraturan boleh dipasang, jadi anda boleh menukarnya dengan mudah.

4. Pengawal Warna CSS

Selalunya anda terjumpa pelanggan yang ingin menggunakan warna yang anda tidak tahu kewujudannya. CSS Colorguard akan membantu anda mencipta yang diperlukan skema warna, dan akan memberi amaran kepada anda jika anda menggunakan dua warna yang sama.

5. CSS Dig

CSS Dig ialah skrip yang ditulis dalam Python yang berjalan secara tempatan dan membolehkan anda menganalisis sifat dan nilai CSS hampir mana-mana tapak, tidak kira sama ada gaya terletak di fail berasingan atau dalam kod halaman. Alat ini juga membantu anda mengubah suai, menyeragamkan dan mengoptimumkan kod CSS anda.

6. Habuk Saya

Dust-Me ialah pemalam untuk Firefox dan Opera yang mengalih keluar pemilih yang tidak digunakan daripada lembaran gaya. Alat ini mengambil semua CSS di tapak anda dan menunjukkan kepada anda pemilih yang sedang digunakan dan yang mana yang tidak diperlukan.

7. Devilo.us

Devilo.us ialah enjin termaju untuk memampatkan dan mengoptimumkan kod CSS, yang kini menyokong CSS3.

8. PurifyCSS

Alat ini membantu anda menyingkirkan CSS yang tidak digunakan-gaya pada halaman laman web atau aplikasi web. Ia dapat mengesan walaupun pemilih CSS yang dimuatkan secara dinamik dalam kod javascript, dan memampatkan saiz fail gaya dengan ketara.

9. Atom CSS

Atom CSS akan membantu anda menjadikan fail CSS anda lebih kecil. Ia membolehkan anda mengoptimumkan kelajuan memuatkan halaman, menghapuskan kebergantungan, dan juga melakukan banyak lagi.

10. CSS Bersih

CleanCSS ialah pengoptimum CSS pelbagai fungsi. Alat ini mengambil kod CSS anda dan menjadikannya lebih bersih dan lebih kecil. Anda boleh mengoptimumkan kod yang ditulis perbezaan bahasa: javascript, json, python, html, dll.

11. PubCSS

Alat ini memudahkan untuk memformat kod CSS untuk halaman penerbitan akademik. Ini ialah perpustakaan gaya CSS untuk memformat dokumen untuk pencetakan dan penerbitan di Internet.

12.CSSO

CSSO (Pengoptimum CSS) ialah alat yang melaksanakan pengoptimuman struktur fail CSS anda.

13. Helium

Helium ialah alat untuk mengenal pasti sifat CSS yang tidak digunakan merentas semua halaman tapak web. Ia berasaskan javascript dan berjalan terus dalam penyemak imbas. Helium mengambil senarai URL bahagian tapak dan kemudian menghuraikan setiap halaman untuk menghasilkan senarai semua gaya. Kemudian ia mengenal pasti sifat CSS yang tidak digunakan.

14. Strip Komen

Strip CSS Comments sangat memudahkan tugas berikut: mengalih keluar ulasan daripada fail CSS, mengurangkan saiz fail. Ia juga boleh didapati sebagai pemalam untuk gulp/grunt/brokoli.

15. CSS Mengecut

Alat ini membolehkan anda mengoptimumkan fail CSS dengan mudah sambil mengekalkan ketekalan dan format markup. Ia mempunyai beberapa alat yang membolehkan anda mengalih keluar ruang dan ulasan daripada dokumen.

Adakah anda mempunyai alat CSS lain yang berguna dalam fikiran? Sila kongsi mereka dalam komen!

Terjemahan artikel “ 15 Alat CSS untuk Mengaudit dan Mengoptimumkan Kod CSS Anda” telah disediakan oleh pasukan projek mesra