Conviértete en arquitecto CSS

Ya no te puedes permitir tener una hoja de estilos monolítica. Se acabó el archivo infinito donde se acumulaba todo el CSS según ibamos creando una web. Y que, si tal vez eras un poco ordenado, ocasionalmente introducías algunos comentarios para dividir las secciones. Ya no es práctico ni profesional.

Las hojas de estilos han crecido tanto horizontal como verticalmente. Mientras que el HTML se ha actualizado con algunos metas, etiquetas léxicas y algunos elementos multimedia; el CSS ha crecido en características y posibilidades. Ahora tenemos: soluciones para aplicar estilos a ciertas resoluciones, elementos de programación como variables, importaciones de otros documentos, animaciones, vectores, tipografías, filtros, cajas flexibles, Grids… En la actualidad nuestros sitios albergan más lineas de CSS que de HTML. Y si usas un Framework CSS posiblemente lo doblarás o triplicarás.

Y ya que sacamos el tema, ¿de verdad necesitamos seguir utilizando un Frameworks CSS? Nos proponen una solución propia, una forma de trabajar cerrada a cambio de acelerar las labores, pero no es gratuito:

Si tomamos el control de una arquitectura para el CSS podremos mejorar como profesionales aumentando nuestro vocabulario. Por otro lado será más fácil de mantener y adaptar la estructura a cada proyecto (no todos son iguales ni deben serlo). Te encuentra en un momento histórico donde más ayudas encontrarás para construir un CSS con una arquitectura clara y profesional, de ser mejor Diseñadores Web y hacer los sitios más sencillos.

En el artículo te mostraré como lograrlo y algunas técnicas que usan grandes sitios.

1. Metodología BEM

Una forma de hacer tu código más legible es buscar una cohesión a la hora de nombrar tus elementos. El desarrollo se volverás más rápido y eficiente. En el universo CSS podemos encontrar algunas estrategias como OOCSS, SMACSS… y BEM. Siendo esta última la más popular, y bastante comprensible por su sencillez.

La metodología BEM (Block Element Modifier) tiene 5 reglas:

Rápido de recordar y aplicar. Nada mejor que un ejemplo para terminar de entenderlo.

He realizado un supuesto carrito de compra en una barra lateral.

<html>
    <body>
        <aside>
            <!-- Bloque Cesta -->
            <section class="cesta">
                <!-- Bloque Item -->
                <div class="item">
                    <!-- Elemento Item Nombre -->
                    <div class="item__nombre">
                        Libro
                    </div>
                    <!-- Fin Elemento Item Nombre -->
                    <!-- Elemento Item Precio -->
                    <div class="item__precio">
                        30 €
                    </div>
                    <!-- Fin Elemento Item Precio -->
                </div>
                <!-- Fin Bloque Item -->
                <!-- Bloque Item -->
                <div class="item">
                    <!-- Elemento Item Nombre -->
                    <div class="item__nombre">
                        Lapiz
                    </div>
                    <!-- Fin Elemento Item Nombre -->
                    <!-- Elemento Item Precio -->
                    <div class="item__precio">
                        2 €
                    </div>
                    <!-- Fin Elemento Item Precio -->
                </div>
                <!-- Fin Bloque Item -->
            </section>
            <!-- Fin Bloque Cesta -->
        </aside>
        <main></main>
    </body>
</html>

Ahora quiero añadir un boton para Comprar.

<button class="boton">Comprar</button>

Ya había fabricado un botón genérico para todo mi sitio, pero en este caso necesito una variante de color verde. Añado un modificador separado por 1 guión bajo.

<button class="boton boton_verde">Comprar</button>

Nuestro Modificador añade o sobrescribe las clases que necesito. Un posible CSS del ejemplo.

.boton {
    border-radius: 2rem;
    background: white;
    color: black;
    border: 1px solid black;
}

.boton_verde {
    color: green;
    border-color: green;
}

Solo con esto ya podrías trabajar.

Si ha quedado alguna duda puedes ir al para ver más ejemplos.

2. SASS

Cuando empezamos con CSS nos sorprende lo rápido que se aprende, tiene una curva de dificultad muy baja. Las hojas de estilos han sido diseñadas para ser tan sencillas que cuando nos enfrentamos a un proyecto real (grande) llega a ser ¡agotador!. Nuestro código se vuelve poco a poco una columna que no conoce límites, donde varios fragmentos se repiten sin que podamos recordar la razón y los colores hexadecimales desaparecen en el ruido. Por necesidad se inventaron los preprocesadores CSS, un lenguaje intermediario para ayudar al Diseñador Web a realizar hojas de estilos.

