Tetapkan semula dengan CSS tidak ditetapkan

Sejak beberapa tahun lalu, saya kerap menggunakan kata kunci yang tidak ditetapkan untuk menetapkan semula sifat CSS. Saya perasan saya menggunakannya secara intuitif untuk menetapkan semula harta. Tetapi apa yang intuitif untuk saya mungkin tidak intuitif untuk anda. Biar saya jelaskan.

Menyahset

Contohnya, saya telah menggunakan sempadan: tiada satu pun untuk peringkat umur untuk mengalih keluar sempadan daripada unsur. Hari ini, saya menggunakan sempadan: tidak ditetapkan, dan sempadan hilang.

Sempadan adalah mudah kerana ia adalah sifat tidak diwarisi bermakna unsur anak tidak mewarisi nilai daripada unsur induknya.

Begitu juga dengan jidar dan pelapik, yang selalu saya perlu tetapkan semula.

Tetapi bagaimana pula dengan harta pusaka? Dalam contoh di bawah, butang terakhir akan mempunyai warna biru. Ini kerana sifat yang tidak ditetapkan pada asasnya bermaksud warisan untuk warna sifat yang diwarisi, yang dilakukan butang dan menetapkan warna kepada biru.

Warisan lwn lata

Perkara ini masuk akal bagi saya, pembangun CSS berpengalaman yang mengetahui tentang warisan. Tetapi untuk pemula, konsep ini bukanlah perkara remeh. Saya berani mengatakan kebanyakan pemula tidak mendengar tentang harta warisan dan tidak diwarisi atau mungkin melupakannya. Mereka mungkin belajar tentang lata, yang tidak sama.

Penggayaan akhir adalah berdasarkan lata, kekhususan, warisan dan banyak lagi. MDN mempunyai artikel yang cukup kukuh tentang memahami lata, kekhususan dan warisan.

Turut penting di sini ialah konsep pewarisan, yang bermaksud bahawa sesetengah sifat CSS secara lalai mewarisi nilai yang ditetapkan pada elemen induk elemen semasa dan sesetengahnya tidak. Ini juga boleh menyebabkan beberapa tingkah laku yang mungkin tidak anda jangkakan.

— MDN

Ayat terakhir kelihatan menakutkan, tidak tahu apa yang diharapkan dengan warisan. Ia mungkin membantu jika anda mengingati harta yang akan mewarisi nilai daripada ibu bapanya, tetapi itu datang dengan masa. Mencari maklumat itu mungkin membosankan - pergi ke dokumen atau mencarinya dalam nota anda. Perkara penting ialah mengetahui warisan itu wujud dan ia mungkin menyebabkan masalah, terutamanya apabila menggunakan kata kunci yang tidak ditetapkan.

Nyahset sifat ini dengan selamat

Saya fikir ia mungkin berguna untuk menyenaraikan sifat yang saya sering nyahtetapkan yang tidak diwarisi dan, oleh itu, selamat untuk dinyahtetapkan:

• latar belakang (dan semua sifatnya seperti warna latar belakang, imej latar belakang, dll.)
• sempadan (dan semua sifatnya seperti lebar sempadan, gaya sempadan, dll.)
• jejari sempadan (dan semua sifatnya seperti jejari sempadan-atas-kiri, jejari-mula-sempadan-dsb.)
• margin (dan semua sifatnya seperti margin-top, margin-block-start, dll.)
• padding (dan semua sifatnya seperti padding-top, padding-block-start, dll.)
• tinggi min
• saiz blok-min
• lebar min
• saiz sebaris-min
• tinggi maks
• saiz blok maks
• lebar maksimum
• saiz sebaris maks
• kedudukan
• atas
• bawah
• kiri
• betul
• inset (dan semua sifatnya seperti inset-block, inset-inline, dll.)
• grid (dan semua sifatnya seperti grid-template-lajur, grid-lajur, jajar-item, baris-jurang, dll.)
• flex (dan semua sifatnya seperti flex-basis, flex-direction, align-item, row-gap, dsb.)

Kesimpulan

Apabila ia datang untuk menetapkan semula sifat CSS, kata kunci yang tidak ditetapkan boleh berguna. Walau bagaimanapun, adalah penting untuk mempertimbangkan warisan harta yang anda bekerjasama.

Jika anda ingin memastikan keselamatan maksimum, membatalkan tetapan hartanah yang tidak diwarisi mungkin pilihan terbaik anda. Dengan melakukan ini, anda boleh menghapuskan sebarang kemungkinan risiko dan berasa tenang kerana mengetahui bahawa helaian gaya anda selamat.

Atas ialah kandungan terperinci Tetapkan semula dengan CSS tidak ditetapkan. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!