Pada artikel ini, javascriptoo ingin berbagi dengan Anda koleksi 17 Tips Untuk Menulis CSS Modern terbaik yang direkomendasikan oleh komunitas CSS. Beberapa dibuat khusus untuk pemula, dan beberapa lebih maju, tetapi kami berharap semua orang dapat menemukan teknik hebat yang tidak mereka ketahui. Nikmatilah!

17 Tips Untuk Menulis CSS Modern

1. Waspadai Margin Collapse

Tidak seperti kebanyakan properti lainnya, margin vertikal akan macet saat ditemui. Ini berarti bahwa ketika tepi bawah salah satu elemen menyentuh tepi atas elemen lain, hanya elemen yang lebih besar yang bertahan. Ini adalah contoh sederhana:

Waspadai Margin Collapse

Alih-alih hanya 70px antara kotak merah dan biru, bukan margin kotak biru. Ada cara untuk berinteraksi dengan ini behaviour Berjuang, tetapi yang terbaik adalah menggunakannya saja, dan hanya menggunakan margin dalam satu arah, lebih disukai margin-bottom .

2. Gunakan Flexbox Untuk Tata Letak

Model flexbox ada karena suatu alasan. Baik elemen mengambang maupun blok kode sebaris dapat berfungsi, tetapi pada dasarnya keduanya adalah alat untuk dokumen gaya, bukan situs web. Di sisi lain, Flexbox dirancang khusus agar Anda dapat dengan mudah membuat tata letak apa pun dengan cara yang diharapkan.

Baca Juga : 13 Script PHP URL Shortener Terbaik

Rangkaian atribut yang disertakan dengan model flexbox memberi pengembang banyak fleksibilitas (tidak ada permainan kata-kata yang dimaksudkan), dan setelah Anda terbiasa dengannya, menerapkan tata letak responsif apa pun adalah sangat mudah. Saat ini, dukungan browser hampir sempurna, jadi seharusnya tidak ada yang mencegah Anda menggunakan flexbox penuh.

.container {
    display: flex;
    /* Don't forget to add prefixes for Safari */
    display: -webkit-flex;
}

Sebelumnya di Tutorialzine, kami telah memperkenalkan banyak tip dan trik tentang flexbox. Anda bisa cek disini

3. Lakukan Reset CSS

Meskipun situasinya telah meningkat pesat selama bertahun-tahun, masih banyak perbedaan dalam perilaku browser yang berbeda. Cara terbaik untuk mengatasi masalah ini adalah dengan menerapkan penyetelan ulang CSS, yang menetapkan nilai default umum untuk semua elemen sehingga Anda dapat mulai menggunakan lembar gaya bersih yang akan menghasilkan hasil yang sama di mana-mana.

Ada pustaka seperti normalize.css, minireset dan ress yang dapat melakukan ini dengan baik, mengoreksi semua inkonsistensi browser yang bisa dibayangkan. Jika Anda tidak ingin menggunakan pustaka, Anda dapat menggunakan gaya berikut untuk penyetelan ulang CSS yang sangat dasar:

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

Ini mungkin tampak kasar, tetapi menghapus margin dan padding sebenarnya membuat tata letak elemen jauh lebih mudah, karena tidak ada interval default yang perlu dipertimbangkan. Properti box-sizing: border-box; adalah setelan default bagus lainnya, yang akan kita bahas lebih lanjut di tip berikutnya. </ p>

4. Border-box For All

Kebanyakan pemula tidak memahami atribut ukuran kotak , tetapi sebenarnya ini sangat penting. Cara terbaik untuk memahami perannya adalah dengan melihat dua kemungkinan nilai:

  • content-box (default) – When we set a width/hight to an element, that’s just the size for it’s content. All paddings and borders are on top of that. E.g. a <div> has a width of 100 and padding of 10, our element will take up 120 pixels (100 + 2*10).
  • border-box – The padding and border are included in the width/height. A <div> with width: 100px; and box-sizing: border-box; will be 100 pixels wide no matter what paddings or borders are added.

