Menulis CSS adalah proses yang cukup sederhana dan mudah, lalu mengapa ini membutuhkan beberapa prinsip dan praktik terbaik?
Ketika skala proyek dan jumlah orang yang mengerjakannya meningkat, semakin banyak kesulitan baru mulai muncul yang dapat menyebabkan masalah serius di masa depan. Duplikasi kode, rantai definisi ulang properti yang kompleks, menggunakan! Properti CSS yang penting, yang tersisa dan yang tidak digunakan dari elemen HTML jarak jauh, dan sebagainya. Kode semacam itu lebih sulit dibaca dan diperbaiki.
Menulis CSS dengan cara profesional akan membuat kode lebih mudah dikelola, dapat dikembangkan, dimengerti, dan bersih. Mari kita lihat 5 prinsip sederhana dan sangat efektif yang membawa CSS Anda ke tingkat selanjutnya.
Prinsip penamaan
“Dalam ilmu komputer, hanya ada dua hal rumit: pembatalan dan penamaan cache” - Phil Carleton
Penamaan dan penataan pemilih CSS yang benar adalah langkah pertama untuk membuat CSS Anda lebih mudah dibaca, terstruktur, dan bersih. Menentukan aturan dan batasan dalam konvensi penamaan membuat kode Anda terstandarisasi, andal, dan mudah dimengerti.
Itulah sebabnya konsep seperti
BEM (Block-Element-Modifier) ,
SMACSS (Scalable dan Modular Architecture untuk CSS) dan
OOCSS (Object Oriented CSS) sangat populer di kalangan banyak pengembang frontend.
Prinsip spesifisitas rendah
Mengganti properti CSS sangat berguna, tetapi dalam proyek yang lebih kompleks, hal-hal dapat keluar dari tangan dengan cukup cepat. Rantai utama dapat menjadi sangat panjang dan kompleks, yang akan memaksa Anda untuk menggunakan
!important untuk menyelesaikan masalah kekhususan, yang dapat dengan mudah hilang saat men-debug kode atau menambahkan fungsi baru
.card {} .card .title {} .blog-list .card img {} .blog-list .card.featured .title {} #js-blog-list .blog-list .card img {}
Browser dan spesifisitas
Salah satu manfaat mengikuti prinsip spesifisitas rendah adalah kinerja. Browser mem-parsing CSS
dari kanan ke kiri .
Mari kita lihat contoh berikut:
.blog-list .card img {}
Browser akan "membaca" pemilih sebagai berikut:
- Temukan semua tag <img> di halaman
- Dari mereka, pilih elemen yang merupakan keturunan dari kelas .card
- Dari mereka, pilih elemen yang merupakan keturunan dari kelas .blog-list
Anda dapat melihat bagaimana penyeleksi dengan spesifisitas tinggi memengaruhi kinerja, terutama ketika kita perlu memilih elemen umum secara global seperti
div ,
img ,
li , dll.
Menggunakan tingkat spesifisitas yang sama
Menggunakan penyeleksi CSS dengan spesifisitas rendah dikombinasikan dengan metodologi BEM atau salah satu prinsip penamaan lainnya yang disebutkan di bagian sebelumnya, kita dapat membuat kode yang kuat, fleksibel, dan mudah dimengerti.
Mengapa menggunakan kelas CSS? Kami ingin mematuhi tingkat spesifisitas yang sama, namun tetap fleksibel dan dapat memilih beberapa elemen. Selektor elemen dan pemilih id tidak memberikan fleksibilitas yang kami butuhkan.
Mari kita menulis ulang contoh sebelumnya menggunakan BEM dan tetap berpegang pada spesifisitas rendah.
.card {} .card__title {} .blogList__image {} .blogList__title--featured {} .blogList__img--special {}
Anda dapat melihat bagaimana penyeleksi ini lebih sederhana, lebih jelas, dan dapat dengan mudah didefinisikan ulang dan diperluas jika perlu. Dan menjaga kekhususan mereka rendah (satu-satunya kelas), kami menjamin kinerja dan fleksibilitas yang optimal.
Prinsip KERING
Prinsip KERING (Jangan ulangi sendiri, rus. Jangan ulangi) juga dapat diterapkan ke CSS. Duplikasi dalam CSS dapat menyebabkan kode mengasapi, menimpa yang tidak perlu, dukungan yang buruk, dll. Masalah ini dapat diperbaiki dengan struktur kode yang tepat dan dokumentasi yang berkualitas.
Storybook adalah alat gratis yang hebat yang memungkinkan Anda membuat ikhtisar komponen antarmuka web yang tersedia dan menulis dokumentasi berkualitas.
.warningStatus { padding: 0.5rem; font-weight: bold; color: #eba834; } .errorStatus { padding: 0.5rem; font-weight: bold; color: #eb3d34; } .form-errorStatus { padding: 0.5rem 0 0 0; font-weight: bold; color: #eb3d34; }
Mari kita refactor kode mengikuti prinsip KERING
.status { padding: 0.5rem; font-weight: bold; } .status--warning { color: #eba834; } .status--error { color: #eb3d34; } .form__status { padding: 0.5rem 0 0 0; }
Prinsip tanggung jawab tunggal
Dengan menggunakan prinsip tanggung jawab tunggal dalam CSS, Anda dapat yakin bahwa kelas CSS mudah diperluas dan didefinisikan ulang. Mari kita lihat contoh berikut ini
.button { padding: 1rem 2rem; font-size: 2rem; border-radius: 0.2rem; background-color: #eb4934; color: #fff; font-weight: bold; } .button--secondary { border-radius: 0; font-size: 1rem; background-color: #888; }
Dapat dilihat bahwa jika Anda perlu memperluas kelas
.tombol menggunakan
.button - pengubah
sekunder , Anda harus melakukan banyak penggantian, meskipun kami hanya ingin mengubah warna latar belakang, mempertahankan gaya standar.
Masalahnya adalah kelas .tombol kami memiliki beberapa peran:
- Menentukan model blok ( bantalan )
- Menentukan tipografi ( ukuran font , font-berat )
- Menentukan penampilan ( warna , warna latar , garis batas )
Ini menyulitkan perluasan kelas CSS dan integrasinya dengan kelas-kelas lain. Dengan mengingat hal itu, mari kita tingkatkan CSS kami dengan BEM dan OOCSS.
.button { padding: 1rem 2rem; font-weight: bold; color: #fff; } .button--radialBorder { border-radius: 0.2rem; } .button--large { font-size: 2rem; } .button--primary { background-color: #eb4934; } .button--secondary { background-color: #888; }
Kami telah memecah gaya
tombol kami menjadi beberapa kelas yang dapat digunakan untuk memperluas kelas dasar. Jika perlu, kami dapat menerapkan pengubah dan menambahkan yang baru saat perubahan desain atau elemen baru ditambahkan
Prinsip keterbukaan / kedekatan
Entitas perangkat lunak (kelas, modul, fungsi, dll.) Harus terbuka untuk ekstensi, tetapi ditutup untuk perubahan ”Kami telah menggunakan prinsip terbuka / tertutup pada contoh sebelumnya. Semua fitur dan opsi baru harus ditambahkan dengan ekstensi. Mari kita lihat contoh ini.
.card { padding: 1rem; } .blog-list .card { padding: 0.5em 1rem; }
Pemilih .blog-list .card memiliki beberapa masalah potensial:
- Beberapa gaya hanya dapat diterapkan jika elemen .card adalah anak dari elemen .blog-list
- Gaya dipaksa untuk diterapkan ke elemen .card jika ditempatkan di elemen .blog-list , yang dapat menyebabkan hasil yang tidak terduga dan penggantian yang tidak perlu
Mari kita tulis ulang contoh sebelumnya:
.card { padding: 1rem; } .blogList__card { padding: 0.5em 1rem; }
Kami memperbaiki masalah jika kami menggunakan pemilih kelas tunggal. Dengan pemilih ini, kita dapat menghindari efek yang tidak terduga dan tidak menggunakan gaya bersarang kondisional.
Kesimpulannya
Kami melihat contoh bagaimana menerapkan beberapa prinsip sederhana ini secara signifikan dapat meningkatkan pendekatan untuk menulis CSS:
- Penamaan dan struktur terstandarisasi, keterbacaan yang lebih baik menggunakan BEM, OCSS, dll.
- Peningkatan kinerja dan struktur menggunakan penyeleksi dengan spesifisitas rendah
- Mengurangi kembung dan meningkatkan kualitas kode menggunakan prinsip KERING
- Fleksibilitas dan rawatan menggunakan prinsip terbuka / tertutup
Terima kasih telah meluangkan waktu untuk membaca artikel ini. Jika Anda merasa itu berguna, Anda dapat membagikannya atau memberikan komentar.