Arquitectura CSS 2.0

Se eficiente con tus estilos

Principios y metodologías

  • OOCSS (Object Oriented CSS)
  • SMACSS (Scalable and Modular Architecture for CSS)
  • Atomic Design
  • BEM (Block, Element, Modifier)
  • ITCSS (Inverted Triangle CSS)
  • Otros: SUITCSS, Systematic CSS

¿Por qué?

  • Estructuración de HTML
  • Organización CSS
  • Manteniabilidad
  • Reutilización
  • Eficiencia

Object
Oriented
CSS

Separar estructura de la piel

#header{
    margin-bottom: 20px;
    padding: 10px 10px;
    background-color: #fff;
    border: 1px solid #000;
}

#footer{
    margin-top: 15px;
    padding: 25px 10px;
    background-color: #fff;
    border: 1px solid #000;

}
.header{
    margin-bottom: 20px;
    padding: 15px 10px;

}

.footer{
    margin-top: 15px;
    padding: 25px 10px;
}

.skin{
    background-color: #fff;
    border: 1px solid #000;
}

Separar contenedores del contenido

#header h3{
    font-family: 'Arial';
    color: #000;
    font-size: 18px;
    text-transform: uppercase;
}

#footer h3{
    font-family: 'Arial';
    color: #000;
    font-size: 18px;
}

h3, .heading-3{
    font-family: 'Arial';
    color: #000;
    font-size: 18px;
}

.text-up{
    text-transform: uppercase;
}

Scalable
And Modular

Architecture

CSS

Base

h1{
    color: #000;
    font-size: 36px
}


ul{
    list-style: none;
}

li{
    display: block;
}

Estilos base para elementos html

Maquetación

.l-contenedor{
    width: 1024px;
    display: block;
    padding: 20px 10px;
}

.l-box{
    padding: 10px;
    display: block;
}

Estilos aplicados al diseño estructural. Medidas, paddings, margenes...La nomenclatura  a seguir se indica con una "l" o "layout" al principio.

Modulos

.module-search{
    width: 240px;
    display: block;
    border: 1px solid #fff000;
    padding: 20px 10px;
}

.module-button{
    padding: 10px;
    text-transform: uppercase;
    display: block;
}

Comportamiento similar que los bloques de la metodología BEM. Puedes especificar el nombre que quieras a la clase. Su prefijo es "module-".

Estados

.is-hidden{
    visibility: hidden;
    display: none;
}

.is-disabled{
    opacity: 0.5;
    pointer-events: none;
}

Como su propio nombre indica son reglas de estilo que especifican el estado actual de la interfaz. Su prefijo es "is-"

Temas

.link{
    color: #fff000;
}

.text-big{
    font-size: 36px;
}

Estilos genericos que aplicaremos a diferentes elementos con diferentes clases a modo de mantener unos estilos base como si de un tema se tratara.

Atomic

Design

Átomos

Los átomos son el nivel más básico en Atomic Design, cualquier etiqueta HTML es un átomo: button, input.

Moléculas

Una molécula es la agrupación de un conjunto de Átomos. Un caja de buscador, una tabla, un menú...

Organismos

A su vez, si agrupamos las Moléculas obtenemos Organismos. Un ejemplo de Organismo podría ser una cabecera, un aside, un footer...

Plantillas

Siguiendo con la dinámica nos encontramos con las plantillas. De nuevo, las plantillas son un conjunto de organismos. Por ejemplo, podríamos tener una plantilla para una página "Categorías" o una página de "Busqueda".

Páginas

Por último tenemos las páginas. Una página es la concretación de una plantilla. Para que nos entendamos, la instancia de una clase. A este nivel se aplicarían cambios muy específicos de páginas concretas. 


Metodología
BEM


Bloque

Un bloque no es más que un contenedor en el que se encontrarán diferentes elementos con sus diferentes modificadores.

Este contenedor debe tener una entidad propia que no dependa de ningún otro bloque.

Esto no quiere decir que no podamos tener un bloque dentro de otro, si no que estos serán independientes entre sí.

.header{...}

.footer{...}





.btn{
    background-color: #00b9f7;
    color: #fff;
    padding: 10px;
}

.heading-1{
    font-size: 32px;
    color: #000;
}

Elemento

Un elemento es básicamente una pieza de un bloque. No puede haber un elemento que no pertenezca a un bloque y todos estos a su vez deben estar anidados dentro. Su nomenclatura se define con el nombre del bloque al que pertenece, dos barras bajas y el nombre del elemento.

.header{...}
    .header__logo{
        display: block;
        height: 70px;
        max-width: 150px;
    }
    .header__logo-span{
        font-size: 18px;
        color: #000;
    }

.footer{...}
    .footer__copy{
        float: right;
        font-size: 16px;    
    }

.btn{...}

Un elemento puede contener diferentes elementos. Un elemento no puede ser dos elementos del mismo bloque a la vez. Un elemento puede ser a su vez bloque.

Modificador

Un modificador no es más que la alteración de los estilos base de un bloque o elemento. Un bloque o elemento puede contener cuantos modificadores queramos (sin abusar).

.header{...}
    .header--dark{
        background: #000;
    }

    .header__logo-span{...}
        .header__logo-span--light{
            color: #fff;
        }

Inverted

Triangle

CSS

Problemas

Solución

Ideal

Especificidad

Definición

Conjunto de reglas utilizadas por los navegadores para definir que propiedades CSS aplicar a según que elementos.

Angular

Xataka

"BEM e ITCSS"

BEM e ITCSS Sin librerias

BEM e ITCSS

Contacto

Web: www.abelcabezaroman.com

Email: contacto@abelcabezaroman.com

Instagram: @acronico_es

Twitter: @abelcabezaroman

Github: https://github.com/abelcabezaroman

Enlaces de interés

https://zellwk.com/blog/css-architecture-2/

https://www.smashingmagazine.com/2011/12/an-introduction-to-object-oriented-css-oocss/

http://www.espai.es/blog/2016/07/metodologias-css-oocss-bem-smacss/

http://dispersium.es/atomic-design-en-diseno-web/

http://bradfrost.com/blog/post/atomic-web-design/

Arquitectura CSS 2.0

By Abel Cabeza Román

Made with Slides.com

Arquitectura CSS 2.0

  • 500

More from Abel Cabeza Román