Menyetel kotak pembatas ke semua elemen bisa sangat menyederhanakan setelan semua gaya, karena Anda tidak harus mengerjakan matematika sepanjang waktu.

5. Gambar Sebagai Latar Belakang

Saat menambahkan gambar ke desain Anda, terutama saat Anda ingin merespons, harap gunakan tag

dengan properti CSS background alih-alih </ code>. </ p>

Ini mungkin tampak membutuhkan banyak pekerjaan, tetapi karena ukuran latar belakang, posisi latar belakang, dan properti lainnya, sebenarnya lebih mudah untuk menata gambar dengan benar, dengan mempertahankan ukuran aslinya dan rasio aspek.

Baca Juga : Cara Termudah Untuk Menambahkan Validasi Formulir

Salah satu kelemahan dari teknik ini adalah aksesibilitas halaman web akan sedikit terpengaruh karena pembaca layar dan mesin pencari tidak dapat menangkap gambar dengan benar. Kesesuaian objek yang sangat baik dapat mengatasi masalah ini, tetapi browser belum didukung sepenuhnya.

6. Perbatasan Tabel Yang Lebih Baik

Tabel di HTML tidak menyenangkan. Mereka aneh, hampir tidak mungkin ditanggapi, dan umumnya sulit untuk diatur gaya. Misalnya, jika Anda ingin menambahkan batas sederhana ke tabel dan selnya, kemungkinan besar akan terlihat seperti ini:

Perbatasan Tabel Yang Lebih Baik

Seperti yang Anda lihat, ada banyak batas berulang di mana-mana, dan tidak terlihat bagus. Ini adalah cara cepat dan bebas retasan untuk menghapus semua batas ganda: cukup tambahkan border-collapse: crash; ke tabel.

7. Menulis Review Yang Lebih Baik

CSS mungkin bukan bahasa pemrograman, tetapi kodenya masih perlu didokumentasikan. Atur lembar gaya dan permudah kolega Anda atau masa depan Anda untuk menggunakan semua catatan sederhana.

Untuk bagian CSS yang lebih besar (seperti komponen utama atau kueri media), gunakan komentar bergaya dan tambahkan beberapa baris di bawah ini:

/*---------------
    #Header
---------------*/
header { }

header nav { }

/*---------------
    #Slideshow
---------------*/
.slideshow { }

Detail atau komponen yang kurang penting dalam desain dapat ditandai dengan komentar satu baris.

/*   Footer Buttons   */
.footer button { }

.footer button:hover { }

Selain itu, harap diingat bahwa CSS tidak memiliki satu baris // </ b> komentar, jadi saat mengomentari beberapa konten, Anda masih perlu menggunakan / </ em> / </ code> sintaks.

/*  Do  */
p {
    padding: 15px;
    /*border: 1px solid #222;*/
}

/*  Don't  */
p {
    padding: 15px;
    // border: 1px solid #222;  
}

8. Semua Orang Suka Kebab-case

Ketika nama kelas dan ID berisi banyak kata, mereka harus ditulis dengan tanda hubung (-). CSS tidak peka huruf besar / kecil, jadi camelCase tidak dapat dipilih. Dahulu kala, garis bawah tidak didukung (sekarang didukung), menjadikan tanda hubung sebagai konvensi default.

/*  Do     */
.footer-column-left { }

/*  Don't  */
.footerColumnLeft { }

.footer_column_left { }

Saat memberi nama, Anda juga dapat mempertimbangkan BEM, yang mengikuti sekumpulan prinsip yang dapat meningkatkan konsistensi dan menyediakan metode pengembangan berbasis komponen. Anda dapat membaca lebih lanjut tentang itu di artikel tips CSS yang luar biasa ini.

9. Don’t Repeat Yourself

Nilai sebagian besar properti CSS diwarisi dari elemen atas di pohon DOM, sehingga diberi nama lembar gaya Bertingkat . Mari kita ambil properti font sebagai contoh-properti ini hampir selalu diwarisi dari induknya dan Anda tidak perlu menyetelnya secara terpisah untuk setiap elemen pada laman.

