Convenzione di denominazione per le risorse (immagini, css, js)?

Question

Sto ancora cercando di trovare una buona convenzione di denominazione per risorse come immagini, file js e css usati nei miei progetti web.

Quindi, la mia attuale sarebbe:

CSS:style-{name}.css
esempi: style-main.css, style-no_flash.css, style-print.css ecc

JS: script-{name}.js
esempi: script-main.js, script-nav.js etc.

Immagini:{imageType}-{name}.{imageExtension}
{imageType} è uno di questi

• icona (e. g. icona punto di domanda per i contenuti aiuto)
• img (ad esempio un'immagine di intestazione inserito attraverso <img /> elemento)
• tasto (ad esempio un pulsante grafico presentare)
• bg (immagine viene utilizzata come immagine di sfondo in css)
• sprite (immagine viene utilizzata come immagine di sfondo in css e contiene più "versioni")

Esempio nomi sarebbero: icon-help.gif, img-logo.gif, sprite-main_headlines.jpg, bg-gradient.gif ecc

Quindi, cosa ne pensi e qual è la tua convenzione di denominazione?

Answer 1

Inserisco file CSS in una cartella css, Javascript in js, immagini in images, ... Aggiungi sottocartelle come meglio credi. Non c'è bisogno di alcuna convenzione di denominazione a livello di singoli file.

Answer 2

La BBC ha tonnellate di standard relativi allo sviluppo web.

Il loro standard è abbastanza semplice per i file CSS:

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

Potreste essere in grado di trovare qualcosa di utile sul loro sito principale:

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

Answer 3

 
/Assets/ 
    /Css 
    /Images 
    /Javascript (or Script) 
    /Minified 
    /Source 

è la migliore struttura che ho visto e quella che preferisco. Con le cartelle non hai davvero bisogno di prefisso il tuo CSS ecc. Con nomi descrittivi.

Answer 4

Per i siti di grandi dimensioni in cui css potrebbe definire molte immagini di sfondo, una convenzione di denominazione dei file per tali risorse è davvero utile per apportare modifiche in seguito.

Ad esempio:

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

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

Abbiamo anche discusso l'aggiunta nel tipo di elemento, ma non sono sicuro di come utile che è e potrebbe essere fuorviante per i futuri necessari cambiamenti:

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

Answer 5

First , Divido in cartelle: css, js, img.

All'interno di css e js, prefisso i file con il nome del progetto perché il tuo sito può includere file js e css che sono componenti, questo rende chiaro dove i file sono specifici per il tuo sito o in relazione ai plugin.

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

Altri file potrebbero essere come

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

Infine le immagini sono divise dal loro uso.

• img/btn/submit.png un pulsante
• img/lgo/mysite-logo.png un logo
• img/bkg/header.gif uno sfondo
• img/dcl/top-left-widget.jpg un elemento decalcomania
• img/con/portait-of-something.jpg un'immagine contenuti

E 'importante mantenere le immagini organizzate poiché non ci può avere più di 100 anni e si può facilmente mescolare gether e nome confuso.

Answer 6

Tendo ad evitare tutto ciò che è generico, come quello suggerito da smdrager. "mysite.main.css" non significa assolutamente nulla.

Che cos'è "mysite" ?? Questo su cui sto lavorando? Se è così allora ovvio, ma già mi fa pensare a cosa potrebbe essere e se è così ovvio!

Che cos'è "Main"? La parola "Principale" non ha alcuna definizione al di fuori della conoscenza dei programmatori di ciò che è all'interno di quel file css.

Mentre ok in alcuni scenari, evitare nomi come "top" o "left" troppo: "top-nav.css" o "top-main-logo.png".
Si potrebbe finire volendo usare la stessa cosa da qualche altra parte, e mettere un'immagine in un piè di pagina o all'interno del contenuto della pagina principale chiamato "top-banner.png" è molto confuso!

Non vedo alcun problema con un buon numero di fogli di stile per consentire una convenzione di denominazione decente per rappresentare quale css è all'interno del file specificato.
Quante dipendono interamente dalla dimensione del sito e da quali sono le sue funzioni, e quanti blocchi diversi si trovano sul sito.

Non credo che sia necessario indicare "CSS" o "STYLE" nei nomi di file CSS, poiché è nella cartella "css" o "styles" e ha un'estensione di .css e principalmente come questi i file vengono sempre chiamati solo nell'area <head>, so abbastanza chiaramente cosa sono.

Detto questo, lo faccio con i file libreria, JS e config (etc). ad es. libSomeLibrary.php o JSSomeScript.php. Poiché i file PHP e JS sono inclusi o utilizzati in varie aree all'interno di altri file, e avere informazioni su quale sia lo scopo principale del file all'interno del nome è utile.

ad es .: Vedere il nome file require('libContactFormValidation.php'); è utile. So che è un file di libreria (lib) e dal nome cosa fa.

Per le cartelle di immagini, di solito ho images/content-images/ e images/style-images/. Non penso ci sia bisogno di ulteriore separazione, ma dipende ancora dal progetto.

Quindi ogni immagine verrà denominata in base a ciò che è, e di nuovo non penso che sia necessario definire il file è un'immagine all'interno del nome del file. Le dimensioni possono essere utili, specialmente quando le immagini hanno dimensioni diverse.

sito-logo-150x150.png
sito-logo-35x35.png
negozio-checkout-button-40x40.png
negozio-remove-item-20x20.png
ecc

---

Una buona regola da seguire è: se un nuovo sviluppatore arrivasse ai file, si sarebbero seduti a grattarsi la testa per ore, o avrebbero probabilmente capito cosa fanno le cose e avranno solo bisogno di un po 'di ricerca (che è inevitabile)?

Come in questo caso, tuttavia, una delle regole più importanti da seguire è semplicemente costanza!
Assicurati di seguire la stessa logica e gli stessi schemi in tutte le convenzioni di denominazione!
Da semplici nomi di file css, a file di libreria PHP a nomi di tabelle e colonne del database.

Answer 7

ho notato un sacco di sviluppatori frontend si stanno allontanando da css e js a favore di styles e scripts perché non v'è in genere altra roba lì, come ad esempio .less, .styl, e .sass nonché, per alcuni, .coffee. Il fatto è che l'utilizzo di selezioni tecnologiche specifiche nella scelta dell'organizzazione della cartella è una cattiva idea, anche se tutti lo fanno.Io continuerò a utilizzare lo standard vedo da questi sviluppatori di tutto rispetto:

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

ei loro equivalenti destinazione di build , che a volte sono preceduti da dest a seconda di ciò che stanno costruendo:

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

In questo modo coloro che vogliono mettere insieme tutti i file (piuttosto che scoppiando un src directory) per mantenerlo e mantenere le cose chiaramente associate a quelle che si presentano.

Io in realtà andare un po 'futher e aggiungi

• scripts/before
• scripts/after

che vengono smooshed in due main-before.min.js e main-after.min.js script, uno per l'intestazione (con gli elementi essenziali della normalize e modernizr che devono essere eseguiti in anticipo, ad esempio) e after per l'ultima cosa nel corpo dal momento che javascript può attendere. Questi non sono pensati per la lettura, proprio come la pagina principale di Google.

Se ci sono script e fogli di stile che hanno senso minimizzare e lasciare collegati solo a causa di un particolare approccio di gestione della cache che viene preso in considerazione nelle regole di compilazione.

In questi giorni, se non si sta utilizzando un processo di compilazione di qualche tipo, come gulp o grunt, probabilmente non si raggiungeranno la maggior parte degli obiettivi di rendimento incentrati sui dispositivi mobili che dovresti probabilmente considerare.

Answer 8

È possibile assegnare un nome in questo modo:

/Attività/css/- Per i file CSS

/beni/font/- Per i file font. (Principalmente puoi andare su google fonts per cercare font utilizzabili.)

/assets/images/- Per i file di immagini.

/assets/scripts/or/assets/js/- Per i file JavaScript.

/assets/media/- Per video e misc. File.

È anche possibile sostituire "risorse" con il nome della cartella "risorsa" o "file" e mantenere il nome delle relative sottocartelle. Ben avere una struttura di cartelle degli ordini come questa non è molto importante, l'unica cosa importante è che devi solo organizzare i tuoi file in base al formato. come creare una cartella "/ css /" per i file CSS o "/ images /" per i file di immagine.