Organización efectiva de archivos CSS en proyectos web

  • Autor Autor jah27
  • Fecha de inicio Fecha de inicio
J

jah27

Curioso
¡Usuario con pocos negocios! ¡Utiliza siempre saldo de Forobeta!
Hola amigos, como lo dice el titulo, quisiera saber cual sería la manera mas recomendable de organizar mis archivos css de una web, por ejemplo imaginemos que es un proyecto grande y un solo archivo css de 1000 lineas de código, si quiero cambiar algo mas adelante sería tedioso, he buscado información, y una buena manera es organizarlo por secciones, header, menu, articulos, etc.... y la manera sería crear uno principal y enlazar estos con @import, ahora también estoy leyendo que utilizar el @import no es recomendable por la lentitud de carga de las paginas, bueno creo haberme explicado bien, espero que si hahhahahaa

De nuevo que metodo me recomendarían o que metodo usan ustedes amigos ? Gracias ....
 
Yo te recomendaría que te olvidaras de los @import, la mejor manera de organizar tu proyecto seria que pusieras los css dentro de una carpeta y tuvieras un par de archivos en donde dividieras el grid, el responsive y los estilos.
Algo así:

- Tu proyecto
-- css
--- responsive,css
--- grid.css
--- style.css

Y una vez que hayas lanzado tu proyecto a producción comprimir el código, obviamente teniendo un respaldo de todo antes de subirlo a producción.

Otra opción seria subir tus hojas de estilo a un CDN...
 
Usa un task manager (creo se llaman) como gulp, tienes tu archivos css o scss separados y los compilas a un solo styles.css y ese cargas en tu web, y ya de pasada lo minificas.
 
Gracias por responder son lux, minificar el css, creo que es lo mas recomendable y lo que la mayoría hace, quiero adentrarme mas en sass también, para organizar mi código un poco mejor.... 🙂

- - - Actualizado - - -

Gracias por la ayuda lombervid, voy a investigar sobre gulp, si como le respondí al amigo Son, lo de minificar me parece lo mas sensato, pero como a esta fecha veo a algunos utilizando lo de @import en videos por internet etc... Quería despejar dudas. 🙂:-
 
Dentro de archivos .scsses donde se hacen los imports. Pero con herramientas como gulp puedes juntarlos también.
 
Si no estas usando pre-procesadores te estas quedando en el pasado y te estas perdiendo de mucho, te recomiendo que aprendas scss o sass y lo combines con alguna metodología, como BEM por ejemplo, para que puedas dividir tus hojas de estilos en módulos reutilizables. Y como ya te recomendaron, GULP es una buena herramienta, muy fácil de usar, para automatizar el proceso de compilación y minificación.
 
Mi pequeño aporte:

Usen un task manager: Gulp, Grunt, Webpack
Ultimamente estoy usando PostCss con Cssnext y algunos plugins.
Plugins como Browser-Sync, autoprefixer, sourcemaps

A estas alturas son casi imprescindibles.
 
Atrás
Arriba