¿Cómo organiza su carpeta js y css en su aplicación web?
La estructura de mi proyecto actual es como esta:
root/
├── assets/
│ ├── js/
│ │ └──lib/
│ ├── css/
│ └── img/
└── index.htmlPero es más complicado cuando utilizo muchas bibliotecas javascript y complementos css. El complemento Javascript viene con su propio archivo .js y, a veces, con su propio archivo .css.
Por ejemplo, cuando uso JQuery con el complemento JQueryUI, coloco jquery.js y jquery-ui.js dentro del directorio js / lib. Pero JQueryUI viene con su propio archivo css. ¿Dónde debería colocar el CSS del complemento javascript para obtener las mejores prácticas? ¿Debo ponerlos dentro de la carpeta lib para distinguir mi complemento css y javascript css? ¿O en otro sitio?
Sé que es una preferencia personal, pero solo quiero saber cómo organizan la carpeta de su proyecto.
Gracias por adelantado :)
buildcarpeta y unasrccarpeta.Respuestas:
Esbozaré una estructura recomendada para organizar archivos en su aplicación HTML5. Este no es un intento de crear ningún tipo de estándar. En cambio, haré sugerencias sobre cómo agrupar y nombrar archivos de una manera lógica y conveniente.
Tu proyecto
Supongamos que está creando una aplicación HTML5. En algunos casos, puede usar la raíz de su servidor como contenedor principal, pero para el propósito de este artículo, asumiré que su aplicación HTML5 está contenida en una carpeta. Dentro de esta carpeta debe crear el archivo de índice de su aplicación o el punto de entrada principal.
Generalmente, su aplicación estará compuesta por archivos HTML, CSS, Imágenes y Javascript. Algunos de esos archivos serán específicos de su aplicación y otros se pueden utilizar en varias aplicaciones. Esta es una distinción muy importante. Para hacer una agrupación eficaz de sus archivos, debe comenzar separando los archivos de uso general de los recursos específicos de la aplicación.
Esta simple separación hace que navegar por sus archivos sea mucho más fácil. Una vez que coloque las bibliotecas y los archivos de uso general dentro de la carpeta de proveedores , está claro que los archivos que editará se ubicarán en la carpeta de recursos .
Aparte de su código HTML, el resto de los archivos de su aplicación son en su mayoría CSS, Javascript e imágenes. Es probable que ya agrupe los archivos de su aplicación dentro de carpetas que corresponden a este tipo de activos.
La carpeta js contendrá su código Javascript. Del mismo modo, la carpeta de imágenes es el lugar donde debe agregar imágenes que se utilizan directamente desde el index.html o cualquier otra página de su aplicación. Esta carpeta de imágenes no debe utilizarse para alojar archivos relacionados con hojas de estilo. Su código CSS y las imágenes relacionadas deben ubicarse dentro de la carpeta css . Al hacer esto, puede crear páginas que pueden usar fácilmente diferentes temas y permite que su aplicación sea más portátil.
El ejemplo anterior muestra el contenido de la carpeta css . Observe que hay un archivo llamado default.css que debe usarse como su archivo CSS principal. Las imágenes utilizadas por la hoja de estilo predeterminada deben colocarse dentro de la carpeta de imágenes . Si desea crear hojas de estilo alternativas o si desea anular las reglas definidas en su hoja de estilo predeterminada, puede crear archivos CSS adicionales y las carpetas correspondientes. Por ejemplo, puede crear una hoja de estilo blue-theme.css y colocar todas las imágenes relacionadas dentro de un blue-themecarpeta. Si tiene código CSS o Javascript que solo se usa en una página (en este caso, my-index.html), puede agrupar el código específico de la página dentro de los archivos .css y .js con el mismo nombre de la página (ei my-index .css y my-index.js). Su código CSS y Javascript debe ser lo más genérico posible, pero puede realizar un seguimiento de las excepciones colocándolas en archivos separados.
Recomendaciones finales
Deben hacerse algunas recomendaciones finales sobre los nombres de carpetas y archivos. Como regla general, asegúrese de utilizar letras minúsculas en todos los nombres de carpetas y archivos. Cuando utilice varias palabras para nombrar un archivo o una carpeta, sepárelas con un guión (es decir, my-company-logo-small.png). Si sigue los consejos de este artículo, debería poder combinar varias páginas manteniendo los recursos comunes juntos y el código personalizado bien separados.
Por último, incluso si no elige utilizar la estructura recomendada en este artículo, es importante ceñirse a una convención. Aumentará su productividad y, lo que es más importante, hará que los demás comprendan fácilmente el trabajo que realiza.
Crédito fuente: cómo organizar sus archivos HTML, CSS y Javascript
fuente
Así es como organicé los recursos estáticos de mi aplicación.
fuente