Nota mengenai Reset CSS Custom Josh Comeau '

Baru -baru ini, kami membincangkan reset CSS baru Elad Shechter, diikuti dengan catatan blog Josh Comeau mengenai perkara ini. Ini menandakan peralihan dalam landskap reset CSS. Perbezaan gaya penyemak imbas yang signifikan pada masa lalu kurang lazim, dan selalunya, pada masa gaya projek sedang dijalankan, banyak gaya lalai ditindih pula. Oleh itu, semula CSS "moden" yang berkembang menjadi koleksi gaya lalai yang menawarkan manfaat praktikal untuk projek -projek baru.

Memeriksa pendekatan Josh, nampaknya tepat bahawa: penyusunan gaya yang tidak didorong oleh reka bentuk, tetapi sebaliknya reka bentuk sokongan dengan menyediakan ciri-ciri projek yang dikehendaki. Mari kita menganalisis pilihannya dengan beberapa ulasan.

 *, *:: sebelum, *:: selepas {
  saiz kotak: kotak sempadan;
}

Amalan yang diterima secara meluas. Walaupun utilitinya mungkin sedikit berkurang dengan peningkatan penggunaan susun atur grid dan flexbox, ia tetap menjadi pendekatan pilihan untuk ukuran yang konsisten. Sebaik -baiknya, reset CSS harus memanfaatkan warisan untuk mengatasi lebih mudah di peringkat komponen.

 * {
  Margin: 0;
}

Cara ringkas untuk menghapuskan margin lalai. Walaupun berpotensi berat dalam beberapa situasi, ia menguatkuasakan pengisytiharan margin yang jelas, meningkatkan kejelasan. Memasang ini dengan padding: 0; akan menangani padding item senarai lalai.

 html, badan {
  Ketinggian: 100%;
}

Strategi yang berguna untuk memastikan ketinggian berasaskan peratusan berfungsi dengan betul, mencegah tingkah laku latar belakang yang tidak dijangka. Manakala body { height: 100vh; } mungkin kelihatan mencukupi, ia tidak mempunyai kebolehpercayaan yang sama, mungkin disebabkan oleh kebiasaan safari iOS.

 badan {
  Talian ketinggian: 1.5;
  -WebKit-Font-Smoothing: Antialiased;
}

Hartanah -webkit-font-smoothing boleh membawa kepada tipografi yang terlalu tipis. Walaupun alat yang berharga, aplikasi global tidak selalu sesuai. Menguruskan saiz tipografi global melalui pemilih html , menyesuaikan saiz fon akar dengan pertanyaan media, memberikan lebih banyak kawalan. Ketinggian garis 1.5 adalah lalai yang munasabah, walaupun nilai lebih dekat kepada 1.4 mungkin lebih disukai oleh beberapa. Walau bagaimanapun, penyesuaian tajuk sering diperlukan. Alternatif pintar Josh:

 * {
  ketinggian garis: calc (1em 0.5rem);
}

Ini secara dinamik menyesuaikan ketinggian garis berdasarkan saiz fon, yang menawarkan penyelesaian berskala. Teknik ini, yang diilhamkan oleh karya Jesús Ricarte mengenai pengiraan ketinggian garis yang optimum, patut diterokai.

 IMG, gambar, video, kanvas, svg {
  paparan: blok;
  Max-Width: 100%;
}

Kemasukan pepejal. display: block; menghapuskan isu ketinggian garis, dan max-width: 100%; menghalang unsur -unsur media daripada melimpah bekas mereka. Semasa kemasukan<picture></picture> boleh dibahaskan, tambah<iframe></iframe> dan<object></object> akan meningkatkan kesempurnaan.

 P, H1, H2, H3, H4, H5, H6 {
  limpahan-wrap: break-word;
}

Penting untuk mencegah kata -kata panjang (seperti URL) daripada mengganggu susun atur. Memohon ini kepada pemilih yang lebih luas seperti .text-content membolehkan cascading, tetapi mensasarkan unsur-unsur tertentu boleh diterima. Pertimbangkan untuk menambah<li> ,<dl></dl> ,<dt></dt> , dan<blockquote></blockquote> Untuk pembungkus garis komprehensif. Gabungan optimum sifat pembungkus garis tetap menjadi subjek perbincangan berterusan.

 #root, #__Next {
  Pengasingan: Mengasingkan;
}

Coretan spesifik ini/seterusnya.js mencipta konteks penyusunan. Walaupun manfaatnya yang tepat tidak jelas, ia tidak memperkenalkan masalah yang jelas.

Secara keseluruhannya, Reset Josh adalah pendekatan yang dipertimbangkan dengan baik. Ia sentiasa bermanfaat untuk memeriksa dan membandingkan strategi penetapan semula CSS yang berbeza.

Atas ialah kandungan terperinci Nota mengenai Reset CSS Custom Josh Comeau '. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!