Pencukur CSS

"pisau cukur" dalam falsafah ialah prinsip metodologi yang membantu memudahkan pilihan yang kompleks dengan menghapuskan hipotesis atau pilihan yang tidak perlu.

Yang paling terkenal ialah Occam's Razor, yang menasihatkan supaya tidak memperbanyakkan entiti atau hipotesis melebihi keperluan: pilih penjelasan paling mudah yang berkesan.

Digunakan pada CSS, idea ini akan mencadangkan memperkemas pilihan harta gaya kami untuk mereka bentuk halaman dengan cara yang mudah dan berkesan, menggunakan teknik yang menyelesaikan masalah reka letak tanpa kerumitan yang tidak perlu.

Untuk menggunakan pisau cukur falsafah pada CSS, ini mengenai memilih penyelesaian yang paling mudah dan paling berkesan untuk menyelesaikan masalah reka letak, tanpa membebankan kod dengan peraturan yang tidak perlu. Begini cara anda boleh menstrukturkan pilihan sifat CSS anda dengan cekap, menggunakan pendekatan progresif untuk mengekalkan kesederhanaan sambil mengendalikan keperluan reka letak yang kompleks:

Utamakan Aliran Biasa

aliran biasa ialah cara semula jadi elemen HTML disusun pada halaman tanpa sebarang campur tangan khusus. Ia adalah asas yang paling mudah dan harus menjadi titik permulaan anda untuk membina reka letak.

• Blok: Elemen peringkat blok (seperti ,

  ,

  , dsb.) disusun secara menegak, mengambil lebar penuh yang tersedia.

• Sebaris: Elemen sebaris (seperti , ) berbaris di sebelah satu sama lain, mengikut aliran teks mendatar.

Sentiasa mulakan dengan melihat sama ada reka letak asas boleh dicapai hanya dengan bekerja dengan tingkah laku semula jadi ini. Contohnya:

• Laraskan dimensi menggunakan lebar maksimum atau ketinggian maksimum untuk bekas atau imej hanya selepas kandungan diletakkan.
• Gunakan sifat tipografi (saiz fon, ketinggian garis, dll.) untuk menyusun kandungan.

Tukar kepada Flexbox atau Grid Apabila Perlu

Apabila aliran biasa tidak mencukupi, Flexbox dan Grid CSS ialah alat yang berkuasa untuk mengendalikan reka letak yang lebih kompleks. Gunakannya dengan teliti, mengelakkan kerumitan yang tidak perlu dalam struktur:

• Flexbox sesuai untuk reka letak satu dimensi (sama ada baris atau lajur):

  • Sebagai contoh, untuk memusatkan elemen secara mendatar dan menegak dalam bekas, paparkan: flex dan justify-content: center; align-item: tengah; sudah memadai.
  • Flexbox cemerlang dalam reka letak ringkas yang perhubungan antara elemen adalah linear (cth., bar navigasi, kad sejajar, dll.).

• Grid CSS lebih sesuai untuk reka letak dua dimensi (mengatur elemen dalam baris dan lajur):

  • Gunakan Grid untuk reka letak yang lebih kompleks, seperti galeri imej atau jadual data.
  • Grid lebih berkuasa daripada Flexbox untuk reka letak yang mana anda perlu mengawal kedua-dua baris dan lajur secara serentak.

Ideanya adalah untuk memperkenalkan Flexbox atau Grid hanya apabila anda mencapai had aliran biasa, mengelakkan penggunaannya di mana-mana tanpa keperluan sebenar.

Untuk butiran lanjut, lihat panduan hebat ini oleh Josh Comeau:

• Panduan Interaktif untuk Flexbox.
• Panduan Interaktif untuk Grid CSS.

Jarak Pemegang dengan padding dan margin

Untuk mengatur ruang antara elemen, adalah penting untuk memahami perbezaan antara padding dan margin dan menggunakan sifat ini secara berkaedah:

• Padding: Menguruskan ruang di dalam elemen, antara kandungan dan sempadannya. Gunakan pelapik untuk menambah ruang antara kandungan dalaman dan tepi bekas, seperti dalam butang atau kad.

• Margin: Menguruskan ruang di luar elemen, antara sempadan elemen dan elemen sekeliling. Gunakan jidar untuk menjarakkan elemen antara satu sama lain dalam aliran.

Secara amnya, gunakan pelapik untuk ruang dalaman dan jidar untuk ruang luaran. Selalunya lebih jelas menggunakan jidar untuk mengawal jarak antara elemen bebas dan pelapik simpanan untuk melaraskan ruang di dalam elemen bekas.

