Haruskah Anda Mulai Menggunakan CSSLint?

Mendapatkan kode kami ditinjau oleh seorang profesional adalah cara terbaik untuk meningkatkan kualitas kode tetapi apa yang terjadi jika Anda tidak memiliki akses ke rockstar programmer ? Anda melakukan hal terbaik berikutnya dan mengambil sebuah 'lint' untuk bahasa itu.

Hari ini, saya ingin berbicara sedikit tentang CSSLint, alat analisis kode yang baru dirilis untuk, anda dapat menebaknya, CSS. Bergabunglah dengan saya setelah lompat!

Apa itu Lint? 

Mari kita bahas Wikipedia untuk sebuah definisi:

Lint adalah alat yang menandai penggunaan yang mencurigakan dalam perangkat lunak yang ditulis dalam bahasa komputer apa pun.

Pada dasarnya, sebuah lint melihat kode kami dan memeriksa praktik pemrograman yang buruk. Variabel tidak terdefinisi, konstruk yang tidak efisien, hal-hal seperti itu.

Anda mungkin bertanya-tanya mengapa Anda membutuhkan alat seperti itu. Mari menghadapinya: tidak semua dari kita memiliki pengetahuan tertinggi tentang apa yang sedang kita kerjakan atau memiliki kemewahan untuk meninjau rekan kode kita. Dalam kasus ini, menempelkan kode kami di sebuah lint adalah pilihan terbaik berikutnya. Dan tidak seperti alat pembersih, lint memuntahkan informasi tentang kode Anda dan bagaimana cara memperbaikinya.

Memperkenalkan CSSLint

Dibuat oleh Nicholas Zakas dan Nicole Sullivan, CSSLint adalah alat open source yang memeriksa sintaks Anda terhadap seperangkat aturan yang telah ditetapkan untuk membasmi kemungkinan inefisiensi dan memastikan bahwa presentasi Anda berfungsi seperti yang diharapkan dengan sedikit kejutan.

Setelah menuju ke situs CSSLint, Anda hanya dapat menempelkan sumber CSS Anda dan memilih aturan mana yang ingin Anda terapkan. Tekan tombol lint dan CSSLint akan mulai mengikis keangkuhan Anda.

Jika Anda pecandu Node seperti saya, ada juga versi untuk itu . Cukup ketik sudo npm install -g csslint dan Anda siap melakukannya!

Aturan CSS Lint

Mari kita lihat peraturan yang diberlakukan CSSLint. 

• Kesalahan parsing harus diperbaiki
• Jangan menggunakan class yang berdampingan
• Menghapus aturan kosong
• Gunakan properti yang benar untuk tampilan
• Jangan gunakan terlalu banyak floats
• Jangan terlalu banyak menggunakan font web
• Jangan gunakan deklarasi font-size
• Jangan gunakan ID di penyeleksi
• Jangn qulifikasikan tajuk
• Gaya judul hanya boleh didefinisikan satu kali 
• Nilai nol tidak membutuhkan unit
• Properti awalan vendor juga harus memiliki standar 
• Gradien CSS memerlukan semua awalan peramban
• Hindari penyeleksi yang terlihat seperti ekspresi reguler
• Waspadalah terhadap model kotak yang rusak 
• Jangan gunakan @import
• Jangan gunakan! penting
• Sertakan semua awalan vendor yang kompatibel 
• Hindari properti duplikat 

Jika Anda seperti saya, beberapa peraturan pasti membuat Anda bingung.

Apakah aturan itu masuk akal?

Sejujurnya, ya, tidak, dan semua yang ada di antaranya.

Setelah bersembunyi di sejumlah papan diskusi dan ruang IRC, saya menemukan bahwa banyak pengembang tampaknya gempar atas aturan dan mungkin benar juga. Biarkan saya mencoba menjelaskan mengapa sebagian besar aturan masuk akal tetapi yang lain tidak.

Aturan Kontroversial

Jangan gunakan ID di penyeleksi

ID tidak boleh digunakan dalam penyeleksi karena aturan ini terlalu erat dengan HTML dan tidak memiliki kemungkinan untuk digunakan kembali. Lebih disukai menggunakan class di penyeleksi dan kemudian menerapkan class ke elemen di halaman.

Yang ini mengejutkan banyak pengembang karena kami cukup terbiasa untuk menetapkan ID untuk komponen struktural utama dari tata letak seperti header dan footer.

CSSLint berpendapat bahwa penataan untuk elemen seperti itu, menurut definisi, tidak dapat langsung digunakan kembali. Jika Anda ingin bilah sisi ganda di halaman Anda, sebuah class memungkinkan Anda menggunakan kembali gaya sementara ID tidak.

