Senibina CSS: Organisasi Fail CSS - SitePoint

dikutip dari petikan dari buku "The Master of CSS" yang ditulis oleh Tiffany Brown. Buku ini boleh didapati di kedai buku di seluruh dunia, dan anda juga boleh membeli versi e-book di sini.

organisasi fail CSS

Sebahagian daripada seni bina CSS yang baik adalah dalam organisasi fail. Bagi pemaju tunggal atau projek yang sangat kecil, fail tunggal mencukupi. Untuk projek besar - laman web dengan pelbagai susun atur dan jenis kandungan, atau pelbagai jenama berkongsi rangka kerja reka bentuk yang sama - lebih bijak menggunakan pendekatan modular dan memecah CSS ke dalam pelbagai fail.

Memisahkan CSS ke dalam pelbagai fail menjadikannya lebih mudah untuk memberikan tugas kepada pasukan. Satu pemaju boleh bertanggungjawab untuk gaya yang berkaitan dengan tipografi, sementara pemaju lain boleh memberi tumpuan kepada membangunkan komponen mesh. Pasukan ini boleh memperuntukkan kerja dengan munasabah dan meningkatkan produktiviti keseluruhan.

Jadi, apakah struktur fail yang baik untuk memisahkan CSS ke dalam pelbagai fail? Berikut adalah struktur yang serupa dengan apa yang saya gunakan dalam projek baru -baru ini:

• : menetapkan semula dan menormalkan gaya minimum yang berkaitan dengan warna, sempadan atau fon reset.css
• : font, font berat, ketinggian garis, saiz, dan gaya tajuk dan teks typography.css
• : Mengurus susun atur halaman dan gaya perenggan, termasuk grid layouts.css
• : Gaya kawalan bentuk dan label forms.css
• : Senaraikan gaya spesifik lists.css
• : gaya khusus meja tables.css
• : Gaya yang diperlukan untuk komponen karusel carousel.css
• : Gaya komponen akordion accordion.css

Jika anda menggunakan preprocessor, seperti sass atau kurang, anda juga mungkin perlu memasukkan fail

atau _config.scss dengan pembolehubah warna, dll. _config.less

Dalam struktur ini, setiap fail CSS mempunyai skop khusus dan sempit. Bilangan fail yang akan digunakan bergantung kepada berapa banyak corak visual atau komponen keperluan reka bentuk laman web.

rangka kerja CSS seperti asas dan bootstrap menggunakan pendekatan ini. Kedua -duanya sangat teliti, menggunakan fail berasingan untuk bar kemajuan, input pelbagai, butang tutup, dan petua. Ini membolehkan pemaju hanya memasukkan komponen yang diperlukan oleh projek.

nota: Perpustakaan mod

Konsep yang berkait rapat dengan pemisahan CSS ke dalam pelbagai fail dengan cara ini adalah perpustakaan skema. Anna Debenham's "Pemula Perpustakaan Corak" adalah pengenalan hebat kepada topik ini.

Bilangan fail

Walaupun kami menggunakan pelbagai fail CSS dalam pembangunan, kami tidak akan menyediakan semua fail kepada penyemak imbas dalam bentuk ini. Bilangan permintaan HTTP yang diperlukan akan melambatkan pemuatan laman web kami. Sebaliknya, kami akan menyambungkan fail CSS yang lebih kecil

ke beberapa fail yang lebih besar untuk digunakan dalam persekitaran pengeluaran.

Dalam konteks ini, sambungan bermaksud menggabungkan pelbagai fail ke dalam beban CSS tunggal. Ia menghapuskan keperluan untuk pernyataan @import atau pelbagai link elemen. Penyemak imbas semasa mempunyai had pada bilangan fail yang boleh dimuat turun pada satu masa. Kami boleh menggunakan sambungan untuk mengurangkan bilangan permintaan rangkaian, dengan itu memberikan kandungan kepada pengguna lebih cepat.

