Como organizar tus carpetas CSS, usando el patrón 7-1.

Empezamos un proyecto web nuevo, y lo primero debería ser como organizar las carpetas. Por que no empezar con las carpetas que contendrán el proyecto, en cualquier tipo de proyecto, y solo trabajar con ficheros es un suicidio, un disparo en el pie que nos dolerá siempre. Pero, ¿como organizamos las carpetas sin tener nada de código escrito?, es complicado pero debemos de pensar como organizarnos. Lo normal, es ir creando carpetas y sus ficheros conforme los vayas necesitando, para un proyecto muy corto no dará muchos problemas; pero en grandes proyectos acaba siendo un Frankenstein, de directorios copiados, de directorios que usas ahora, que usabas antes, antes de ese antes, etc...

Hugo Giraudel ha pensando en este problema. La mejor distribución de carpetas para un proyecto web, concretamente la sección del diseño, CSS, SAS o LESS. Piensa, que si creamos una jerarquía demasiado pequeña de carpetas no será útil esta distribución. Si es demasiado extensa nos perderemos y muchas no se usarán. Por ello que el numero de directorios precisos determino que deberían de ser 7. Y sus nombres con los que identificamos son representativos del tipo de necesidad que cubren los CSS de su interior. Es decir, con una palabra ya sabemos que parte del proyecto tiene, de esta forma es fácil encontrar lo que necesitamos.

La organización de directorios con el patron 7-1 para los ficheros CSS, es la siguiente:


sass/ 
| 
|– base/ 
|   |– _reset.scss       # Reset/normalize 
|   |– _typography.scss  # Typography rules 
|   ...                  # Etc… 
| 
|– components/ 
|   |– _buttons.scss     # Buttons 
|   |– _carousel.scss    # Carousel 
|   |– _cover.scss       # Cover 
|   |– _dropdown.scss    # Dropdown 
|   |– _navigation.scss  # Navigation 
|   ...                  # Etc… 
| 
|– helpers/ 
|   |– _variables.scss   # Sass Variables 
|   |– _functions.scss   # Sass Functions 
|   |– _mixins.scss      # Sass Mixins 
|   |– _helpers.scss     # Class & placeholders helpers 
|   ...                  # Etc… 
| 
|– layout/ 
|   |– _grid.scss        # Grid system 
|   |– _header.scss      # Header 
|   |– _footer.scss      # Footer 
|   |– _sidebar.scss     # Sidebar 
|   |– _forms.scss       # Forms 
|   ...                  # Etc… 
| 
|– pages/ 
|   |– _home.scss        # Home specific styles 
|   |– _contact.scss     # Contact specific styles 
|   ...                  # Etc… 
| 
|– themes/ 
|   |– _theme.scss       # Default theme 
|   |– _admin.scss       # Admin theme 
|   ...                  # Etc… 
| 
|– vendors/ 
|   |– _bootstrap.scss   # Bootstrap 
|   |– _jquery-ui.scss   # jQuery UI 
|   ...                  # Etc… 
| 
| 
`– main.scss 

Este ejemplo de Hugo es con ficheros de SAS pero con CSS es idéntico cambiando la terminación de los documentos. Y si tienes la duda de que es ese fichero "main", es el encargado de importar el resto de ficheros. El navegador solo debe de importar el main.css y este incluirá el resto de ficheros.

En mis años de experiencia, he desarrollado proyectos pequeños y muy grandes, y en todos ellos esta organización para los CSS me ha servido perfectamente para tener un sistema reutilizable y escalable. Me refiero que la parte estética de una página es innegable que se cambiará, algunos clientes más, otros menos pero casi siempre se cambia. Por ello el tener esta disposición es perfecto para afrontar nuevos retos sin rehacer todo y además cuando estamos empezando no causa ni perdida de tiempo ni tener que aprender nada nuevo. Por ello es perfecto, una nueva metodología sin curva de aprendizaje, que ayuda a cualquier diseñador o programador a trabajar siguiendo un patrón que quite los interrogantes de ¿como esta organizado esto?,¿donde esta esto?, y el temido grito de ¡¡ Esto es una locura!!, borro todo y rehago entero.

{{ message }}

{{ 'Comments are closed.' | trans }}