SASS es el preprocesador más utilizado. Un pseudolenguaje, muy parecido a CSS, que es compilado por medio de un software para generar CSS. El resultado estará totalmente optimizado, cumpliendo los estándares, y preparado para una rápida lectura en los navegadores web. A nuestros ojos será indescriptible pero para la máquina será un atlas bien dibujado.

Veamos como funciona.

Variables

Aquí tenemos un fragmento de SASS.

$tamanyo-bordes: 1.3rem
$color-rojo: #e54206

a
    color: $color-rojo
    border: $tamanyo-bordes solid $color-rojo

p
    font-size: 2rem
    color: $color-rojo

Que al compliar tendremos un límpio CSS.

a {
    color: #e54206;
    border: 1.3rem solid #e54206;
}

p {
    font-size: 2rem;
    color: #e54206;
}

Jerarquía.

Simplificaremos, con tabulaciones, las jerarquías.

nav
    ul
        margin: 0
        padding: 0
        list-style: none
    li
        display: inline-block
    a
        display: block
        padding: 6px 12px
        text-decoration: none

Se transformará en…

nav ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

nav li {
    display: inline-block;
}

nav a {
    display: block;
    padding: 6px 12px;
    text-decoration: none;
}

Partials and imports

¿Y si quiero dividir un archivo CSS en varios para tener todo más organizado?

Creamos un archivo con el nombre, por ejemplo, _header.sass (el guión bajo indica que será para importar). Dentro el siguiente contenido.

nav
    width: 100%
    background: orange

Ahora realizamos otro archivo, en el mismo lugar donde esta _header.sass, con el nombre de main.sass.

@import "header"

body
    font-family: Arial
    font-size: 1.3rem

Al compilar se generará un archivo llamado main.css con lo siguiente.

nav {
    width: 100%;
    background: orange;
}

body {
    font-family: Arial;
    font-size: 1.3rem;
}

¿Cómo compilo SASS?

Para compilar tenemos un multitud de opciones, tanto libres, gratuitas o de pago; y para todos los sistemas operativos.

En el caso de querer usar el terminal, necesitarás el paquete de npm/yarn node-sass.

node-sass <archivo SASS> <nombre que tendrá el archivo CSS> [opciones]

Ejemplo

node-sass main.sass main.css

Si queréis ver todas las posibilidades de SASS puedes pasarte por mi .

3. Patrón 7–1

Podremos tener buenos nombres, y fantásticas herramientas de CSS… pero seguimos sin tener una arquitectura. ¿Cómo organizamos nuestro CSS? Hay que dividir nuestro fichero en varios ficheros y carpetas obteniendo una estructura autoexplicativa y eficaz. En caso contrario más vale que vuelvas a una estructura monolítica.

Una guía muy clara es el Patrón 7-1, una arquitectura extraordinariamente ordenada que cualquier Diseñador Web puede entender a golpe de vista.

Sus 2 reglas:

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á de la siguiente manera:

@import base/reset
@import base/typography
@import components/buttons
@import components/carousel
...

Versión Lite

Si el sitio es pequeño tal vez no sea necesario dividirlo con tanto empeño. Por ello os propongo una versión opcional y recortada que siempre uso a la hora de realizar un trabajo rápido (una semana o menos).

sass/                    # Carpeta donde estará todo nuestro SASS
|
|– _base.sass            # Compartirán todas las páginas.
|– _header.sass          # Cabecera
|– _footer.sass          # Pie
|– _mixins.sass          # Mixins de SASS
|– _typography.sass      # Fuentes/tipografías
|– _variables.sass       # Variables
|– pages/                # Carpeta con los estilos propios de cada página
|   |– _home.sass        # Página de inicio
|   |– _contact.sass     # Página de contacto
|   ...                  # Etc…
|– 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

Puedes conseguir más información en la . Si necesitas un ejemplo dispongo de una .

Extras

Hay otras herramientas que te harán el desarrollo más fácil pero que no importa mucho a la hora de diseñar tu estructura.

¿Alguna pregunta? ¡Deja un comentario!

Versión escritorio