Biasanya, rangka kerja pembangunan web anda mengendalikan sambungan sebagai sebahagian daripada keupayaan pengurusan asetnya, seperti Ruby on Rails. Sesetengah sistem pengurusan kandungan melakukan perkara yang sama, sama ada sebagai fungsi teras atau tambahan. Preprocessor yang diterangkan dalam Bab 9 juga menjadikan sambungan mudah. Jika tidak preprocessor mahupun rangka kerja pembangunan adalah sebahagian daripada aliran kerja anda, maka sistem operasi anda kemungkinan besar akan mempunyai utiliti sambungan yang boleh anda gunakan.

Untuk Mac OS X atau Linux, gunakan utiliti cat untuk menyambung ke fail:

cat file1.css file2.css > combined-output-file.css

menggunakan Windows? Cuba gunakan utiliti type:

type file1.css file2.css > combined-output-file.css

Anda juga boleh menulis skrip sambungan anda sendiri di Bash, PHP, Python, atau bahasa skrip lain pilihan anda.

Nota: Pengoptimuman CSS

Sambungan adalah aspek pengoptimuman CSS. Ia juga penting untuk meminimumkan fail anda untuk menghapuskan aksara dan ruang yang tidak perlu. Bab 3 memperkenalkan alat pengurangan.

Jadi berapa banyak fail yang harus anda gunakan? Ini adalah tempat yang rumit. Amalan terbaik sekarang adalah untuk mengenal pasti CSS laluan kritikal anda - jumlah minimum CSS yang diperlukan untuk rendering halaman - dan membenamkannya ke halaman anda menggunakan elemen style. Fail CSS lain harus dimuatkan menggunakan JavaScript. Penyampaian "Alat Prestasi CSS" Addy Osmani memberikan gambaran yang sangat baik tentang teknologi ini dan beberapa alat yang boleh anda gunakan untuk melaksanakannya. Lihat juga Loadcss untuk kumpulan filamen.

Jika kandungan anda akan disampaikan menggunakan protokol SPDY atau HTTP/2, sambungan mungkin tidak perlu. Menggunakan HTTP/1.1, penyemak imbas muat turun aset dalam urutan; Dalam model ini, mengurangkan bilangan permintaan rangkaian boleh meningkatkan prestasi laman web; Oleh itu, mengurangkan bilangan permintaan tidak mempunyai manfaat praktikal. Walau bagaimanapun, terdapat kos untuk menghantar lebih banyak bait daripada yang diperlukan untuk membuat halaman. William Chan "HTTP/2 Nota dan Tradeoffs" menerangkan ini dengan lebih terperinci. Cara terbaik adalah untuk menentukan sama ada pelayan anda menyediakan perkhidmatan HTTP/2, dan jika ya, periksa sama ada lebih banyak pengguna akan mendapat manfaat daripada memisahkan aset anda dan hanya memuatkan aset yang diperlukan untuk halaman tersebut, atau terus menggunakan kaedah lama. Jika anda berminat untuk mempelajari lebih lanjut mengenai kaedah pengoptimuman prestasi, tapak Lean Book Lean SitePoint adalah sumber yang berguna.

soalan yang sering ditanya mengenai organisasi fail CSS

Bagaimana cara menyusun fail CSS saya?

Cara terbaik untuk mengatur fail CSS sangat bergantung pada saiz dan kerumitan projek. Untuk projek yang lebih kecil, satu fail CSS mungkin mencukupi. Walau bagaimanapun, untuk projek yang lebih besar, adalah disyorkan untuk memecah CSS ke dalam pelbagai fail. Ini boleh dilakukan berdasarkan komponen atau halaman yang gaya mereka. Sebagai contoh, anda boleh membuat fail CSS untuk header, footer, dan kandungan utama secara berasingan. Ini menjadikan kod anda lebih mudah untuk mengekalkan dan debug.

Bagaimana untuk menyimpan kod CSS saya dengan mudah dan teratur?

Memelihara kod CSS mudah dan teratur adalah penting untuk mengekalkan. Anda boleh melakukan ini dengan mengikuti beberapa amalan terbaik. Pertama, gunakan komen untuk menggambarkan peranan setiap bahagian CSS. Kedua, menggabungkan gaya yang berkaitan bersama -sama. Ketiga, gunakan konvensyen penamaan yang konsisten untuk kelas dan ID anda. Akhirnya, pertimbangkan untuk menggunakan preprocessor CSS seperti SASS atau kurang untuk membantu menguruskan stylesheet anda.

