Saat Anda menulis banyak kode CSS, Anda mungkin mengalami lebih dari satu kesalahan. Beberapa alat mungkin diperlukan untuk mencegah kesalahan penulisan CSS Anda.
Mungkin, terkadang kesalahan Anda benar -benar bug. Mungkin juga bahwa ketidakkonsistenan atau gaya kode yang tidak jelas disebabkan oleh tergesa -gesa. Mungkin banyak dari mereka tampak sepele (tergantung pada kepribadian Anda), tetapi seiring dengan tumbuhnya basis kode dan waktu menumpuk, banyak orang akan membuat hal -hal buruk saat menggunakannya. Konsekuensi dari hal -hal bukanlah sesuatu yang dapat Anda bayangkan.
Anda mencoba mengendalikan diri. Kolega Anda juga membantu Anda ketika Anda bebas memperbaiki kesalahan Anda secara tepat waktu. Namun, Anda dan kolega Anda sama -sama pembuat kesalahan, jadi pada akhirnya, mereka pasti kegagalan setidaknya sampai batas tertentu. Nanti, Anda atau orang lain akan menyelesaikan masalah yang disebabkan oleh kesalahan CSS pada halaman Anda.
Anda maupun kolega Anda tidak suka mendiskusikan kesalahan yang Anda buat karena memalukan. Bahkan bisa membuat frustrasi atau pecah secara emosional. Spesifikasi tertentu kadang -kadang bermanfaat untuk pemeliharaan basis kode, seperti gaya penulisan yang konsisten, yang mungkin tampak agak pedantic dan membosankan ketika dieksekusi secara manual. Kalau tidak, mereka akan menunjukkan unsur -unsur cinta Anda yang biasa untuk pamer dan keras kepala.
Selain itu, Anda mungkin lebih suka memperbaiki kesalahan tepat waktu daripada menunggu kode ditinjau dan orang lain untuk menunjukkan kesalahan, dan memodifikasinya sendiri dan menyatakan bahwa Anda tidak akan memiliki kesalahan seperti itu lagi. Ketika kesalahan CSS Anda terjadi, umpan balik tepat waktu akan membantu Anda menghemat banyak waktu.
Yang Anda butuhkan adalah mesin yang mencegah kesalahan
Anda memerlukan mesin yang mencegah kesalahan terjadi, dapat memahami CSS dan memahami Anda: niat, preferensi, ide, dan kelemahan Anda.
Mesin seperti itu akan memiliki keterbatasan. Semuanya tidak sempurna. Tetapi keterbatasan ini berbeda dari Anda dan kolega Anda. Selama itu dapat mencegah kesalahan, itu akan terus mencegahnya, bekerja tanpa lelah. Pada saat yang sama, Anda dan kolega Anda selalu dapat meningkatkan mesin, memperluas fungsinya dan melemahkan keterbatasannya. Ini adalah open source, dan orang-orang di seluruh dunia dapat bergabung dan melakukan bagian mereka-penulis lain yang ingin menghentikan diri dari memiliki kesalahan menulis CSS.
Seperti yang lain, penulis CSS membutuhkan linter
Kami menyebut program -program ini yang mencegah kesalahan "linter". Ada beberapa linter yang lebih baik di JavaScript. Eslint khususnya, ini bekerja secara ajaib, menunjukkan kepada kita bahwa linter yang baik sangat berguna. Tetapi di CSS kami tidak begitu beruntung, pilihan kami sangat terbatas: SCSS-Lint berbasis Ruby dengan preprosesor khusus dan CSS Lint sebelumnya.
Tapi ini semua sebelum postcs muncul. Selain itu, PostCSS menyediakan beberapa metode untuk membangun alat CSS yang lebih interaktif. Ini dapat mengurai semua sintaks kelas CSS ke dalam plugin Sintaks Abstrak (AST) untuk analisis dan operasi. Dan dengan parser khusus, postcs bahkan dapat menangani pola tidak valid yang tidak teratur (seperti // komentar)
Kondisi kematangan sudah dapat menghasilkan linter dengan fitur yang lebih kuat-didukung oleh PostCSS dan terinspirasi oleh fitur terbaik dari SCSS-Lint dan Eslint.
Saya bekerja dengan beberapa teman di proyek ini, dan sekarang saya akan mulai memperkenalkan alat yang kami kembangkan: Stylelint.
Hal -hal yang dapat Anda lakukan dengan stylelint
Berikut ini adalah ringkasan fungsi yang dicoba di Stylelint, dengan lebih dari 100 aturan dan skalabilitas.
Pada titik ini, jika Anda merasa sedikit tidak sabar ("Oke, oke: Saya percaya Stylelint akan memiliki efek kerja yang ajaib. Tidak perlu terlalu banyak ringkasan."). Lewati saja ke bagian berikutnya, di sini saya hanya menjelaskan beberapa masalah dan memberikan beberapa tips.
Penangkapan Kesalahan
Beberapa aturan Stylelint dirancang untuk mengidentifikasi kesalahan yang jelas, seperti kesalahan ejaan atau kelalaian yang dibuat oleh mata Anda yang kesal atau murung. Misalnya, Anda dapat menonaktifkan blok kosong, nilai heksadesimal yang tidak valid, pemilih duplikat, nama animasi yang tidak disebutkan namanya dan sintaks gradien linier yang salah.
Aturan lainnya adalah mencoba yang terbaik untuk menangkap kesalahan yang lebih halus. Berikut ini adalah aturan: Ketika Anda menggunakan properti steno (seperti margin ) yang dapat mengesampingkan properti mereka (seperti margin-top ), peringatan akan dikeluarkan karena ini mungkin disebabkan oleh kelalaian Anda. Selain itu, ada aturan lain yang memperingatkan Anda: ketika kekacauan terjadi, jika aturan A muncul sebelum aturan B, tetapi sebenarnya mencakup aturan B, karena pemilih aturan A memiliki prioritas yang lebih tinggi (misalnya, aturan A adalah .foo.bar{・・・} dan aturan B adalah .foo{・・・} ). Ini adalah situasi yang sangat sulit.
Ada juga aturan yang menggunakan plugin PostCSS Doiuse untuk memeriksa apakah browser Anda mendukung gaya ini. Yang lain menggunakan plugin CSS-Colorguard untuk meminta kemiripan warna untuk menghindari membingungkan penggunaan Anda. (Harap dicatat: Ini adalah salah satu keunggulan utama Stylelint berdasarkan postcs: dibandingkan dengan plug-in postcss lainnya, Stylelint dapat meminta dengan sedikit usaha.)
Menegakkan praktik terbaik
Jika Anda menggunakan metode sistem di stylesheet Anda, atau memiliki panduan gaya untuk kode Anda, Anda harus melarang pola ini. Stylelint sudah menyediakan fitur -fitur ini.
Pertama, Anda perlu mengontrol pemilih Anda dengan keras. Dengan Stylelint, Anda dapat menonaktifkan pemilih yang melebihi spesifisitas tertentu atau menetapkan batasan pada kedalaman bersarang. Anda dapat menonaktifkan pemilih kategori (seperti pemilih tanpa ID) dan menggunakan ekspresi reguler untuk penamaan konvensi untuk sisanya.
Anda dapat melarang penggunaan hacks !important , atau browser yang tidak didukung oleh browser Anda. Jika Anda menggunakan autoprefixer (atau Anda harus), Anda dapat menonaktifkan penggunaan awalan vendor di stylesheet sumber.
Jika Anda ingin menjadi lebih ketat - Anda dapat menghabiskan waktu dalam konfigurasi untuk memastikan konsistensi absolut - Anda dapat menegakkan urutan properti stylesheet dan menyediakan properti, nilai, fungsi, dan unit untuk daftar hitam dan daftar putih.
Menjalankan konvensi gaya kode
Stylelint memiliki konvensi untuk secara otomatis menjalankan gaya kode, sehingga Anda dan rekan tim Anda tidak perlu secara aktif mengaturnya. Kami berkomitmen untuk membuat aturan ini lebih komprehensif dan fleksibel.
Aturan -aturan ini terutama ditujukan untuk ruang, tetapi juga untuk detail lainnya, seperti tanda kutip, huruf besar dan kecil, menulis nol sebelum desimal, menggunakan kata kunci, mengeja nilai, dll.
Bermimpi bahwa Anda dan rekan satu tim Anda dapat membuat konvensi format (misalnya, kami selalu meninggalkan ruang setelah menyatakan usus besar) dan memodifikasinya dalam konfigurasi stylelint Anda, dan Anda tidak akan membahasnya lagi setelah itu. Biarkan dieksekusi di Kerajaan Mesin.
Kembangkan dan kembangkan semuanya
Nicholas Zakas, pencipta Eslint (dan CSS Lint), menulis tentang keberhasilan Eslint terletak pada skalabilitasnya. Stylelint berupaya mengikuti lead Eslint dan memberi para penulis CSS dengan linter, yang juga dapat diperluas.
Anda dapat menulis dan mempublikasikan plugin aturan Anda sendiri. Sekarang kami memiliki banyak hal untuk digunakan; Dan kami sangat ingin melihat plugin orang lain yang sangat baik.
Konfigurasi dapat diperluas dan karenanya dapat dibagikan. Sedangkan untuk plugin, kami belajar tentang nilai fitur ini dari Eslint. Periksa itu termasuk konfigurasi WordPress dan kitcss dan telah dipublikasikan.
Jika Anda tidak menyukai tips built-in stylelint, Anda dapat membuat gaya sendiri dengan tangan, atau bahkan membuatnya untuk organisasi Anda. Anda juga dapat menyesuaikan aturan yang digunakan untuk menyediakan pesan peringatan.
Menggunakan API Stylelint, Anda dapat membuat plugin untuk kompiler teks dan melakukan tes untuk membuat Stylelint memasukkan ke dalam setiap aspek alur kerja Anda.
Jika Anda memiliki ide tentang ekstensi Stylelint, beri tahu kami!
Jawaban atas pertanyaan yang diharapkan
Mungkin ada beberapa pertanyaan dalam pikiran Anda. Berikut adalah beberapa penjelasan yang paling umum:
Apakah mungkin menggunakan Stylelint di SCS atau kurang?
Jawabannya adalah ya, Anda dapat menggunakan stylelint di SCSS dan didukung juga! Karena PostCSS memungkinkan parser khusus, Stylelint dapat dengan mudah mendukung berbagai sintaksis non -standar - Anda dapat menyesuaikan parser PostCSS untuk parsing.
Karena PostCSS Parser-Stylelint mendukung SCSS, lebih sedikit dan gula baru. Jika Anda ingin menerapkan dukungan sintaks khusus lainnya, Anda dapat melakukannya dengan postless!
Tentu saja, ada aturan tertentu yang terikat pada sintaks non-standar Anda (seperti #{$interpolation} dalam pemilih ID SASS). Karena Stylelint mencoba menutupi gaya stylesheet kami - beberapa orang menggunakan CSS standar, beberapa orang menggunakan bahasa yang diperluas seperti SCS, beberapa orang menggunakan properti kustom yang aneh, dll. - Ini pasti akan menciptakan beberapa kerentanan yang perlu diisi. Namun, kami telah berurusan dengan kesalahan yang kami temukan; Aturan apa pun selama periode ini dapat sepenuhnya ditutup atau dinonaktifkan dalam stylesheet baris demi baris atau dengan gaya baris demi baris.
Apakah Stylelint dapat menggunakan sintaks CSS masa depan?
Ya! Mirip dengan jawaban yang disebutkan di atas: Stylelint dapat memahami apa pun yang dipahami PostCS, termasuk memungkinkan sintaks CSS di masa depan (mungkin melalui plugin PostCSS). Faktanya, beberapa aturan stylelint secara khusus menangani sintaks CSS di masa depan dan beberapa properti khusus.
Konfigurasi stylelint sangat besar, dari mana saya harus memulai?
Kami merekomendasikan tiga metode konfigurasi:
Perluas konfigurasi yang diterbitkan. Kami mempertahankan standar konfigurasi stylelint untuk memfasilitasi pengguna untuk memberikan tolok ukur yang melekat. Dan banyak konfigurasi telah diumumkan. Mulailah dari awal dan tambahkan satu aturan pada satu waktu. Secara default, tidak ada aturan yang dihidupkan, jadi dengan menambahkan aturan secara manual Anda akan tahu mana yang akan ditegakkan dan Anda dapat memahami setiap aturan yang Anda tambahkan. Mulai konfigurasi copy-paste, tentukan opsi mana yang akan digunakan dan hapus secara selektif.
Untungnya, Anda tidak perlu menulis konfigurasi stylelint yang besar berulang kali. Anda dapat memilih gaya yang Anda sukai dan Anda dapat menggunakannya di mana saja.
Cara termudah untuk menjalankan stylelint?
Bagi kebanyakan orang, cara termudah adalah melalui baris perintahnya.
Jika Anda lebih suka plugin Gulp, Anda dapat menggunakan Gulp-Stylelint. Untuk Webpack, ada banyak kemungkinan pilihan. Kami berharap plugin ini akan menginspirasi Anda untuk membuat plugin Stylelint lainnya, seperti yang untuk Grunt. (Anda dapat mencari di proyek open source!)
Anda juga dapat menjalankan StyLelint menggunakan plugin PostCSS, termasuk apa pun yang termasuk dalam plugin. Ini berarti Anda dapat menggunakan stylelint di mana saja Anda dapat menggunakan postcs (yang mencakup hampir setiap alat kompilasi)!
Selain itu, ada juga plugin kompilasi Teks Stylelint untuk Atom, teks luhur, vs kode untuk memberikan umpan balik tercepat. Untuk informasi lebih lanjut, silakan merujuk ke daftar alat pelengkap di situs web Stylelint.
Seperti yang ditunjukkan di bawah ini, pada baris perintah, hasil yang Anda harapkan untuk melihat:
Tunjukkan sebagai berikut dalam atom;
Bisakah stylelint memperbaiki kesalahan saya?
Tidak, tetapi yang lain yang disebut StyleFMT dirancang untuk melakukan ini. Ini membutuhkan konfigurasi stylelint - sangat mirip dengan apa yang Anda gunakan di linting - dan dapat memperbaiki kesalahan apa pun. Kami berharap bahwa ketika staf komunitas berkontribusi, Stylelint dapat berevolusi untuk secara otomatis menambal kesalahan yang melanggar aturan Stylelint. Tolong bantu mereka mencapai tujuan ini!
Anda juga dapat menggunakan alat lain seperti CSSComb atau PerfectList yang digunakan bersama dengan Stylelint untuk secara otomatis memperbaiki dan secara otomatis memaksa istirahat.
Gunakan serat untuk suplementasi kendala
Ada sejumlah besar kendala di CSS yang baik. Itu sebabnya kami menghabiskan banyak waktu mendiskusikan metode seperti SMACS, ACS, BEM, koper, ITCS, dll. Kita semua tahu bahwa menulis CSS yang buruk sangat mudah, jadi jika kita tidak lagi takut pada penulisan gaya CSS, kita perlu membangun strategi cerdas di tempat kerja dan dengan berani tetap menggunakannya.
Tujuan dari Stylelint adalah untuk mengotomatiskan eksekusi - memberikan seperangkat aturan inti dan kerangka kerja yang dapat digunakan oleh penulis CSS untuk menjalankan strategi mereka sendiri.
Mari kita coba dan beri tahu kami cara melayani Anda. Jika Anda memiliki ide peningkatan yang lebih baik, seperti aturan kontribusi, peningkatan, pengujian, perbaiki bug, file, ide -ide baru atau hanya umpan balik, tolong beri kami pesan! Dengan cara ini, semua pengembang kami di semua tingkatan memiliki pekerjaan yang harus dilakukan.