Penggunaan Lata peraturan CSS Beberapa perkara yang mesti diberi perhatian dalam pertukaran CSS_Experience

Asas teori adalah perlu, dan amalan adalah cara untuk menambah baik dan memahami teori, kedua-duanya adalah sama pentingnya . Tetapi apakah kegunaan praktikal kaedah yang saya katakan ini. Jelas sekali, ia tidak boleh mencipta segi empat tepat bulat untuk kita, ia juga tidak boleh mencipta susun atur lajur untuk kita, ia juga tidak boleh memberikan kita bar navigasi yang ditetapkan di kepala dokumen. Aplikasi praktikal algoritma ini terletak pada: Amalan pengaturcaraan CSS yang baik. Ini adalah amalan makro yang sama pentingnya dengan amalan mikro yang baru saya nyatakan, tetapi jauh lebih sukar untuk dikuasai.

Artikel ini tidak berhasrat untuk menyertakan semua spesifikasi pengaturcaraan CSS yang baik, dan saya juga tidak mungkin menyediakan ringkasan spesifikasi peribadi saya untuk menulis CSS intipati operasi CSS.

Jangan gunakan CSS sebaris
Gaya pengguna bukan di bawah kawalan anda
Jangan gunakan peraturan penting
Tulis CSS dari rendah ke tinggi mengikut kekhususan
Tiga item pertama bukan fokus apa yang saya bincangkan, saya akan luluskannya.

Kekhususan CSS sebaris adalah yang tertinggi Jika atribut dalam fail CSS anda bercanggah dengan CSS sebaris, maka atribut dalam fail CSS anda akan menjadi tidak sah daripada kebiasaan kami dalam menyahpepijat gaya sahaja fail tidak sepadan. CSS sebaris juga hodoh, ia memasukkan gaya ke dalam dokumen HTML, jadi ia harus ditinggalkan.

Jika pengguna menetapkan gaya pengguna kepada penting, maka tidak kira bagaimana anda menulis peraturan CSS, anda tidak boleh sekali-kali mengatasi kenyataan penting pengguna, jadi cuba menutup semua gaya pengguna adalah sia-sia. Senangnya kita tidak perlu memikirkan perkara ini lagi.

Peraturan penting adalah outlier Ia tidak menepati cara pemikiran biasa kita Tidak kira bagaimana kita meningkatkan kekhususan dan susunan peraturan CSS, peraturan penting akan menimpa peraturan yang bersaing dengannya. juga akan mengganggu Peraturan biasa peraturan CSS membawa masalah untuk penyahpepijatan. Jika anda ingin menggunakan peraturan penting untuk menggodam penyemak imbas, maka anda harus menggunakan peraturan dalam pemilih yang menunjuk kepada elemen unik. (PS. Hack harus menjadi perkara terakhir yang dipertimbangkan dalam penyelesaian, kerana ia terlalu hodoh.)

Perkara terakhir, bagaimana untuk menulis CSS dari rendah ke tinggi mengikut kekhususan?

Kuncinya ialah CSS modular.

Tambah CSS global
Tambahkan CSS bersatu untuk halaman semasa
Bahagikan halaman kepada beberapa modul
Gunakan cangkuk id pada setiap modul yang berbeza dan cangkuk kelas pada modul yang sama
Tambah setiap modul Unified CSS untuk setiap modul
Bahagikan setiap modul kepada beberapa sub-modul, dan kembali ke langkah 4 untuk mula menggelung sehingga penambahan gaya selesai.
Menulis CSS yang baik ialah masalah reka bentuk, bukan masalah pelaksanaan. Mula-mula kita harus menulis kandungan CSS global dengan kekhususan yang sangat rendah, iaitu reset.css yang biasa kita gunakan. Ia adalah gaya lalai untuk semua halaman di seluruh tapak web kami.

Jika mana-mana halaman mempunyai gaya bersatu yang unik, seperti halaman dengan latar belakang yang berbeza daripada halaman lain, maka kami boleh menambah ID pada halaman dan kemudian menulis CSS bersatu halaman semasa di bawah ID.

body#special{ 
    background-color:black; 
}

Selepas gaya bersatu ditulis, kami membahagikan halaman kepada beberapa modul Jika modul ini pada dasarnya mempunyai gaya yang sama, maka gunakan cangkuk kelas sama, kemudian gunakan id hook, prinsip ini harus diikuti setiap kali pada masa akan datang apabila membahagikan kepada modul, kerana kekhususan kelas tidak tinggi, jadi jika ia bukan modul yang kelihatan jelas serupa, kelas tidak boleh digunakan. Nama id biasanya boleh digunakan sebagai nama modul. Seperti kepala, bawah, dll. Pemilih id memainkan peranan penting dalam melata, kerana id adalah eksklusif dan mempunyai kekhususan yang tinggi, yang boleh menghalang peraturan CSS daripada ditindih secara tidak sengaja.

Dalam modul tertentu kita mungkin mempunyai beberapa CSS bersatu, maka kita perlu menggunakan pemilih id untuk menulis gaya bersatu di bawah modul semasa.

#head p{ 
    color:red; 
}

Apabila menambahkan cangkuk kelas, saya mengesyorkan menggunakan id modul induk (atau halaman itu sendiri) sebagai bahagian pertama nama kelas. Jika saya menambah halaman bebas (body#special), kemudian selepas membahagikan modul kepada modul untuk halaman, saya harus menamakan modul halaman special_head, special_bottom, dsb.

Atau apabila menggunakan cangkuk kelas dalam beberapa modul halaman, anda harus menggunakan head_col dsb. Kelebihan ini ialah kita tidak perlu menggunakan

#head .col{ 
    /* 头部中每一列的样式 */ 
}

tetapi boleh terus menggunakan

.head_col{ 
    /* 头部中每一列的样式 */ 
}

jadi kami tidak tidak perlu risau tentang menamakan konflik.

Untuk elemen dengan pemilih id ditambah terus di bawah modul, kami boleh menggunakan pemilih secara terus dan menambah id modul induk sebelum namanya.

#head_navigator{ 
    /* 头部中导航栏的样式 */ 
}

要做到模块化CSS我们应当尽量防止跨模块的CSS出现，我想一条好的原则是：如果某一样式的跨模块特性不是你一目了然的，那么就不要使用跨模块的CSS。一个例外是全局CSS或者模块内的统一CSS。而对于那些并非一目了然的，并非具有统一样式的，建议在每个子模块下分别定义。这就像是编写Java程序中的面向对象的设计一样，我们要降低模块之间的互相依赖，使得相同模块的CSS规则在一起，略有不同的就完全分开，这样不但易于维护，还能够保证特殊性从低到高地编写CSS，从而防止CSS规则被意外的覆盖

以上就是CSS规则层叠的应用 css必须要注意的几点_经验交流的内容，更多相关内容请关注PHP中文网（www.php.cn）！