Apakah preprocessors CSS dan bagaimana mereka membantu mengatur fail CSS?

preprocessors CSS seperti SASS dan kurang adalah bahasa skrip yang memanjangkan fungsi CSS. Mereka membolehkan anda menggunakan pembolehubah, peraturan bersarang, campuran, dan fungsi, yang dapat memudahkan CSS anda dan memudahkannya. Preprocessor menyusun kod anda ke dalam CSS standard yang dapat difahami oleh penyemak imbas.

Bagaimana menggunakan modul CSS untuk mengatur CSS saya?

Modul CSS adalah cara untuk menjadikan CSS anda lebih modular dan boleh diguna semula. Dengan modul CSS, setiap komponen dalam aplikasi anda mempunyai fail CSS sendiri. Ini menjadikan pengurusan gaya anda lebih mudah, kerana mengubah CSS satu komponen tidak menjejaskan orang lain. Untuk menggunakan modul CSS, anda memerlukan alat binaan seperti webpack atau bungkusan.

Apakah peranan komen dalam organisasi fail CSS?

Anotasi memainkan peranan penting dalam organisasi fail CSS. Mereka boleh membantu anda dan pemaju lain memahami peranan setiap bahagian CSS. Ini amat penting dalam projek besar, kerana anda mungkin mempunyai banyak fail CSS. Komen juga boleh digunakan untuk mematikan sementara bahagian CSS semasa debugging.

Bagaimana menggunakan rangka kerja CSS untuk mengatur CSS saya?

rangka kerja CSS seperti Bootstrap dan Yayasan Menyediakan Write-PRE-CSS yang boleh anda gunakan untuk gaya laman web anda. Mereka juga menyediakan struktur bersatu untuk CSS anda untuk memudahkannya. Walau bagaimanapun, ingat bahawa menggunakan kerangka CSS boleh menambah kembung yang tidak perlu ke laman web jika anda tidak menggunakan kebanyakan ciri.

Apakah kepentingan konvensyen penamaan yang konsisten dalam CSS?

Konvensyen penamaan yang konsisten dalam CSS menjadikan kod anda lebih mudah dibaca dan difahami. Mereka juga memudahkan untuk mencari gaya tertentu apabila anda perlu mengemas kini atau debug kod anda. Anda boleh mengikuti beberapa konvensyen penamaan seperti BEM (blok, elemen, pengubahsuaian), OOCSS (CSS berorientasikan objek), dan SMACSS (berskala dan modular CSS arsitektur).

Bagaimana menggunakan pembolehubah CSS untuk mengatur CSS saya?

pembolehubah CSS (juga dikenali sebagai sifat tersuai) membolehkan anda menyimpan nilai tertentu untuk digunakan semula di seluruh CSS. Ini dapat memudahkan CSS anda dan menjadikannya lebih mudah untuk dikekalkan. Sebagai contoh, anda boleh menyimpan warna utama laman web anda sebagai pembolehubah dan menggunakannya apabila anda memerlukan warna itu.

Apakah peranan CSS Reset dalam organisasi fail CSS?

CSS Reset adalah satu set gaya yang digunakan pada permulaan CSS dan digunakan untuk menetapkan semula gaya lalai aplikasi penyemak imbas. Ini memastikan laman web anda kelihatan konsisten merentasi pelayar yang berbeza. Reset CSS juga menjadikan CSS anda lebih mudah untuk diurus kerana anda tidak perlu menulis semula gaya penyemak imbas untuk setiap elemen.

Bagaimana menggunakan alat CSS LINT untuk memastikan CSS dianjurkan?

Alat CSS LINT seperti Stylelint dan CSSLint dapat membantu anda menyimpan CSS yang dianjurkan dengan menangkap kesilapan dan menguatkuasakan gaya pengekodan yang konsisten. Mereka boleh diintegrasikan ke dalam aliran kerja pembangunan anda untuk memeriksa CSS anda secara automatik semasa anda menulisnya. Ini dapat membantu anda menulis lebih bersih, lebih mudah untuk mengekalkan CSS.

Atas ialah kandungan terperinci Senibina CSS: Organisasi Fail CSS - SitePoint. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!