Convención de nomenclatura para activos (imágenes, css, js)?

Question

Todavía estoy luchando por encontrar una buena convención de nomenclatura para elementos como archivos de imágenes, js y css utilizados en mis proyectos web.

lo tanto, mi actual sería:

CSS:style-{name}.css
ejemplos: style-main.css, style-no_flash.css, etc. style-print.css

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

archivo:{imageType}-{name}.{imageExtension}
{imageType} es cualquiera de estos

• icono (e. gramo. icono de signo de interrogación para el contenido de la ayuda)
• img (por ejemplo, una imagen de cabecera inserta a través de <img /> elemento)
• botón (por ejemplo, un botón gráfico enviar)
• bg (imagen se utiliza una imagen de fondo en CSS como)
• Sprite (imagen se utiliza una imagen de fondo en css como y contiene múltiples "versiones")

ejemplo- nombres serían: icon-help.gif, img-logo.gif, sprite-main_headlines.jpg, bg-gradient.gif etc.

Entonces, ¿qué piensas y cuál es tu convención de nomenclatura?

Answer 1

Coloque los archivos CSS en una carpeta css, Javascript en js, imágenes en images, ... Añadir subcarpetas como mejor le parezca. No es necesaria ninguna convención de nomenclatura en el nivel de los archivos individuales.

Answer 2

La BBC tiene muchos estándares relacionados con el desarrollo web.

Su nivel es bastante simple para los archivos CSS:

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

Usted puede ser capaz de encontrar algo útil en su sitio principal:

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

Answer 3

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

es el mejor estructura que he visto y la que prefiero. Con las carpetas, no es necesario que prefieras tu CSS, etc., con nombres descriptivos.

Answer 4

Para sitios grandes donde CSS puede definir una gran cantidad de imágenes de fondo, una convención de nomenclatura de archivos para esos activos es realmente útil para realizar cambios más adelante.

Por ejemplo:

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

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

También hemos discutido la adición en el tipo de elemento, pero no estoy seguro de lo útil que es y, posiblemente, podría ser engañoso para los futuros cambios requeridos:

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

Answer 5

Primera , Divido en carpetas: css, js, img.

Dentro de css y js, prefijo los archivos con el nombre del proyecto porque su sitio puede incluir archivos js y css que son componentes, esto deja en claro dónde los archivos son específicos para su sitio, o en relación con los complementos.

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

Otros archivos podrían ser como

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

Finalmente las imágenes se dividen por su uso.

• img/btn/submit.png un botón
• img/lgo/mysite-logo.png un logotipo
• img/bkg/header.gif un fondo
• img/dcl/top-left-widget.jpg un elemento calcomanía
• img/con/portait-of-something.jpg una imagen de contenido

Es importante mantener las imágenes organizadas ya que no puede tener más de 100 y se puede mezclar fácilmente justos y confusamente nombrados.

Answer 6

Tiendo a evitar cualquier cosa genérica, como lo que smdrager sugirió. "mysite.main.css" no significa nada en absoluto.

¿Qué es "mysite" ?? ¿Este en el que estoy trabajando? Si es así, entonces obvio, ¡pero ya me hace pensar qué podría ser y si es tan obvio!

¿Qué es "Main"? La palabra "Principal" no tiene definición fuera del conocimiento de los codificadores de lo que está dentro de ese archivo css.

Mientras que está bien en ciertos escenarios, evite nombres como "arriba" o "izquierda" también: "top-nav.css" o "top-main-logo.png".
Puede terminar queriendo usar lo mismo en otra parte, y poner una imagen en un pie de página o dentro del contenido de la página principal llamado "top-banner.png" es muy confuso.

No veo ningún problema con tener un buen número de hojas de estilo para permitir una convención de nomenclatura decente para representar qué CSS está dentro del archivo dado.
Cuantos dependen completamente del tamaño del sitio y sus funciones, y cuántos bloques diferentes hay en el sitio.

No creo que deba indicar "CSS" o "STYLE" en los nombres de archivo css, ya que está en la carpeta "css" o "styles" y tiene una extensión de .css y principalmente como estos Los archivos solo se llaman en el área <head>, sé muy claramente cuáles son.

