Konvensi penamaan untuk aset (gambar, css, js)?

Saya masih berjuang untuk menemukan konvensi penamaan yang baik untuk aset seperti gambar, file js dan css yang digunakan dalam proyek web saya.

Jadi, arus saya adalah:

CSS: style-{name}.css
Contoh: style-main.css, style-no_flash.css, style-print.cssdll

JS: script-{name}.js
contoh: script-main.js, script-nav.jsdll

Gambar: {imageType}-{name}.{imageExtension}
{imageType} adalah salah satunya

• ikon (mis. ikon tanda tanya untuk konten bantuan)
• img (mis. gambar header yang disisipkan melalui <img />elemen)
• tombol (misalnya tombol kirim grafis)
• bg (gambar digunakan sebagai gambar latar di css)
• sprite (gambar digunakan sebagai gambar latar di css dan berisi beberapa "versi")

Contoh-nama akan menjadi: icon-help.gif, img-logo.gif, sprite-main_headlines.jpg, bg-gradient.gifdll

Jadi, bagaimana menurut Anda dan apa konvensi penamaan Anda ?

Saya menempatkan file CSS di folder css, Javascript di js, gambar di images, ... Tambahkan subfolder sesuai keinginan Anda. Tidak perlu konvensi penamaan apa pun pada level file individual.

Saya sudah melihat banyak pengembang frontend yang bergerak menjauh dari cssdan jsmendukung stylesdan scriptskarena umumnya ada hal-hal lain di sana, seperti .less, .styl, dan .sassserta, untuk beberapa, .coffee. Faktanya, menggunakan pilihan teknologi tertentu dalam pilihan organisasi folder Anda adalah ide yang buruk bahkan jika semua orang melakukannya. Saya akan terus menggunakan standar yang saya lihat dari pengembang yang sangat dihormati ini:

• src/html
• src/images
• src/styles
• src/styles/fonts
• src/scripts

Dan bangunan tujuan mereka setara, yang terkadang diawali dengan desttergantung pada apa yang mereka bangun:

• ./
• images
• styles
• styles/fonts
• scripts

Hal ini memungkinkan mereka yang ingin menyatukan semua file (daripada memecah srcdirektori) untuk menyimpannya dan menjaga hal-hal yang terkait dengan jelas bagi mereka yang keluar.

Saya sebenarnya melangkah lebih jauh dan menambahkan

• scripts/before
• scripts/after

Yang dibagi menjadi dua main-before.min.jsdan main-after.min.jsskrip, satu untuk tajuk (dengan elemen penting normalizedan modernizryang harus dijalankan lebih awal, misalnya) dan afteruntuk hal terakhir di badan sejak javascript bisa menunggu. Ini tidak dimaksudkan untuk membaca, seperti halaman utama Google.

Jika ada skrip dan lembar gaya yang masuk akal untuk diminimalkan dan dibiarkan tertaut sendiri karena pendekatan manajemen cache tertentu yang ditangani dalam aturan build.

Saat ini, jika Anda tidak menggunakan semacam proses pembuatan, seperti gulp atau grunt , Anda mungkin tidak mencapai sebagian besar sasaran performa yang berfokus pada seluler yang mungkin harus Anda pertimbangkan.

/Aktiva/
  / Css
  /Gambar-gambar
  / Javascript (atau Script)
    / Diperkecil
    /Sumber

Apakah struktur terbaik yang pernah saya lihat dan yang saya sukai. Dengan folder Anda tidak benar-benar perlu untuk mengawali CSS Anda dll. Dengan nama deskriptif.

Untuk situs besar di mana css dapat menentukan banyak gambar latar belakang, konvensi penamaan file untuk aset tersebut sangat berguna untuk membuat perubahan di kemudian hari.

Sebagai contoh:

[component].[function-description].[filetype]

footer.bkg-image.png
footer.copyright-gradient.png

Kami juga telah membahas penambahan tipe elemen, tetapi saya tidak yakin seberapa bermanfaatnya hal itu dan mungkin menyesatkan untuk perubahan yang diperlukan di masa mendatang:

