Arquitectura CSS

Sé eficiente con tus estilos

Sobre mi

Me llamo Abel Cabeza Román, soy un Andaluz de pura cepa que siempre mira a los problemas de "Frontend".

Toqueteando webs desde 2008, dedico mi tiempo libre a aprender cosas nuevas, sobre todo del mundo del desarrollo web.

Soy miembro oficial de la ACIE (Asociación contra IE). Me gusta la pizza con piña y recuerda que si hay algún problema...en mi local funciona.

¡Empecemos!

Principios y Metodologías

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

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;
}

 

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;
        }

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. 

Inverted
Triangle
CSS

¡Listos para la batalla!

Artículos interesantes

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/

Contacto

web: www.abelcabezaroman.com

email: contacto@abelcabezaroman.com

instagram: @zero_neutro

twitter: @abelcabezaroman

Made with Slides.com