Dicho esto, hago esto con archivos de biblioteca, JS y config (etc). por ejemplo, libSomeLibrary.php, o JSSomeScript.php. Como los archivos PHP y JS se incluyen o utilizan en diversas áreas dentro de otros archivos, es útil tener información sobre cuál es el propósito principal del archivo dentro del nombre.

por ejemplo: Ver el nombre de archivo require('libContactFormValidation.php'); es útil. Sé que es un archivo de biblioteca (lib) y del nombre lo que hace.

Para carpetas de imágenes, generalmente tengo images/content-images/ y images/style-images/. No creo que deba haber más separación, pero de nuevo depende del proyecto.

A continuación, cada imagen se denominará en función de lo que es, y de nuevo, no creo que haya ninguna necesidad de definir el archivo es una imagen dentro del nombre del archivo. Los tamaños pueden ser útiles, especialmente cuando las imágenes tienen diferentes tamaños.

sitio-logo-150x150.png
sitio-logo-35x35.png
tienda-checkout-botón-40x40.png
tienda-remove-elemento-20x20.png
etc

---

Una buena regla a seguir es: si un nuevo desarrollador llegara a los archivos, ¿se quedarían sentados rascándose la cabeza por horas, o probablemente entenderían lo que hacen las cosas y solo necesitarían un poco de tiempo para investigar (lo cual es inevitable)?

Sin embargo, como una cosa así, una de las reglas más importantes a seguir es simplemente constancia!
¡Asegúrese de seguir la misma lógica y patrones en todas sus convenciones de nombres!
Desde nombres simples de archivos CSS, hasta archivos de bibliotecas PHP, tablas de bases de datos y nombres de columnas.

Answer 7

he notado una gran cantidad de desarrolladores frontend están alejando de css y js a favor de styles y scripts porque en general hay otras cosas en allí, como .less, .styl y .sass, así como, para algunos, .coffee. El hecho es que usar selecciones de tecnología específicas en la organización de carpetas que elijas es una mala idea, incluso si todo el mundo lo hace.Voy a seguir para utilizar el estándar que veo de estos desarrolladores de gran prestigio:

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

y sus equivalentes construcción destino , que a veces llevan el prefijo dest dependiendo de lo que están construyendo:

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

Esto permite que aquellos que quieren poner todos los archivos juntos (en lugar de rompiendo un src directorio) para mantener eso y mantiene las cosas claramente asociadas para aquellos que se rompen.

realidad voy un futher poco y añadir

• scripts/before
• scripts/after

que obtienen smooshed en dos main-before.min.js y main-after.min.js guiones, uno para la cabecera (con los elementos esenciales de normalize y modernizr que deben ejecutarse temprano, por ejemplo) y after como último recurso, ya que javascript puede esperar. No están destinados a la lectura, al igual que la página principal de Google.

Si hay scripts y hojas de estilo que tienen sentido para minimizar y dejar vinculado solo debido a un enfoque de gestión de caché particular que se tiene cuidado en las reglas de compilación.

En estos días, si no está utilizando un proceso de compilación de algún tipo, como gulp o grunt, es probable que no esté alcanzando la mayoría de los objetivos de rendimiento centrados en dispositivos móviles que probablemente debería considerar.

Answer 8

Se puede nombrar así:

/activos/css/- Para los archivos CSS

/activos/fuente/- Para los archivos de fuente. (Principalmente, puede ir a las fuentes de Google para buscar fuentes útiles.)

/assets/images/- Para archivos de imágenes.

/assets/scripts/o/assets/js/- Para archivos de JavaScript.

/assets/media/- Para video y misc. archivos.

También puede reemplazar "assets" por el nombre de la carpeta "resource" o "files" y mantener el nombre de sus subcarpetas. Tener una estructura de carpetas de pedidos como esta no es muy importante; lo único importante es que solo tienes que organizar tus archivos por su formato. como crear una carpeta "/ css /" para archivos CSS o "/ images /" para archivos de imagen.