[component].[element]-[function-description].[filetype]
footer.div-bkg-image.png
footer.p-copyright-gradient.png

Anda bisa menamainya seperti ini:

/ assets / css / - Untuk file CSS

/ assets / font / - Untuk file Font. (Kebanyakan Anda bisa pergi ke google font untuk mencari font yang dapat digunakan.)

/ assets / images / - Untuk file Gambar.

/ assets / scripts / atau / assets / js / - Untuk file JavaScript.

/ assets / media / - Untuk video dan lainnya. file.

Anda juga dapat mengganti "aset" dengan nama folder "sumber daya" atau "file" dan tetap menggunakan nama subfoldernya. Memiliki struktur folder urutan seperti ini tidak terlalu penting, satu-satunya yang penting adalah Anda hanya perlu mengatur file Anda dengan formatnya. seperti membuat folder "/ css /" untuk file CSS atau "/ gambar /" untuk file Gambar.

Pertama, saya membagi ke dalam folder: css, js,img .

Dalam css dan js, saya memberi awalan file dengan nama proyek karena situs Anda mungkin menyertakan file js dan css yang merupakan komponen, ini memperjelas di mana file khusus untuk situs Anda, atau yang berkaitan dengan plugin.

css/mysite.main.css css/mysite.main.js

File lain mungkin seperti itu

js/jquery-1.6.1.js js/jquery.validate.js

Akhirnya gambar dibagi berdasarkan penggunaannya.

• img/btn/submit.png sebuah tombol
• img/lgo/mysite-logo.png sebuah logo
• img/bkg/header.gif sebuah latar belakang
• img/dcl/top-left-widget.jpg elemen stiker
• img/con/portait-of-something.jpg gambar konten

Sangat penting untuk menjaga gambar tetap teratur karena bisa ada lebih dari 100 dan dapat dengan mudah dicampur bersama dan diberi nama yang membingungkan.

Saya cenderung menghindari sesuatu yang umum, seperti yang disarankan oleh smdrager. "mysite.main.css" tidak berarti apa-apa.

Apa itu "mysite" ?? Yang ini sedang saya kerjakan? Jika demikian maka jelaslah benar-benar, tetapi itu sudah membuat saya berpikir apa itu mungkin dan jika ini jelas!

Apa itu "Utama"? Kata "Utama" tidak memiliki definisi di luar pengetahuan pembuat kode tentang apa yang ada di dalam file css itu.

Meskipun oke dalam skenario tertentu, hindari juga nama seperti "atas" atau "kiri": "top-nav.css" atau "top-main-logo.png".
Anda mungkin akhirnya ingin menggunakan hal yang sama di tempat lain, dan meletakkan gambar di footer atau di dalam konten halaman utama yang disebut "top-banner.png" sangat membingungkan!

Saya tidak melihat masalah apa pun dengan memiliki jumlah stylesheet yang bagus untuk memungkinkan konvensi penamaan yang layak untuk menggambarkan apa yang ada dalam css dalam file yang diberikan.
Berapa banyak tergantung sepenuhnya pada ukuran situs dan apa fungsinya, dan berapa banyak blok yang berbeda di situs.

Saya rasa Anda tidak perlu menyatakan "CSS" atau "STYLE" di nama file css sama sekali, karena sebenarnya ada di folder "css" atau "gaya" dan memiliki ekstensi .cssdan terutama karena file-file ini hanya pernah dipanggil dalam<head> daerah itu, saya tahu dengan jelas apa itu.

Karena itu, saya melakukan ini dengan file library, JS, dan config (dll). misalnya libSomeLibrary.php, atau JSSomeScript.php. Karena file PHP dan JS disertakan atau digunakan di berbagai area dalam file lain, dan memiliki info tentang tujuan utama file di dalam nama itu berguna.

misal: Melihat nama file require('libContactFormValidation.php');itu berguna. Saya tahu itu adalah file perpustakaan (lib) dan dari namanya apa fungsinya.