Cukup tambahkan gaya font paling umum dalam desain Anda ke elemen atau , lalu perbaiki. Berikut ini beberapa pengaturan default yang baik:

html {
    font: normal 16px/1.4 sans-serif;
}

Di masa mendatang, Anda dapat mengubah gaya elemen tertentu kapan saja. Yang kita bicarakan adalah menghindari duplikasi dan menggunakan warisan jika memungkinkan.

10. CSS Animations with transform

Jangan menyetel animasi dengan langsung mengubah lebar dan tinggi atau kiri / atas / bawah / kanan elemen. Yang terbaik adalah menggunakan atribut transform () karena ini memberikan transisi yang lebih mulus dan membuat maksud Anda saat membaca kode lebih mudah dipahami.

Ini adalah sebuah contoh. Kami ingin menganimasikan bola dan menggesernya ke kanan. Daripada mengubah nilai left , gunakan translateX ():

.ball {
    left: 50px;
    transition: 0.4s ease-out;
}

/* Not Cool*/
.ball.slide-out {
    left: 500px;
}

/* Cool*/
.ball.slide-out {
    transform: translateX(450px);
}

Konversi dan semua fungsinya ( terjemahan , rotasi , zoom , dll.) memiliki kompatibilitas browser yang hampir universal dan bisa digunakan untuk bebas.

11. Don’t DIY, Use A Library

Komunitas CSS sangat besar, dan perpustakaan baru terus bermunculan. Mereka dapat digunakan untuk berbagai tujuan, dari cuplikan kecil hingga kerangka kerja dewasa untuk membangun aplikasi responsif. Kebanyakan dari mereka juga open source.

Baca Juga : Pelajari TypeScript Dalam 30 Menit

Lain kali Anda mengalami masalah CSS, coba selesaikan semua kemungkinan masalah terlebih dahulu, lalu coba selesaikan solusi yang belum tersedia di GitHub dan CodePen.

12. Keep Selector Specificity Low

Tidak semua seleksi CSS dibuat sama. Saat pengembang pemula menulis CSS, mereka biasanya mengharapkan penyeleksi untuk selalu mencakup semua yang ada di atasnya. Namun, ini tidak selalu terjadi, seperti yang ditunjukkan pada contoh berikut :

a{
    color: #fff;
    padding: 15px;
}

a#blue-btn {
    background-color: blue;
}

a.active {
    background-color: red;
}

Kami ingin bisa menambahkan kelas .active ke sembarang tombol dan mengubahnya menjadi merah. Ini tidak berfungsi di sini, karena background-color tombol kami disetel dengan pemilih ID, dan spesifisitas pemilih yang lebih tinggi . Aturannya adalah sebagai berikut :