Perlu diingat bahwa hanya karena suatu class dapat digunakan kembali tidak berarti harus demikian. clas-clas unik dapat diterima dengan sempurna dan merupakan cara membengkak untuk menggunakan kembali gaya jika dibutuhkan.

Jangan qualifikasikan tajuk

Elemen judul (h1-h6) harus didefinisikan sebagai gaya tingkat atas dan tidak dibatasi untuk area tertentu pada halaman. 

Sebagian besar pengembang, termasuk saya, telah terbiasa menulis kontex tajuk sensitif . Seperti pada, kami menentukan gaya terpisah untuk tajuk tergantung pada, katakanlah, pada halaman mana ia ditampilkan. Argumen yang mendukung pendekatan ini adalah bahwa ia memindahkan semua cruft dari markup ke stylesheet. Anda hanya dapat mendefinisikan tag dan membiarkan CSS mengalir demikian.

CSSLint berargumen bahwa pendekatan semacam itu membahayakan kemampuan prediksi desain Anda. Jika ada orang lain yang mengambil desain Anda dan mencoba memasukkan tajuk di suatu tempat, ia harus mengetahui konteks dan penempatan elemen. Dengan tajuk yang ditentukan tanpa syarat, ia dapat menggunakan tajuk mana pun penuh percaya diri dengan presentasinya terlepas dari orang tuanya.

Gaya tajuk hanya boleh didefinisikan satu kali

Elemen tajuk (h1-h6) harus memiliki satu aturan tepat di situs.

Perpanjangan aturan di atas untuk meningkatkan prediksi presentasi. Benar atau salah, perlu diingat bahwa ini pada dasarnya mengecualikan termasuk semacam kode reset dalam stylesheet Anda.  Setiap lembar reset bekerja juga pada tajuk Anda dan dengan demikian CSSLint akan menandainya sebagai kesalahan.

Aturan yang Dipertanyakan

Jangan gunakan class yang berdampingan

Kelas yang berdampingan terlihat seperti .foo.bar. Meskipun secara teknis diizinkan dalam CSS, ini tidak ditangani dengan benar oleh Internet Explorer 6 dan yang sebelumnya.

Dengan diaktifkannya aturan ini, CSSLint menandai aturan seperti.nav.red ,dengan alasan resmi bahwa Internet Explorer 6 dan di bawahnya tidak cocok dengan pemilih. Saya menghormati pengembang tetapi saya harus tidak setuju di sini. Hanya karena itu tidak bekerja dengan Internet 'Dev-buster' Explorer 6 bukanlah alasan yang bagus untuk berhenti bekerja dengan fitur yang bermanfaat.

Waspadalah terhadap model kotak yang rusak

Perbatasan dan lapisan menambahkan ruang di luar konten elemen. Menetapkan lebar atau tinggi bersama dengan batas dan bantalan biasanya merupakan kesalahan karena Anda tidak akan mendapatkan hasil visual yang Anda cari. CSS Lint memperingatkan ketika aturan menggunakan lebar atau tinggi selain padding dan / atau border.

Model kotak mungkin rusak tetapi hampir setiap pengembang paling depan yang saya tahu sangat menyadari kekurangan dan bagaimana mengatasi perbedaan dengan implementasi. Apakah kita benar-benar siap untuk menyerahkan lapisan kontrol karena beberapa browser lama memiliki implementasi yang berbeda?

Jangan gunakan terlalu banyak font web

Menggunakan font web hadir dengan implikasi kinerja karena file font bisa cukup besar dan beberapa browser memblokir rendering saat mengunduhnya. Untuk alasan ini, CSS Lint akan memperingatkan Anda ketika ada lebih dari lima font web dalam style sheet.

Saya tidak melihat situasi di mana saya akan menggunakan lebih dari lima font dalam satu halaman, tetapi saya merasa bahwa masuk ke wilayah ini sedikit dipertanyakan. Jika ada, ini adalah cacat desain daripada cacat pengembangan. Jika seorang pengembang mereferensikan lima font terpisah di stylesheetnya, kemungkinan besar, itu bukan kebetulan.

Jangan gunakan terlalu banyak float, yaitu abstraksi fungsiniolitasnya.

CSS Lint cukup memeriksa untuk melihat apakah Anda telah menggunakan float lebih dari 10 kali, dan jika demikian, menampilkan sebuah peringatan. Menggunakan banyak float ini biasanya berarti Anda perlu semacam abstraksi untuk mencapai tata letaknya.

Sementara saya setuju dengan argumen pencipta bahwa memiliki lebih dari sepuluh contoh float adalah ide yang buruk, saya juga merasa bahwa ini akan memengaruhi markup setelah melewati ukuran tertentu.

Misalnya, dalam situasi di mana Anda ingin float dua elemen, secara tradisional Anda akan menggunakan:

