Lección 11: Patrón 7-1

Tal vez dispongamos de buenos nombres para las clases usando una nomenclatura (como aprendimos con BEM) pero seguimos sin tener un patrón a la hora de distribuir los estilos de una manera eficiente. La pregunta sería, ¿cómo organizamos los archivos CSS? Necesitamos que posean una estructura autoexplicativa, eficaz y fácil de entender por otros compañeros de la profesión. Debemos alejarnos de códigos espaguetis o estructuras monolíticas (todo en un solo fichero). La solución es usar un patrón de arquitectura CSS, en concreto el famoso Patrón 7-1. Una estructura muy clara, extraordinariamente ordenada que cualquier Diseñador Web puede entender a golpe de vista.

Sin embargo, antes de aplicarla, deberemos entender cómo funciona el Split Media. Una técnica que nos permitirá crear páginas con un diseño adaptativo (responsive design) de una manera sencilla y escalable.

Split Media

Con Split Media es una técnica que se basa en dividir los estilos en varios ficheros CSS. Cada uno de ellos se encargará de un tamaño de pantalla. De esta manera, si queremos cambiar el diseño de un elemento en un tamaño de pantalla concreto, solo tendremos que modificar el fichero CSS que le corresponda.

Vamos a crear un ejemplo sencillo con 3 ficheros:

base.css: Contendrá los estilos generales que se aplicarán en todas las páginas.
mobile.css: Contendrá los estilos que se aplicarán en smartphones.
desktop.css: Contendrá los estilos que se aplicarán en escritorio.

El objetivo será dar estilos diferentes a un título (<h1>) dependiendo de la resolución. Concretamente será rojo en smartphone y naranja en escritorio.

Primero creamos un fichero CSS con el nombre base.css, en su interior los estilos generales que contendrán todos los títulos en todas las páginas.

h1 {
    font-family: arial;
    text-align: center;
    padding: 1rem;
}

Ahora un fichero CSS con el nombre de mobile.css y dentro los estilos que dispondrá únicamente en smartphones.

h1 {
    color: red;
}

Después declararemos otro fichero CSS con el nombre de desktop.css con el siguiente contenido.

h1 {
    color: orange;
}

Ahora escribimos el HTML que invocará a los ficheros CSS. Para ello usaremos la etiqueta <link> con el atributo media que nos permitirá indicar el tamaño de pantalla en el que se aplicará el fichero CSS.

<!doctype html>
<html lang="es">
    <head>
        <meta charset="UTF-8"/>
        <title>Ejemplo Split media</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, shrink-to-fit=no">
		<!-- Ficheros CSS -->
        <link href="base.css" rel="stylesheet">
        <link href="mobile.css" rel="stylesheet" media="all and (max-width: 600px)">
        <link href="desktop.css" rel="stylesheet" media="all and (min-width: 600px)">
		<!-- Fin ficheros CSS -->
    </head>
    <body>
        <h1>Gravida arcu ac tortor.</h1>
    </body>
</html>

Al final conseguiremos el siguiente resultado.

Facil ¿verdad? Pues ahora vamos a complicarlo un poco más. Imaginemos que queremos que el título sea rojo en smartphone y naranja en escritorio pero que en tablet sea azul. Para ello deberemos crear un nuevo fichero CSS con el nombre de tablet.css y dentro los estilos que dispondrá únicamente en tablet.

h1 {
	color: blue;
}

Ahora modificamos el HTML para que invoque al nuevo fichero CSS.

<!doctype html>
<html lang="es">
	<head>
		<meta charset="UTF-8"/>
		<title>Ejemplo Split media</title>
		<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, shrink-to-fit=no">
		<!-- Ficheros CSS -->
		<link href="base.css" rel="stylesheet">
		<link href="mobile.css" rel="stylesheet" media="all and (max-width: 600px)">
		<link href="tablet.css" rel="stylesheet" media="all and (min-width: 600px) and (max-width: 1024px)">
		<link href="desktop.css" rel="stylesheet" media="all and (min-width: 1024px)">
		<!-- Fin ficheros CSS -->
	</head>
	<body>
		<h1>Gravida arcu ac tortor.</h1>
	</body>
</html>

En lugar de llenar nuestros ficheros CSS con media queries, hemos creado un fichero CSS para cada tamaño de pantalla. De esta manera, si queremos cambiar el diseño de un elemento en un tamaño de pantalla concreto, solo tendremos que modificar el fichero CSS que le corresponda.

Ahora vamos a aplicar el patrón 7-1 para organizar nuestros ficheros CSS usando Split Media. Empezaremos con una versión reducida que nos ayudará a comprender la utilidad de cada fichero.

Patrón 7-1 lite

Utilizaremos una versión reducida para familiarizarnos con el patrón 7-1. Aunque puede ser perfectamente utilizado para un sitio pequeño que no requiera mucho esfuerzo.

La estructura de carpetas será la siguiente:

sass/
|
|– _base.sass
|– _header.sass
|– _footer.sass
|– _mixins.sass
|– _typography.sass
|– _variables.sass
|– pages
|   |– _home.sass
|   |– _contact.sass
|   ...
|– vendors/
|   |– _bootstrap.sass
|   |– _jquery-ui.sass
|   ...
`– main.sass

El fichero main.sass será el encargado de importar todos los ficheros SASS.

@use "base"
@use "header"
@use "footer"
@use "mixins"
@use "typography"
@use "variables"
@use "pages/home"
@use "pages/contact"
@use "vendors/bootstrap"
@use "vendors/jquery-ui"

El resto de archivos SASS serán los encargados de contener los estilos de cada sección.

_base.sass: los estilos que compartirán todas las páginas.
_header.sass: los estilos de la cabecera.
_footer.sass: los estilos del pie.
_mixins.sass: los mixins de SASS.
_typography.sass: los estilos de las fuentes/tipografías.
_variables.sass: las variables.
_pages/home.sass: los estilos de la página de inicio.
_pages/contact.sass: los estilos de la página de contacto.
_vendors: los estilos de los frameworks/librerías externas.

Si quieres descargar plantillas de este patrón, te doy varias opciones:

Patrón 7-1 con Split Media

Ahora que sabemos crear sitios con Split Media y con el patrón 7-1 Lite, vamos a unirlos para crear un sitio web profesional.

El patrón 7-1 solo tiene 2 reglas:

Todo estará repartido en 7 carpetas (de ahí su nombre).
El fichero main.sass debe estar a la altura de las carpetas e importará todos los ficheros SASS del proyecto.

La estructura de carpetas será la siguiente:

sass/                    # Carpeta donde estará todo nuestro SASS
|
|– base/                 # Carpeta con los estilos que compartirán todas las páginas.
|   |– _reset.sass       # Reset/normalize
|   |– _typography.sass  # Fuentes/tipografías
|   ...                  # Etc…
|
|– components/           # Carpeta de componentes
|   |– _buttons.sass     # Botones
|   |– _carousel.sass    # Carouseles
|   |– _modal.sass       # Modales
|   |– _dropdown.sass    # Desplegables
|   ...                  # Etc…
|
|– layout/               # Carpeta con los bloques
|   |– _navigation.sass  # Navegadores/Menús
|   |– _grid.sass        # Ayudas para maquetación
|   |– _header.sass      # Cabecera
|   |– _footer.sass      # Pie
|   |– _sidebar.sass     # Menú lateral
|   |– _forms.sass       # Formularios
|   ...                  # Etc…
|
|– pages/                # Carpeta con los estilos propios de cada página
|   |– _home.sass        # Página de inicio
|   |– _contact.sass     # Página de contacto
|   ...                  # Etc…
|
|– themes/               # Carpeta con los temas
|   |– _theme.sass       # Tema principal
|   |– _admin.sass       # Tema de administración
|   ...                  # Etc…
|
|– utils/                # Carpeta con utilidades y ayudas
|   |– _variables.sass   # Variables
|   |– _functions.sass   # Funciones SASS
|   |– _mixins.sass      # Mixins de SASS
|   |– _helpers.sass     # Clases de ayuda
|
|– vendors/              # Carpeta con el CSS externo a nosotros
|   |– _bootstrap.sass   # Bootstrap
|   |– _jquery-ui.sass   # jQuery UI
|   ...                  # Etc…
|
|
`– main.sass             # El encargado de importar todos los SASS

Nuestro main.sass no tendrá ni una línea de CSS, únicamente importará. Se quedará, como en el anterior ejemplo de Lite, importando todo de la siguiente manera:

@use "base/reset"
@use "base/typography"
@use "components/buttons"
@use "components/carousel"
...

Si necesitas una plantilla puedes descargar plantilla 7-1 con SASS.

Y ahora que ya conoces el patrón, vamos a ver como utilizarlo con Split Media.

La estructura de carpetas será la siguiente:

sass/
|
|– abstracts/
|   |– _mixins.sass
|   |– _variables.sass
|– base/
|   |– _base.sass
|   |– _fonts.sass
|   |– _helpers.sass
|   |– _typography.sass
|– mobile/
|   |– layout/
|   |   |– _footer.sass
|   |   |– _header.sass
|   |– components/
|   |   |– _alert.sass
|   |   |– _button.sass
|   |   |– ...
|   |– pages/
|   |   |– _home.sass
|   |   |– _contact.sass
|   |   |– ...
|– desktop/
|   |– layout/
|   |   |– _footer.sass
|   |   |– _header.sass
|   |– components/
|   |   |– _alert.sass
|   |   |– _button.sass
|   |   |– ...
|   |– pages/
|   |   |– _home.sass
|   |   |– _contact.sass
|   |   |– ...
|– themes/
|   |– _dark.sass
|   |– _light.sass
|– vendors/
|   |– _normalize.sass
|   |– _owl-carousel.sass
|   ...
`– mobile.sass
`– desktop.sass

Y el HTML final sería:

<!doctype html>
<html lang="en">
    <head>
        <meta charset="UTF-8"/>
        <title>Split media</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
        <link href="css/mobile.css" rel="stylesheet" media="all and (max-width: 600px)">
        <link href="css/desktop.css" rel="stylesheet" media="all and (min-width: 600px)">
    </head>
    <body>
        <h1>Gravida arcu ac tortor.</h1>
    </body>
</html>

Para diferenciar los estilos de cada dispositivo, mobile.sass y desktop.sass importarán los estilos de cada dispositivo.

mobile.sass:

@charset "UTF-8"

// Vendors

@use "vendors/normalize"

// Base stuff

@use "base/base"
@use "base/fonts"
@use "base/typography"
@use "base/helpers"

// Layout-related sections

@use "mobile/layout/header"
@use "mobile/layout/footer"

// Components

@use "mobile/components/alert"
@use "mobile/components/button"

// Page-specific styles

@use "mobile/pages/home"
@use "mobile/pages/contact"

// Themes

@use "themes/light"
@use "themes/dark"

desktop.sass:

@charset "UTF-8"

// Vendors

@use "vendors/normalize"

// Base stuff

@use "base/base"
@use "base/fonts"
@use "base/typography"
@use "base/helpers"

// Layout-related sections

@use "desktop/layout/header"
@use "desktop/layout/footer"

// Components

@use "desktop/components/alert"
@use "desktop/components/button"

// Page-specific styles

@use "desktop/pages/home"
@use "desktop/pages/contact"

// Themes

@use "themes/light"
@use "themes/dark"