Lihat artikel ini oleh Nathan Curtis untuk bukti visual: Ruang dalam Sistem Reka Bentuk.

Gunakan Nilai kedudukan untuk Lapisan

Penempatan dalam CSS membolehkan reka letak yang lebih dinamik, tetapi penting untuk mengelakkan penggunaannya secara berlebihan. Begini cara untuk memilih antara nilai kedudukan yang berbeza:

• kedudukan: statik (lalai): Elemen diletakkan berdasarkan aliran biasa.

• kedudukan: relatif: Unsur kekal dalam aliran biasa tetapi boleh diimbangi daripada kedudukan asalnya. Gunakannya apabila anda ingin mengalihkan sedikit elemen tanpa menjejaskan aliran elemen lain.

• kedudukan: mutlak: Unsur dialih keluar daripada aliran biasa dan diposisikan secara relatif kepada nenek moyang kedudukan pertamanya (satu dengan kedudukan: relatif, mutlak atau tetap). Ia berguna untuk melapis elemen atau meletakkan sesuatu dengan tepat dalam bekas tanpa mempengaruhi orang lain.

• kedudukan: tetap: Serupa dengan mutlak, tetapi elemen diletakkan relatif kepada tetingkap penyemak imbas dan kekal tetap semasa menatal (cth., bar navigasi melekit, pop timbul).

• kedudukan: melekit: Campuran antara relatif dan tetap, ia membenarkan elemen kekal dalam aliran sehingga syarat tertentu dipenuhi (cth., apabila ia mencapai titik tatal tertentu, ia menjadi tetap). Ia berguna untuk perkara seperti bar navigasi yang perlu kekal kelihatan selepas beberapa kali menatal.

Gunakan kedudukan dengan bijak untuk kes tertentu di mana aliran biasa dan Flexbox/Grid tidak dapat memenuhi keperluan.

Contoh konkrit: pengaki melekit diselesaikan oleh Flexbox.

Pilih Saiz yang Sesuai untuk Reka Letak Cecair dan Responsif

Untuk memastikan reka letak kekal lancar dan responsif, gunakan unit fleksibel seperti:

• %: Peratusan adalah relatif kepada saiz bekas induk, membenarkan elemen menyesuaikan diri dengan saiz skrin yang berbeza.
• em dan rem: Unit ini adalah relatif kepada saiz fon elemen induk (atau saiz elemen akar untuk rem). Ia sesuai untuk mencipta saiz penyesuaian, terutamanya untuk jarak (margin, padding) dan dimensi selain daripada 100% (lebar, tinggi).
• vw dan vh: Unit ini adalah relatif kepada saiz tetingkap penyemak imbas (1 vw = 1% daripada lebar tetingkap, 1 vh = 1% daripada ketinggian). Gunakannya untuk reka letak yang menyesuaikan dengan keseluruhan saiz skrin.

Elakkan unit tetap seperti px melainkan benar-benar perlu, untuk memastikan reka bentuk kekal lancar merentas peranti.

Kes penggunaan yang hebat: tipografi cecair.

Pendek kata CSS Razor saya

1. Mulakan dengan aliran biasa: Bina asas reka letak menggunakan elemen blok dan sebaris, hanya melaraskan paparan, lebar, tinggi.
2. Gunakan Flexbox atau Grid dengan berhati-hati: Tukar kepada Flexbox untuk susun atur satu dimensi atau Grid untuk susun atur dua dimensi yang lebih kompleks apabila aliran biasa tidak mencukupi.
3. Kendalikan jarak dengan bijak: Gunakan jidar untuk menjarakkan elemen dan pelapik untuk mengurus ruang di dalam bekas.
4. Letakkan elemen mengikut keperluan: Gunakan relatif untuk pelarasan kecil, mutlak atau tetap untuk elemen di luar aliran biasa dan pastikan semua yang lain statik.
5. Utamakan unit bendalir: Gunakan unit relatif seperti %, em, rem, vw dan vh untuk memastikan reka letak yang lancar dan boleh disesuaikan.

Dengan mengikuti pendekatan berkaedah ini dan mempermudahkan sebanyak mungkin, anda akan dapat mereka bentuk halaman yang berkesan tanpa terjerumus ke dalam perangkap kerumitan yang berlebihan sambil memastikan kebolehselenggaraan kod.

Apakah pisau cukur CSS anda ?

Atas ialah kandungan terperinci Pencukur CSS. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!