Teknik untuk membantu menyederhanakan CSS

Mobile First tanpa penggantian

Ada pendekatan seluler pertama yang mengharuskan kita membuat antarmuka dari yang kecil (seperti ponsel, jam tangan, dll) hingga perangkat besar (desktop, tv, dll).

Jadi pengembang menggunakan fitur media min-width. Akibatnya, mereka akan mendapatkan banyak penggantian. Misalnya, saya menambahkan padding dengan override.

Saya pikir itu akan menjadi tidak dapat dibaca ketika Anda memiliki banyak kode. Jadi saya mengusulkan untuk menyimpan ide pendekatan pertama seluler tetapi pikirkan tentang rentang perangkat dan tambahkan gaya hanya ketika dibutuhkan menggunakan fitur min-width dan max-width.

Misalnya, saya menggunakan bantalan yang berbeda tetapi rentang membantu menghindari penggantian.

jangan lakukan ini

 .example { padding : 1rem 1.5rem ; } @media ( min-width : 481px ) { .example { padding : 2rem 2.5rem ; } } @media ( min-width : 961px ) { .example { padding : 3rem 3.5rem ; } }

Anda dapat menggunakan ini sebagai gantinya

 @media ( max-width : 480px ) { .example { padding : 1rem 1.5rem ; } } @media ( min-width : 481px ) and ( max-width : 960px ) { .example { padding : 2rem 2.5rem ; } } @media ( min-width : 961px ) { .example { padding : 3rem 3.5rem ; } }

Menggunakan singkatan sesuai kebutuhan

Biasanya, pengembang suka menggunakan sintaks singkatan CSS. Ya, itu akan berhasil. Tapi Anda tidak berpikir steno selalu mendefinisikan nilai untuk beberapa properti. Misalnya, latar belakang menetapkan nilai untuk 10 properti!

Dengan demikian hal itu akan menyebabkan penimpaan properti dan pemeliharaan yang sulit di masa mendatang. Jadi jangan gunakan sintaks singkatan, jika Anda tidak yakin itu benar-benar diperlukan. Misalnya, cukup gunakan properti background-color untuk mengubah warna latar belakang elemen.

jangan lakukan ini

 .example { background : tomato ; }

Anda dapat menggunakan ini sebagai gantinya

 .example { background-color : tomato ; }

margin dan padding tanpa nilai 0

Banyak waktu ada praktik menggunakan margin dan padding steno yang mengarah ke komplikasi pemeliharaan kode di masa depan. Masalahnya adalah orang menetapkan nilai 0 saat tidak diperlukan. Misalnya, jika mereka harus mengatur margin atas dan bawah ke 1rem, mereka akan menulis padding: 1rem 0;

Dalam hal ini, nilai 0 akan menyebabkan Anda harus menimpanya di masa mendatang. Dan lakukan itu setiap saat. Jadi Anda akan pergi untuk menimpa neraka.

Sebagai solusi, saya sarankan menggunakan singkatan margin dan padding hanya ketika Anda harus menetapkan nilai untuk semua sisi. Dan jika Anda harus menetapkan nilai untuk sisi tertentu, gunakan properti margin-* dan padding-* tunggal.

jangan lakukan ini

 .example { padding : 1rem 0 ; }

Anda dapat menggunakan ini sebagai gantinya

 .example { padding-top : 1rem ; padding-bottom : 1rem ; }

PS
Jika Anda menyukai posting ini, silakan bagikan di Twitter

Saya selalu terbuka untuk setiap kesempatan untuk berbagi pengetahuan tentang CSS dan HTML dengan Anda. Jadi saya bisa:
jawab semua pertanyaan Anda tentang CSS dan HTML ( gratis )
buat ulasan kode tertulis dari proyek Anda ( berbayar )
ceritakan tentang apa yang harus Anda pelajari ( berbayar )

Langsung chat saya di melnik909@ya.ru .

Anda juga dapat mengucapkan terima kasih:
Beli baju, stiker, atau barang lain untuk frontender: https://www.redbubble.com/shop/ap/79109127
Dukung pekerjaan saya: https://www.patreon.com/melnik909

Ikuti aku:
Twitter: https://twitter.com/melnik909
Facebook: https://www.facebook.com/melnik909/
Instagram: https://www.instagram.com/s.melnik909/

PSS Posting ini ditulis dengan dukungan sponsor saya: Ashlea Gable, Ben Rinehart, Sergio Kagiema, Jesse Willard, Tanya Ten.

July 19, 2021

codeorayo

Ampuh! Ini rahasia mengembangkan aplikasi secara instan, tinggal download dan kembangkan. Gabung sekarang juga! Premium Membership [PRIVATE] https://premium.codeorayo.com

Leave a Reply

Your email address will not be published. Required fields are marked *