1

2

<div class="container-1"></div>

3

<div class="container-2"></div>

... dan penataannya, dengan metode tradisional.

1

2

.container-1 { width: 70%; float: left; }

3

.container-2 { width: 30%; float: left; }

Metode CSSLint akan mengabstraksi float seperti:

1

2

<div class="container-1 float"></div>

3

<div class="container-2 float"></div>

... dan penataan seperti :

1

2

.container-1 { width: 70%; }

3

.container-2 { width: 30%; }

4

.float { float: left;}

Sementara saya setuju bahwa ini adalah pendekatan yang layak, saya merasa bahwa markup akan menjadi sangat ramai setelah Anda mencoba untuk abstrak lebih jauh. Saya lebih suka melihat class yang mengandung sebagian besar gaya di satu tempat daripada mengacaukan markup dengan 10 class. Sekali lagi, saya merasa bahwa ini adalah topik yang subjektif.

Aturan Yang Jelas

• Hapus aturan kosong
• Hindari properti duplikat
• Nilai nol tidak membutuhkan unit
• Properti awalan vendor juga harus memiliki standar
• Kesalahan parsing harus diperbaiki
• Sertakan semua awalan vendor yang kompatibel
• ... sisa peraturan

Semua aturan di atas mematuhi praktik standar saat ini. Tentu, beberapa aturan hanya memiliki sedikit signifikansi dunia nyata, seperti nilai nol yang tidak membutuhkan unit, atau akan ditangkap oleh IDE yang layak, seperti kesalahan parsing, tetapi bagaimanapun ini adalah aturan yang baik untuk dimiliki dalam rangkaian uji CSS.

Beberapa Kekhawatiran

CSSLint akan membantu banyak pengembang tetapi ...

CSSLint, tidak diragukan lagi, ditulis oleh pengembang dengan kredensial tinggi dan pasti akan membantu banyak pengembang dan perancang.

Apa yang saya temukan agak menjengkelkan adalah bahwa banyak aturan kontroversial berasal dari Object Oriented CSS, sebuah kerangka kerja CSS yang dimaksudkan untuk membiarkan pengembang menulis CSS yang dapat dipertahankan. Meskipun saya tidak menentang kerangka kerja, dan paradigmanya, Anda harus setuju bahwa ini adalah cara melakukan sesuatu, bukan cara untuk melakukan sesuatu.

Berbeda dengan JSLint di mana saya merasa semua aturan masuk akal, dengan CSSLint, saya merasa diberi tahu bahwa satu gaya penulisan CSS benar dan yang lain salah. Itu seperti seseorang yang meminta saya untuk memberikan The Beatles karena Rolling Stones adalah band pilihan mereka.

Itu Hanyalah sebuah Alat

Alat hanya itu - alat.

Tentu saja, kita, sebagai sebuah kelompok, cenderung agak melekat pada kode kita. Kami tidak senang mendengar bahwa kode kami dapat * gasp * berpotensi masalah atau ditulis dengan cara yang sama sekali berbeda.

Hal utama yang perlu diperhatikan di sini adalah bahwa CSSLint pada akhirnya adalah alat. Ini hanya memberi tahu Anda bahwa beberapa area mungkin memiliki kesalahan.

CSSLint tidak harus menjadi tangan besi di mana Anda mendasarkan seluruh ego Anda. Tidak ada alasan untuk membungkuk ke belakang untuk menghindari peringatan jika Anda tahu persis apa yang Anda lakukan.

Jadi, sebaiknya Anda mulai menggunakan CSSLint?

Ya.

Dalam CSS, seperti dalam kalkulus integral, ada banyak solusi untuk masalah yang diberikan. Seharusnya tidak ada cara 'terbaik' untuk melakukan sesuatu - Anda dapat mendukung keterbacaan sementara saya dapat mendukung efisiensi. Yang penting adalah Anda menyadari bahwa masing-masing  kita dan setiap orang memiliki cara unik  dalam melakukan sesuatu.

Jika Anda tidak memiliki perspektif yang sama dalam memecahkan masalah, Anda mungkin tidak setuju dengan pendekatan lain dan bahkan mungkin merasa dipertanyakan.

Karena itu, tidak pernah ada alasan bagus untuk tidak belajar hal-hal baru. Melihat masalah dari sudut pandang pengembang lain adalah cara yang bagus untuk melihat apakah Anda dapat mempelajari sesuatu yang baru.

Membungkus

Apa pendapat Anda tentang CSSLint? Apakah bermanfaat? Membingungkan? Apakah itu membantu masalah dunia nyata Anda? Beri tahu kami di komentar.

Jadilah yang terbaik untuk satu sama lain dan terima kasih banyak untuk membaca!