ID (#id) > Class (.class) > Type (e.g. header)

Kekhususan juga akan ditumpangkan, jadi peringkat # button.active lebih tinggi daripada #button . Menggunakan selektor dengan kekhususan tinggi akan memungkinkan Anda untuk terus mengalahkan selektor lama dan bahkan selektor yang lebih tinggi, yang akhirnya mengarah ke !important. Ini akan membawa kita ke prompt berikutnya:

13. Jangan Menggunakan !important

Serius, jangan. Perbaikan cepat sekarang dapat menyebabkan penulisan ulang besar-besaran di masa mendatang. Sebaliknya, temukan alasan mengapa pemilih CSS Anda tidak berfungsi dan buat perubahan.

!important Satu-satunya saat aturan CSS dapat diterima adalah saat Anda ingin menulis ulang gaya sebaris dari HTML, yang dengan sendirinya merupakan kebiasaan buruk lain yang harus dihindari.

14. Caps lock artinya artinya, text-transform berarti gaya

Dalam HTML, ketika Anda ingin menggunakan huruf kapital untuk menunjukkan semantik yang dimaksudkan, misalnya, ketika Anda ingin menekankan pentingnya kata, tulislah huruf kapital.

<h3>Employees MUST wear a helmet!</h3>

Jika Anda membutuhkan semua huruf kapital untuk memuat beberapa teks karena alasan gaya, biasanya tulis teks tersebut dalam format HTML dan kemudian gunakan CSS untuk mengubahnya menjadi huruf kapital. Kelihatannya sama, tetapi jika Anda tidak mempertimbangkan konteksnya, konten Anda akan lebih bermakna.

<div class="movie-poster">Star Wars: The Force Awakens</div>
.movie-poster {
    text-transform: uppercase;
}

Hal yang sama berlaku untuk konversi teks string huruf kecil dan huruf besar juga dapat menanganinya.

15. Em, Rem, Dan Pixel

Ada banyak kontroversi tentang apakah orang harus menggunakan nilai em, rem atau px untuk mengatur ukuran elemen dan teks. Faktanya adalah bahwa ketiga opsi itu layak, masing-masing dengan pro dan kontra.

Semua pengembang dan proyek berbeda, jadi tidak ada aturan ketat tentang kapan harus menggunakannya. Namun, berikut beberapa tip dan praktik umum yang baik untuk setiap unit:

  • em – The value of 1 em is relative to the font-size of the direct parent. Often used in media-queries, em is great for responsiveness, but it can get really confusing tracing back the exchange rate of ems to pixels for each element (1.25em of 1.4em of 16px = ?).
  • rem – relatif terhadap ukuran font elemen HTML,  rem  membuatnya sangat mudah untuk memperbesar semua tajuk dan paragraf pada laman. Pertahankan HTML sebagai ukuran font default, dan gunakan rem  untuk mengatur yang lainnya. Ini adalah cara yang bagus dalam hal aksesibilitas.
  • px – piksel dapat memberi Anda akurasi tertinggi, tetapi tidak memberikan penskalaan apa pun saat digunakan dalam desain adaptif. Mereka dapat diandalkan, mudah dipahami, dan menyajikan hubungan visual yang baik antara nilai dan hasil aktual (15 piksel mendekati, mungkin hanya satu atau lebih dari dua).

Yang terpenting, jangan takut untuk mencoba, coba semuanya dan lihat mana yang paling Anda sukai. Terkadang em dan rem dapat menghemat banyak pekerjaan, terutama saat membuat halaman responsif.

16. Gunakan Preprocessor Pada Proyek Besar

Anda pernah mendengar tentang mereka-Sass, Less, PostCSS, Stylus. Preprocessor adalah langkah selanjutnya dalam evolusi CSS. Mereka menyediakan fitur seperti variabel, fungsi CSS, penumpukan pemilih, dan banyak fitur menarik lainnya untuk membuat kode CSS lebih mudah dikelola, terutama dalam proyek besar.

Baca Juga : 20 Plugin Tools Android Studio Terpopuler

Sebagai contoh sederhananya, berikut ini adalah cuplikan kode yang menggunakan Sass untuk secara langsung menggunakan variabel dan fungsi CSS di style sheet:

$accent-color: #2196F3;

a {
    padding: 10px 15px;
    background-color: $accent-color;
}

a:hover {
    background-color: darken($accent-color,10%);
}

Satu-satunya kelemahan dari preprocessor adalah mereka perlu dikompilasi ke CSS mentah, tetapi jika Anda sudah menggunakan skrip build dalam proyek Anda, ini seharusnya tidak terlalu merepotkan.

Untuk mempelajari lebih lanjut tentang praprosesor, lihat tutorial kami tentang dua sistem paling populer-Sass dan Less.

17. Validate

Memvalidasi CSS mungkin tidak sepenting memvalidasi kode HTML atau JavaScript, tetapi menjalankan kode melalui CSS Linter masih sangat membantu. Ini akan memberi tahu Anda jika Anda telah membuat kesalahan, memperingatkan Anda tentang praktik buruk, dan memberi Anda tip umum untuk meningkatkan kode Anda.

Sama seperti minfiers dan autoprefixer, ada banyak validator gratis yang tersedia:

  • Alat online: Program verifikasi W3, CSS Lint
  • Plugin editor teks: Sublime Text, Atom
  • Perpustakaan: stylelint (Node.js, PostCSS), css-validator (Node.js)