practices español cheatsheet best naming-conventions

naming conventions - español - Convención de nombres para los activos(imágenes, css, js)?



css naming conventions (8)

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

Por lo tanto, mi actual sería:

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

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

Imágenes: {imageType}-{name}.{imageExtension}
{imageType} es cualquiera de estos

  • icono (por ejemplo, icono de signo de interrogación para el contenido de la ayuda)
  • img (por ejemplo, una imagen de encabezado insertada a través del elemento <img /> )
  • botón (por ejemplo, un botón de envío gráfico)
  • bg (la imagen se usa como imagen de fondo en css)
  • sprite (la imagen se usa como imagen de fondo en css y contiene múltiples "versiones")

Los nombres de los ejemplos 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 nombres ?

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

Me he dado cuenta de que muchos desarrolladores frontend se están alejando de css y js en favor de styles y scripts porque generalmente hay otras cosas ahí, como .less , .styl y .sass , así como, para algunos .sass .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. Continuaré usando el estándar que veo de estos desarrolladores muy respetados:

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

Y sus equivalentes de construcción de destino, que a veces están prefijados con dest dependiendo de lo que están construyendo:

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

Esto permite que aquellos que desean juntar todos los archivos (en lugar de crear un directorio src ) guarden eso y mantengan las cosas claramente asociadas para aquellos que sí se dividen.

De hecho, voy un poco más lejos y agrego

  • scripts/before
  • scripts/after

Que se suavizaron en dos scripts main-before.min.js y main-after.min.js , uno para el encabezado (con elementos esenciales de normalize y modernizr que deben ejecutarse temprano, por ejemplo) y after para lo último en el cuerpo 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 vinculados 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 tragar o gruñir , es probable que no esté alcanzando la mayoría de los objetivos de rendimiento centrados en el dispositivo móvil que probablemente debería considerar.

Para sitios grandes donde CSS puede definir muchas 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 agregar en el tipo de elemento, pero no estoy seguro de qué tan útil es y podría ser engañoso para futuros cambios requeridos:

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

Primero, 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.css css/mysite.main.js

Otros archivos pueden 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 de calcomanía
  • img/con/portait-of-something.jpg una imagen de contenido

Es importante mantener las imágenes organizadas, ya que puede haber más de 100 y pueden mezclarse fácilmente y llamarse de manera confusa.

Puedes nombrarlo así:

/ assets / css / - Para archivos CSS

/ assets / font / - Para archivos de fuentes. (En su mayoría, 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 "activos" por el nombre de la carpeta "recursos" o "archivos" 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.

Tiendo a evitar cualquier cosa genérica, como lo que sugirió smdrager. "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 "Principal"? La palabra "Principal" no tiene definición fuera del conocimiento de los codificadores de lo que está dentro de ese archivo css.

Aunque está bien en ciertos escenarios, evite nombres como "top" o "left" 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 retratar qué CSS está dentro del archivo dado.
Cuántos dependen completamente del tamaño del sitio y de sus funciones, y de cuántos bloques diferentes hay en el sitio.

No creo que necesites indicar "CSS" o "STYLE" en los nombres de los archivos css, ya que está en la carpeta "css" o "styles" y tiene una extensión de .css y principalmente ya que estos archivos son solo alguna vez llamado en el área <head> , sé muy claramente lo que 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 usan 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 las carpetas de imágenes, generalmente tengo images/content-images/ e images/style-images/ . No creo que deba haber más separación, pero de nuevo depende del proyecto.

Entonces, cada imagen se nombrará de acuerdo con lo que es, y de nuevo, no creo que haya ninguna necesidad de definir el archivo como una imagen dentro del nombre del archivo. Los tamaños pueden ser útiles, especialmente cuando las imágenes tienen diferentes tamaños.

site-logo-150x150.png
site-logo-35x35.png
shop-checkout-button-40x40.png
shop-remove-item-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 durante 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 algo como esto, ¡una de las reglas más importantes a seguir es simplemente la constancia !
¡Asegúrate de seguir la misma lógica y patrones en todas tus convenciones de nombres!
Desde nombres simples de archivos CSS, hasta archivos de bibliotecas PHP, tablas de bases de datos y nombres de columnas.

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

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