Untuk folder gambar, saya biasanya memiliki images/content-images/dan images/style-images/. Saya rasa tidak perlu ada pemisahan lebih lanjut, tapi sekali lagi tergantung proyeknya.

Kemudian setiap gambar akan diberi nama sesuai dengan apa itu, dan sekali lagi saya rasa tidak ada kebutuhan untuk mendefinisikan file sebagai gambar di dalam nama file. Ukuran bisa berguna, terutama saat gambar memiliki ukuran berbeda.

site-logo-150x150.png
site-logo-35x35.png
shop-checkout-button-40x40.png
shop-remove-item-20x20.png
dll

Aturan yang baik untuk diikuti adalah: jika pengembang baru datang ke file, akankah mereka duduk menggaruk-garuk kepala selama berjam-jam, atau apakah mereka akan memahami apa yang dilakukan dan hanya perlu sedikit waktu untuk meneliti (yang tidak dapat dihindari)?

Akan tetapi, karena hal seperti ini, salah satu aturan terpenting yang harus diikuti adalah keteguhan !
Pastikan Anda mengikuti logika dan pola yang sama di semua konvensi penamaan Anda!
Dari nama file css sederhana, file library PHP hingga nama tabel database dan kolom.

Ini pertanyaan lama, tapi masih valid.

Rekomendasi saya saat ini adalah menggunakan sesuatu di baris ini:

• aset (atau aset-web atau aset-www); yang satu ini ditujukan untuk konten statis yang digunakan oleh klien (browser)
  • data; beberapa file xml dan hal lainnya
  • font
  • gambar-gambar
  • media
  • gaya
  • skrip
  • lib (atau pihak ketiga); yang satu ini ditujukan untuk kode yang tidak Anda buat atau modifikasi, pustaka saat Anda mendapatkannya
  • lib-modded (atau pihak ketiga-dimodifikasi); yang satu ini ditujukan untuk kode yang tidak diharapkan untuk diubah, tetapi harus, seperti menerapkan solusi / perbaikan sementara itu penyedia perpustakaan merilisnya
• inc (atau aset-server atau aset-lokal); yang satu ini ditujukan untuk konten yang digunakan di sisi server, bukan untuk digunakan oleh klien, seperti pustaka dalam bahasa seperti PHP atau skrip server, seperti file bash
  • font
  • lib
  • lib-modded

Saya tandai dengan huruf tebal yang biasa, yang lainnya bukan konten biasa.

Alasan pembagian utama, adalah di masa depan Anda dapat memutuskan untuk server aset web dari CDN atau membatasi akses klien ke aset server, untuk alasan keamanan.

Di dalam direktori lib yang saya gunakan untuk menjadi deskriptif tentang perpustakaan, misalnya

• lib
  • jquery.com
    • jQuery
      • vX.YZ
  • github
    • [jalur]
      • [perpustakaan / nama proyek]
        • vX.YZ (versi)

sehingga Anda bisa mengganti pustaka dengan yang baru, tanpa merusak kode, juga mengizinkan pengelola kode di masa mendatang, termasuk Anda sendiri, untuk menemukan pustaka dan memperbaruinya atau mendapatkan dukungan.

Selain itu, jangan ragu untuk mengatur konten di dalamnya sesuai dengan penggunaannya, jadi gambar / logo dan gambar / ikon adalah direktori yang diharapkan dalam beberapa proyek.

Sebagai catatan tambahan, nama aset memiliki arti, bukan hanya berarti kita memiliki sumber daya di sana, tetapi berarti sumber daya di sana harus memiliki nilai untuk proyek dan bukan bobot mati.

BBC memiliki banyak standar yang berkaitan dengan pengembangan web.

Standar mereka cukup sederhana untuk file CSS:

http://www.bbc.co.uk/guidelines/futuremedia/technical/css.shtml

Anda mungkin dapat menemukan sesuatu yang berguna di situs utama mereka:

http://www.bbc.co.uk/guidelines/futuremedia/