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:

  • Se desactualizan con rapidez.
  • Muchos de ellos necesitan Javascript.
  • Gastarás tiempo revisando la documentación.
  • Te limitan a la hora de maquetar con Flex y Grid.
  • Añaden componentes y líneas de CSS que nunca necesitarás pero siempre te acompañarán.

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. Nomenclatura: BEM
  2. Preprocesador: SASS
  3. Estructura de archivos: Patrón 7–1
  4. Extras

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:

  • Todo se nombra con clases.
  • Todas nuestras secciones/componentes se denominan bloques.
  • El interior de nuestros bloques se denominan elementos.
  • Un bloque y un elemento se separa por 2 guiones bajos: blog__articulo.
  • Un elemento y su modificador se separan con 1 guión bajo: boton_desactivado.

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 sitio oficial de BEM 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.

  • Prepos (Pago): Mi favorita: rápido de usar, altamente configurable, lleva preinstalado un servidor web con autorecarga, admite otros compiladores (Typescript, CoffeScript, Pug, Slim…), y te deja crear flujos de compilación (¿Te suena Gulp? Pues de forma gráfica). De profesionales para profesionales.
  • Koala (Open Source): Sencillo de usar y apto para todas las plataformas. He tenido buenas experiencias en Windows pero no en Mac OS.
  • CodeKit (Pago): Si tienes Mac OS no pierdas la oportunidad de investigarlo. Realiza varias tareas interesantes como optimizar imágenes.
  • Scout-App (Open Source): Similar a Koala. Arrastrar la carpeta donde esta tu web y listo.

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 completo tutorial de SASS.

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:

  • Todo en 7 carpetas.
  • main.sass debe estar a la altura de las carpetas e importará todos los archivos.
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 guía de estilo de SASS.

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.

  • Gulp: Con un archivo de configuración, podrás programar todas las tareas repetitivas (optimizar imágenes, minificar, sincronizar por FTP, compilar SASS, buscar errores, hacer test…)
  • Autorefresco: Hay plugins para Gulp (browser-sync) y muchos programas (como Livereload) que harán un rápido refresco del navegador después de cada cambio (o cada vez que guardes un archivo).
  • Checklist: Como dice el dicho: vale más lápiz corto que memoria larga. Y en el desarrollo Web hay muchas cosas que recordar. Nunca va mal repasar alguna lista con tareas para no dejarnos nada a la hora de terminar un sitio (como https://frontendchecklist.io/).

¿Alguna pregunta? ¡Deja un comentario!